Forem: M. Stevens

Combating Racial Bias in UX Design

M. Stevens — Fri, 21 Aug 2020 15:48:37 +0000

A look at how UX design can negate racism and promote positive impact

As you're well aware, this year has been unlike anything we could've imagined.

In the United States, in particular, the pandemic gave way to protests following the death of George Floyd and radical shift in the national and global conversation about how society treats it's most vulnerable and marginalized groups.

Many companies and studios whose industries include tech and design, which in the past have avoided or downplayed issues with race and diversity, found themselves having to show some form of support

While in some cases it seemed genuine, most displays of solidarity were just that... displays. Many had no comprehensive plan on how to combat the lack of diversity, the lack of opportunities for underrepresented groups, and lack of
diverse leadership.

You may wonder why is that important or you may think its not a big deal. Well, I got news for you, IT IS!

When it comes to the creation of products and services for the web and how they are developed and designed, who is chosen to
take on the tasks of doing that is intentional and most likely have a skewed view of the world they live in.

Most of the time they are usually White and sometimes Asian, with no further representation of Black, Latinx, or Indigenous People.

The decisions that place people of privilege in these positions can have consequences for users, the ones they have in mind, and the ones they don't have in mind.

Consider how apps such as Nextdoor utilize a method known as anticipatory design. Sure it helps to make hard decisions super easy for the user in a way that gives them less to think about, but in the wrong scenario, it could lead to an error of judgment and place someone traditionally powerless in society in real danger.

With that being said, how can we make changes to move in the right direction so that we use design as a tool for change and not to beef up the status quo or promote oppression?

Here are several ways that this can be done. Take note that this is not a foolproof way to change attitudes and actions overnight but rather they are suggestions that can pave the way to more radical shifts in the process.

User Interviews & Research:

By conducting research and interviews with a wider variety of your targeted group, in terms of ethnicity and cultural groups, for example, you will find that not only are there other groups of users who may use your product or service, but you'll also find out what they like and what should or shouldn't be in the final product based on having a greater understanding of cultural norms, dos and don'ts, and identifying cultural insensitivity issues before shipping.

Outreach and Signal Boosting:

As someone in tech/design and in a privileged group, what are you doing to encourage more designers from all backgrounds? Are you offering a mentorship? Are you an ally? Do you help to promote inclusion in the industry or even your own workspace, or better yet do you share the work of Black and POC designers to your audience or professional circles? Doing this like the ones mentioned pushes new creatives with fresher viewpoints into the conversation and gives them the attention they deserve for the work they do.

Inclusive Team Building:

When it comes to product and development teams, most are lacking voices that are diverse, a similar feature of the communities they come from. This is because of the implicit bias and overt racist viewpoints and stereotypes that are ingrained into western societies like the United States. The outcome of that leads to products and features being created and shipped that are tone-deaf and lacking in acknowledgment of racial, social, and economic structures and history.

Perhaps as a way to promote change and avoid bad PR and money being wasted on useless design and research, hiring and placing Black and PoC designers, product managers, and directors on teams would allow for multiple opinions in the decision making processes that go on during the design and iteration of products and services. They should also be involved in the hiring process for junior designers and recent grads getting their feet wet in the industry.

By doing that, you're not just hiring someone to fit a quota or make the company look good, you're actually helping UX/UI design be better as a discipline, an industry, and laying the foundation necessary to push for widespread and hopefully permanent change.

This post also appears on my blog as well, feel free to check it out!

Confirmation Bias In UX Design

M. Stevens — Thu, 19 Mar 2020 09:44:58 +0000

This is part 1 of a two-part series on topics related to "Bias in Design"

With the conceptualization and adoption of next-generation technology and disciplines such as AI, AR, and UX,
eventually, the issues of racial and cognitive bias would seep in...

First and foremost as a developer and/or a designer you have to remember that regardless of where you were raised or how cultured you think you may be, you ARE still capable of exhibiting some form of bias. That's a fact.

There are many forms of cognitive bias that occur during the design and research process which could hinder the creation of the resulting product or service. This, in turn, puts the validity of the research and your work in general in a compromising position.

“I think it's outrageous if a historian has a 'leading thought' because it means they will select their material according to their thesis”

― Antony Beevor

One of the biggest forms is known as Confirmation Bias. This type of bias leads to designers, developers and of course ordinary people to intentionally take into consideration any data that only supports their argument or desired methods. This is done based on a number of factors including holding the belief that what they know and their experience is a fact without regard for the opinions of others.

“People put a lot less effort into picking apart evidence that confirms what they already believe.”

― Peter Watts, Echopraxia

You see this occur during A/B testing for example, when we want to see the results that we desire and stop at that point. Self Validation is the objective and it often leads to us making errors we try to ignore by making excuses.

In UI/UX you must be careful to avoid this form of bias as it can cloud your judgment and cause damage to the usability testing and user research you conduct for your design patterns.

You must always keep in mind that in the design process you are not the end-user and that you are building patterns to be put to use in order to satisfy the needs of the targeted audience.

Here are some of the ways that you can prevent or minimize Confirmation Bias from taking hold during the design process:

Mapping the Journey: All this means is that you need to create a solid qualitative research plan so that you can interview potential users, analyze their motivations and their behavior so that you can deliver reliable yet personalized experience based on the data you obtained from them.
Diversify Your Feedback: This is where it gets tricky and what many designers often fail at. You need to make sure that the pool of respondents is not from the same background as yourself. While this can't always be done in every situation, the effort should be made nevertheless to make sure there is as many unique perspectives as possible for surveys and focus groups.
Look Out for the Naysayers: Yes you read it right and yes you have to include them. The ones who disagree with you, who don't like the design, or have issues with the intuitiveness of the product are important. They help you see if there are mistakes that you may have missed or exposed to new issues. The user feedback that comes from them is priceless.
Always refer to the Data: The data is your friend. You need it to succeed. The data from the research you conduct allows you to ask the questions that really matter to determine how a product is well received by users. Tracking usage data with quantitative metrics enables this to happen, the right way.

My Essential UI Toolset

M. Stevens — Thu, 06 Feb 2020 07:59:45 +0000

"A good tool improves the way you work. A great tool improves the way you think."

- Jeff Duntemann

"No amount of tools can help a bad product. You have to remain genuine in your product development innovation and quality.''

- Kara Swisher

The quotes above can be applied to pretty much anyone and the choices of tools they choose to use, regardless of profession.

Even with the best tools, you still have to learn how and when to apply them given the task at hand. Not to mention having tools you can always rely on to help you with your craft is always a plus!

For this post, I wanted to share my ever-growing list of tools that help me do the work that I do, from frontend development to UI/UX design.

These are some of the software, sites, and services that I found either on my own or via suggestions by fellow designers and developers (see below).

Notion - Note-taking, Task listing, budget management, keeping track of roles I applied to, trip itineraries, the list goes on. Notion is a one-stop-shop for teams and solo power users, with many templates to choose from to keep track of and manage workflow and options for collaboration.
Slack - I use this to for communication with groups that I'm in, and have used it in the past for the last few jobs I was on.
Nowadays I mostly use it to keep up with groups such as codenewbies, blacktechpipeline, and united designers.
Bear - I use this for taking quick notes, saving images in notes when not online. Plenty of options for using markdown and HTML.
Visual Studio Code - For all coding projects, it's my main compiler, after having left Brackets and Atom behind. There are many extensions to choose from to enhance your productivity and your projects in general.
Adobe XD - UI design software used to create artboards and mockups.
FIgma- Another UI design software, similar to Xd but with collaboration in mind and an emphasis on interactions.
Pixelden - Premium option for high quality images. Paid of course.
Unsplash - Good option for high-quality images, totally free, no watermarks.
Adobe Illustrator - just started using this, and so far it's come through for stuff non-tech related, like the business cards I've designed for freelancing. It can (optional) also be used for creating mobile and desktop mockups and image-intensive projects.
Coolors.co - Color palette generator, you can use it to create custom palettes. They have a feature to lock certain colors so that you keep them after refreshing the remaining set for customization.
Colormind- AI-powered color palette generator, supposed to use algorithms to create a cohesive set of colors for use in your next project.

This list will most likely see updates as time passes or when I find something else to aid me in my work.
Keep in mind that I am not suggesting you use all the ones listed here, but if you find one you like that's a good thing!😃

This post also appears on my blog as well, feel free to check it out!

New Year, New Goals

M. Stevens — Thu, 09 Jan 2020 02:49:50 +0000

Resolutions are one of those things that we all try to do but never finish.
We make these declarations about learning a new skill or losing weight, or whatever we can think of in the moments before the ball drops and the celebrations are over.

In reality, the majority of us mess up before the weather gets warm and we throw those jackets right back in the closet.
So with that being said, its a new year here, but I have no resolutions, only long term goals.

My main focus throughout 2020 is taking the time to accomplish three of these goals:

1. Learning Python

2. Improving my knowledge of UI/UX

3. Attending Meetups

Python:

A while back in 2017, I told myself that I wanted to learn how to code in Python and while doing the 100DaysofCode Challenge,
I got sidetracked with improving my JavaScript skills, which did work out to some extent. In the end, I failed at my goal of learning Python and learning the many applications I can apply my knowledge to.

This time however I am recommitted and back on track to learn, with a little more help, of course, courtesy of Microsoft and its introduction course, which can be found on YouTube and on their main site (details at end of the post.).
By building a foundation, I hope to avoid tutorial hell and move on to topics such as scripting and data visualization.

UI/UX:

If you been keeping up with me then you know I been making the transition from just focusing on front end web development and getting into specialization in User Interaction and User Exerperise design.

I personally feel that having a hybrid or multidisciplinary skillset would help me in the search for future opportunities. A while back I remember freecodecamp putting out an article about the hundreds of free online courses from some of the top universities in the world.

Little did I know that I would be reminded again thanks to an awesome twitter user @chrysking who made an amazing thread showing how she leveled up on her journey using one of the resources I am showing you.

As of today I signed up to Coursea and enrolled in the Human-Computer Interaction Design course offered by UC San Diego.

Meetups:

Part of growing as a developer or designer is putting yourself out there. Sometimes interacting in real life is just as important as building your online presence.

That's why I joined a few groups on Meetup and this year plan to attend events as regularly as I can, time permitting.

Protip: Joining smaller more niched communities works as well since it gives you a chance to get to know others just like you who are on their coding journey as opposed to being in larger ones where you can find yourself lost or drowned out by the sheer size. Head on to Meetup and find groups related to your interests near you!

As promised here are the links if you're curious about learning more:

Coursea

freecodecamp

Microsoft's Intro To Python

Python for Beginners

Hope this helps you, even if it is just a little bit and here's to a wonderful New Year ahead of us!

This post also appears on my blog as well, feel free to check it out!

The Psychology Of Color

M. Stevens — Sat, 04 Jan 2020 04:17:55 +0000

"The colors can make or break your design"

You may have heard a statement like this made before when it comes to the implementation of UI/UX design for applications and sites.
While this is true, you must also take into account the psychology of color, cultural differences,
and the color palette of the clients you're working for.

Colors have a way of invoking certain emotional states within humans.
These factors have to be taken into consideration when you decide on the color palettes for your projects.

These are a few of the examples of the most used colors and what their meanings are, in relation to North America and most Westernized societies:

Red 🍎

Red is one of the boldest colors and can represent energy and enthusiasm.
It also evokes strong emotions. A sense of urgency can be conveyed through the usage of this color in a design system.

Yellow 💛

Yellow is considered warm and pleasant and is often used to represent happiness, clarity, warmth, and intelligence.
Considered an attention grabber.

Blue 💙

Often considered a "cold" color, it can represent calmness and serenity and the feeling of trust and security.
In many cultures, it is seen as a masculine color and most business-centric corporations use it to symbolize trust and competency.
The impression of cleanliness has also been conveyed through this color.

Green 🍏

Symbolizes nature which associates with growth, wellbeing, and calmness.

Pink 🌺

Pink is seen as one of the more warmer colors.
It symbolizes sophistication, sincerity, and is often connected with feminine imagery.

Purple 💜

It creates a sense of luxury, prestige, and elegance. At times it has been identified with authority and power
Different shades are used to represent creativity and imagination.

Black ⬛

This color has come to be defined as symbolizing power, elegance, and luxury. In other cases, it symbolizes grief, loss, and fear.

This post also appears on my blog as well, feel free to check it out!

My Dealings with Event Handlers

M. Stevens — Sat, 31 Aug 2019 01:36:05 +0000

As you may or may not know, I am currently on my journey of becoming better at JavaScript and React.

This has been easy at times but harder as the topics get more complicated and I continue to grow as a developer. One of
the topics that have been difficult but interesting is how Event Handlers are dealt with in React.

To give a little bit of background info on this particular topic:

*Event handlers help keep track of every action performed by the user. *
*This can be anything from resizing a window, clicking on links, a page scrolling, all of which are processed by event handlers. *

Things to keep in mind:

The naming of events in React are of great importance, and adding events is similiar to how they are added to DOM elements.
Synthetic events play a role, as they are needed to provide event details and can be passed into event handlers as well as callback functions.
Defining events using JSX: use the camelCase event with the handler or callback function as the property of the JSX that is a placeholder for the element in React.

My first exposure to event handlers came in the form of tutorials in the Learn ReactJS course on Codecademy.
While it was only a small preview, that part of the lesson gave me insight into updating parent and child components in React through the use of event handlers.
Continuing onward, I want to make sure that the concepts that I am being exposed to will help me in the implementation aspect when building new projects. I have a long way to go with becoming stronger in React, and while this topic was a challenge,
determining the logic behind it helped to broaden my understanding and increase my knowledge base.

This post also appears on my blog as well, feel free to check it out.

A Short Primer on Design Systems

M. Stevens — Fri, 16 Aug 2019 20:06:51 +0000

You may have heard the term Design Systems, or maybe other terms such as Design Language, Pattern Library, or even Component Design.

When we talk about Design Systems, we are actually referring to components that can be reused in a number of different combinations. This is very important when dealing with human-computer interaction, user experience, interaction design, as well as front-end development. Design Systems help with improving design and development workflow, iterate with confidence and manage updates collaboratively. Documentation is also key to understanding the separate components that make up the design system along with when and how to use them effectively.

The importance of having a Design System is crucial to a team for a variety of reasons.

The main reasons:

Scaling your app or product for future growth
Promoting Consistency throughout the user experience and product branding
Efficiency for developers and designers in order to save time
Encouraging Teamwork

Some of the biggest examples of commercial design systems are:

Polaris by Shopify
Airbnb Visual Language
Plasma by WeWork
Swarm by Meetup
Google's Material Design

Here are links to more in-depth information about design systems if you feel like going down the design development rabbit hole:

Everything you need to know about Design Systems

Systems Design - Wikipedia

This post also appears on my blog as well, feel free to check it out.