What is a UX/UI Designer (Product Designer)?
End-to-end work flow of a Product Designer
As a New Yorker, I get asked two fundamental questions, “Where do you live?” and “What do you do?” It might be a little strange to ask someone you’ve just met where they live but here in New York, where you live pretty much defines who you are. Well, that’s what ‘Sex and the City’ taught me anyway.
I have been living in Brooklyn for some time, but I just made the leap to Manhattan, pretty close to those famous front stairs actually. So after my morning earns around town, wearing my leathered heel peep-toe Cole Haan mules (because I can’t afford Manolo Blahnik’s just yet), I’m feeling pretty Carrie Bradshaw, typing this article on my Mac in my apartment before going to grab some drinks with the girls.
As for what I do, well, that’s more complicated. I’m a UX/UI Designer, also known as a Product Designer. However, when I tell my friends, family, and the people I meet that I’m a UX/UI Designer, a blank share looks back at me. When I say I’m a Product Designer, people tend to think of actual physical products that they can touch and hold. This leads to a 15-minute conversation about me explaining what my job entails, and I’m not entirely sure that the person walks away with a clear grasp. So I thought I would write a blog article to help clarify just what the heck I exactly do for a living, and I’ve included a few notable companies to help better relate.
First, what is UX/UI?
Let’s start with UX. UX stands for user experience. A person who works in UX helps their company or client research, design, and develop products and services that are easy, effective, and, hopefully, enjoyable to use. Although UX is a tech industry term, it can exist in both physical and digital space. For UX designers, the design is based on how users use the product or service.
Now let’s get into the UI. UI stands for the user interface. UI only exists in a digital extent. It focuses mainly on the visual aesthetics of the layout of an app, web, or software. UI design looks at design elements such as color, typography, buttons, and icons. Not only does a UI designer require to make the layout visually appealing, like UX designers, they also need to think about the users. Are the colors viewable for people who are color blind? Is the typeface readable? Can the user tell if a button is indeed a button? For UI designers, the design is based on how users view the design elements within the layout.
So what's with the term Product Designer? (Example using Google)
Back in the day, both UX and UI lived separately under the same umbrella. With the ever-changing tech boom, companies want designers to understand both UX and UI roles, combining the title into a UX/UI Designer. However, the term is evolving into what’s known as a Product Designer.
There are two primary means of working as a product designer. One, you can work for a distinct company, for example, Google. When you work for Google, you will only focus on the UX and UI of Google, what Google is, what Google wants, what Google users want. Google, Google, Google. Hey, did I say Google enough times? Two, you can work for a creative/marketing agency. When you work for an agency, you work on multiple projects for various clients that has hired your agency. There are pros and cons to both, and maybe I’ll cover that in a different blog article one day. Of course, you can be a freelancer/contractor; however, you would be either working for a company (Google) or an agency, so I won’t be counting that as a third separate option.
There are also two approaches to go into a design project. A new design, something that has never been created, when a company is new to launch (Google in 1998) or when a company invents a new product or service (when Google launched Gmail in 2004), the design team has to start from inception. The second is a redesign. With Google and its Gmail service produced, when Google changes things on their home or Gmail layout, it’s known as a redesign.
Now let's put it all together
Okay, let’s dive into what a UX/UI designer actually does. From here on out, I will prefer it as a product designer because, as mentioned above, it’s becoming a more popular industry term.
The four principal components I do as a product designer.
1. UX Research (Example using Instagram)
When I first get a project, I start with research. Research is so essential, some companies have a team of UX researchers solely dedicated to doing research. Research involves:
Exploratory research, looking at the marketplace for the particular product or service (in the case of Instagram, social media).
Competitive analysis, looking at and comparing competitors (Snapchat, YouTube). What they are doing well, and how can they improve?
User interviews, asking users what they like about the product or service and what makes them frustrated (keep or get rid of like?).
Contextual inquiries, observing how the user uses the product or service (are they scrolling, posting, commenting, liking, etc.)?
These are just to name a few. As a product designer, it’s not required to perform these specific research; however, thorough and actuate data is crucial. This is how to determine the problem and make the product or service better (why is TikTok gaining so much popularity? Let’s create the Reels feature).
2. UX Design (Example using Yelp)
Once the research is completed, it’s time to analyze and synthesis the data. One of the more common ways to do this is through an affinity diagram, finding common trends of what users like and are frustrated with (in the case of Yelp, users tend to like that they can clearly see how many stars and reviews the business has but generally are frustrated with filtering through fake reviews).
When the data has been examined, a user persona is made from the acquired information. A user persona is a developed character designed to represent a user who uses a particular product or service. Like a character in a book or film, this person has to seem real, so more details, the better! Here is a quick descriptive example of a user persona. However, a true user persona should be designed in a layout.
Beth Camlin is a 29-year-old nurse working at Mount Sinai in New York City. She lives in South Williamsburg, Brooklyn, with her boyfriend, John, of two years. They just rescued a corgi mix named Cedric. After work, she enjoys meeting up with her friends for happy hour in the city and, on the weekends, stays in Brooklyn and goes to brunch with her boyfriend and her new puppy. Being a foodie, Beth wants to find new trendy hotspots and likes to research the latest bars and restaurants. She is frustrated that she can’t seem to quickly find out if a restaurant has outdoor seating and if it’s pet friendly.
After the persona is created, this is when what I believe is the most vital part of my job happens, designing a problem statement. Problem statements are the pivotal moment when creating a design. This will determine what direction my team and I will go to developing a solution. Problem statements, of course, can be reiterated; however, attempting to get this right the first time will save an entire set of redesigns and testing. When Yelp comes to me and says, why is no one ordering delivery through our app, but orders on Seamless and Doordash are skyrocketing? It’s my job to figure out the why and design a solution based off the problem statement.
Now that the problem statement is set let’s actually do some designing. I work as a designer, after all. First, I like to start with hand-drawn layouts. This helps create divergent ideas quickly and efficiently without worrying about making all the sizes and spacing look perfect in software.
Next, low fidelity (lo-fi) wireframes of each divergent concept are created. I mainly use Figma; however, Sketch and XD are great too. Lo-fi means that the structure is made entirely in black and white, using just lines and boxes. This is so that the user focuses on the concepts rather than getting distracted by, say a shade of blue. Once these lo-fi wireframes are created, it is then made into a prototype a user can test.
The first set of user testing is to figure out which concept the user likes best, concepts A, B, or C. Giving users more than three options can create confusion. The two to three concepts should be significantly different enough to identify the most desirable.
Once the best concept emerges, it’s time for information architecture (IA). Like research, this portion is easy to skip when hard deadlines are quickly approaching; however, like UX researchers, this job is incredibly important that a person can solely be an information architect. IA deals with the art and science of creating user tasks and flows.
With the concept and IA designed, a set of medium-fidelity (mid-fi) wireframes and a prototype is built. In mid-fi, its color scale is still limited with the addition of a greyscale. Icons can now be added, as well as actual headers. I still like to keep images out, and the true content minimal at this point. With the mid-fi prototype ready to go, another round of user testing is performed. Once the user testing is completed, the data is analyzed, and the design is reiterated through user feedback.
3. UI Design (Example using Uber)
With the core concept functions designed and tested, my design team and I can move onto the UI strategies and apply the visuals elements to make the layout into high fidelity (hi-fi) wireframes and prototype. This is when the layout actually looks like what it should be. First, I start off with a mood board by adding style tiles. This board gives the design team and me what the visual aesthetics that will consist of within the frames, such as color, typography, icons, and other design elements. The color can be changing from #C2C2C2 (a grey) to #C4C4C4 (a slightly different grey); however, it is imperative to note it, so all the designers are on the same page. In the case of Uber, the color scheme is black, white, scales of grey. The typography is a custom typeface created by Uber called ‘Uber Move.'
Next, I create a UI kit; this consists of icons, buttons, header style, etc. to help establish consistency throughout the app, web, or software layout. Then images, graphics, and content are added, and any animations that are needed to complete the design.
As part of the UI process, I also have to think about the client’s branding. Uber has had a clean, modern design aesthetic since they’ve launched in 2009. As a designer, I can’t suddenly change the app’s color scheme to neon pink and typography to ‘Baskerville.’ Even if that’s what the user says they want, the sudden change will throw everyone off and create a bad user experience. Once this is concluded, a prototype is made, and another set of user testing is done on the design aesthetics. With the user testing complete, the data is collected, and the design is once again reiterated through user feedback.
4. Working with Developers
When the final mockup and prototype gets approved, I work with the engineering team to have the product come to life. As a product designer, it’s not necessary to know how to code; however, it’s incredibly beneficial to learn the basics. Designers tend to speak colors and developers, numbers. If neither of us understands the language of colors or numbers, things will get lost in translation, which will only hurt the users. By knowing how to speak numbers, I can better translate to the team how things should be created.
Conclusion
Of course, there are no hard and fast rules on how a product designer needs to approach a design project. I do change things up within each segment, depending on my time constraints. However, I make sure I do take these four steps listed and try to get as much user feedback as possible during the process.
As a product designer, the designing element is a secondary focus for me. My primary goal is to empathize with the user and communicate with my team. I view myself as a problem solver; I research and define a problem and design a solution.
There you have it, this is what I do as a product designer. If you are someone I know and was unsure about my career, I hope this article helped clarify things. If you are reading this article and are thinking about becoming a product designer, don’t stress, I know it sounds like a lot, but the work is a lot of fun if you like tech, design, and people. And if you are a product designer who has had trouble explaining to your loved ones what you actually do for a living, please feel free to send them a link to this article.
Okay, off for some cocktails. Suddenly I’m in the mood for some Cosmos.