FAQ: HOW IS MY DESIGN PROCESS?
A common question on Product Design interviews is about how I do my work process. Let’s see it.
The problem
You have to spend time understanding how is my process. We – both– know that this is part of your candidate search could be simplify somehow. As a conclusion, you need to understand how I work, and I have to find a solution to make your job easier.
Team
1 Senior Product Designer
1 Assignment Manager
Date
2023
Role
The Product Designer you are looking for 😉
Duration
About 10-12 hours
Research
After many job interviews in my career from my younger years as Graphic Designer to my current role as Senior Product Designer, I’ve observed and analyzed the process of HR and Headhunters. Many of those questions and concerns are mostly about my job process and how I work from end-to-end. Being each designer works in their own way and each company creates unique differences in the process.
After testing some methods, I have the certainty that an overview is generally the most confortable way to solve those queries.
Concept
As I have the hypothesis a recruiter –on the Design Team– needs to understand how I develop my work, I’d decided to use a challenge task to show some highlights.
This is a supposed challenge for Smelly Cat. Smelly Cat is an app to search for people who want to welcome your cat at their place when you go on holiday. The app has two main users: cat owners and cat sitters.
As a Product Designer, I’ve analyzed a lot of requests from cat owners saying that they also want to have the ability to be cat sitters and we’re bringing up this possibility on the next iteration of the home screen.
Being a huge, great improvement for the product, I’d had the approval to prioritize a brand color task long forgotten in the backlog.
Extra ball: The app doesn’t exists. As Product Designer, I’ll have to be able to design the full view of home screens for owner user and sitter user.
My role
A solo designer who has worked in Product Design since 2014. Once given the challenge task, I’d done several steps in the Design Process and picked a bunch to develop this task.
Main Tasks
- Discovery (Problem Discovery and Problem Definition)
- Definition (Solution Discovery and Concept Validation)
- Design and Validation (Development)
- Analyze (Rollout)
Team
I am the team. I am the storm.
Tools
These are the tools I used for design, validation, and iteration.
Business goals
- Increase user engagement and conversion: By making it easy for users to switch between sitter and owner profiles, businesses can increase user engagement and conversion. This is because users will be more likely to continue using the platform if they can easily switch between the roles they need to play.
- Improve the user experience: By reducing the friction associated with switching profiles, businesses can improve the user experience. This is because users will be less likely to get frustrated or confused when trying to switch profiles.
- Increase user satisfaction: By providing a seamless experience for switching profiles, businesses can increase user satisfaction. This is because users will appreciate the convenience and ease of use.
Design goals
- Use clear and concise language: The language used to describe the process of switching profiles should be clear and concise. This will help users understand what they need to do and how to do it.
- Provide clear instructions: The instructions for switching profiles should be clear and easy to follow. This will help users avoid confusion or frustration.
- Use visual cues: Visual cues can help users understand the process of switching profiles.
- Test with users: It is important to test the process of switching profiles with users to ensure that it is easy to understand and use. This will help identify any potential problems or areas for improvement.
Brand
The color palette is the foundation of any brand identity. It is what creates a sense of visual unity and helps to communicate the brand’s message.
In this case, the brand is poorly constructed. However, it is not our responsibility to propose a rebranding at this point. Therefore, we have prioritized working on the color palette.
We will use the colors of the logo to extract a palette of color based on complementary and analogous colors.
A pure black background kills all light emitting from the screen. Colors as yellow or organe are hard to work on screen. Let’s find out their triad to swing and build the brand identity.
A pure black background kills all light emitting from the screen.
Color explorations
Colors as yellow or orange are hard to work on screen. Let’s find out their triad to swing and build the brand identity.
We will use the colors of the logo to extract a palette of color based on complementary and analogous colors.
Complementary colors are opposite each other on the color wheel. They create a strong contrast and can be used to create a sense of excitement or energy. Analogous colors are next to each other on the color wheel. They create a sense of harmony and can be used to create a sense of calm or tranquility.
Researching the arena
- Cat owners are users who want to switch between owner profile and caretaker profile.
- Not all cat owners want to be caretakers.
- Not all caretakers are cat owners.
Making clear the requirements
- Product Design as much as UI aspirational experience.
- Easy to locate.
- Clear information about profile.
Competitors
- Other apps for cat sitters.
- Apps with siwtch between accounts.
- Apps for pet owners.
Research competitors
Research profiles
Analyze components
Location
- Where am I?
- Where the cat sitter is?
- Switch between needs.
Filters
- Where the cat should arrive to the sitter’s home?
- Who is living there?
- How many cats to sit?
- How many pets are there?
- How many people live there?
- Do the sitter have human family?
User flow
A user flow is a visual representation of the steps a user takes to complete a task on a product or service. It is a valuable tool for UX designers, as it can help them to identify and address potential pain points and usability issues.
As this is a fake challenge task, this is how looks like an ideal user flow:
Wireframing
Now I have all the information, let’s continue with the wireframes, from scratch.
A wireframe layout is a low-fidelity sketch or model of a web page or app that shows the basic structure and layout of the page, including the placement of elements such as text, images, and buttons.
Layout
Wireframes
Final solution
A button switcher that allows users to access profile settings.
This button is located in the top of the screen, where the user can see their profile, details and settings.
Once the user clicks the button, the screen displays the profile options. This option includes the ability to create a new profile or select to switch between profiles.
👍 Use clear and concise language.
👍 Use an intuitive design.
👍 Test the solution with users.
Owner profile
Sitter profile
