Overview
Roles
-
Project Management
-
UX/UI Design
Timeline
-
3 weeks​
Design tools
-
Describe the item and include any relevant details. Click to edit the text.
The client’s specialty is baking Asian-inspired desserts. The desserts are made with flavors that are reminiscent of her Asian heritage. Currently, she has a website/blog and an Instagram presence. The website is used mainly for blogging since she is also a full-time grad student and can’t dedicate top her baking business 24/7. She currently hosts pop-ups at her favorite cafes when she is on college break and makes custom orders for user's private celebrations. The client requested a User Interface redesign and changes to increase user engagement and create an online community of users.
The client
A small business owner of Handmade Productions, an Asian-inspired specialty baked goods online store and digital blog.
Business requirements
-
Refresh the brand
-
Increase user engagement
-
Create an online community of users who are loyal to the brand, product and vision.
Challenges
Insights obtained from the client and feedback from users, the following issues were identified:
​
-
The current website is not optimally user friendly
-
The home page does not clearly communicate the "what" of the website
-
Important information on the home page is “below the fold”
-
The hero image on the landing page is ambiguous and does not clearly communicate the what or why, or how of the website
-
The blog section of the website is not ordered well
-
The color scheme does not allow for accessibility as it has low contrast
-
The blog posts are too long and users prefer reading posts that are “short and sweet”
The solution
-
User Interface (UI) redesign
-
A modern, minimalist look that represents the client's aesthetic vision
-
-
Create a user-friendly website (& blog) layout
-
Meet User Experience (UX) standards
-
-
Allow users to comment on and share posts
-
An email notification sign up
Design Process
To identify user needs, uncover design problems, and come up with an appropriate solution, I used a user-centered design thinking approach in the form of a modified design sprint process that spread across a period of 3 weeks,
Client interview
The client interview gave me. a glimpse into the heat, and vision of the client for her brand and business. I was able to understand the aesthetic vision of the client as well as ger aspirations for her business, and how I could help to reach those goals.
What
-
Creates & sells unique desserts inspired by nostalgic memories
-
Shares relatable stories about my personal journey, highlighting Asian American heritage
How
-
Through desserts made with flavors are reminiscent of Asian heritage and inspired by people
-
Meeting people and bringing community together through nostalgic flavors, delicious desserts & pop-up cafés
Why
-
Create Asian-inspired desserts that spark nostalgic memories for customers and make them feel at home.
-
Represent the unique Asian-American, 1st and 2nd-generation immigrant experience through baking and storytelling.
Target audience
-
71% female
-
Live in California
-
Age range: 18-34
​
Target audience through the eyes of the client:
-
Young, college students & young working professionals, within the Gen Z age range.
-
A diverse group of users who are educated, open-minded & health-conscious
-
People within the client’s social circles people, she meets along the way as her brand continues to grow
User feedback
I asked users to share their experience with ther current website. The feedback I received, helped me understand users pain points & what the brand needed in order to meet user needs.
“The colors are a bit dark, and feel almost old”
“I didn’t find where to comment because its right at the bottom, I would stop scrolling before I get to it”
“This typeface is very generic and plain”
“Black type with brown background on the blog is harsh compared to the rest of the color scheme”
“The “blog” page looks untidy”
“It's unclear what the website is for originally”
How might we...?
Competitive analysis
To get an idea of how other brands are achieving their goals, what they’re winning at and where they could improve, I conducted a competitor analysis.
Who am I designing for?
User empathy map
User journey maps
Storyboarding
I sketched a UX storyboard for Jenny, the user persona, to help me visually understand and predict her user experience with this digital product. This storyboard helped me identify the appropriate user stories to consider for the rest of the design process.
User stories
-
Jenny wants to read inspiring stories that make her feel represented as an Asian-American
-
Jenny wants to learn to make Asian-inspired desserts
-
Jenny wants to like, comment, and share a blog post she enjoys
-
Jenny wants to be notified about new blog posts
Initial user flows
The user stories gave a clear vision of what the updated website should offer to users. I designed an initial user flow to translate user needs into patterns and paths that users would take to accomplish their tasks and meet their goals while on the website.
The initial user flows included both the "recipes" and the "blog" section under the same heading and on the same page within the website.
Sketching
I used the four-step sketch method to brainstorm an ideal flow for users as they interact with the website. I started by making notes on the client's goals, user pain points, and needs to insights gathered from the competitor analysis. I then proceeded to sketch each page of the website, and then I did a crazy 8s for each webpage, before selecting the "winning" sketch, which would later need to be iterated again.
User testing
After turning these wireframes into a lo-fi prototype and conducting user testing, before designing the first, second, third, and fourth iterations.
“The first thing that stands out - the hero image.”
“Having to give personal info would deter me from commenting”
“What is the difference between blog posts and recipes?”
Key takeaways
-
The “blog” option that includes both recipes and inspirational stories causes confusion for the user
-
Users don’t consider recipes and stories to be the same thing, and so one heading item does not necessarily give users the information that they need
-
In response to user feedback...
“Separated the “recipes” from the “blog”, making them 2 different menu items
Added a THIRD user flow allowing users to find, read and try recipes
To protect against bots and trolls, continue asking name and email when commenting but give users the option to save or not to save their info for the future comments
Updated user flows
I took the feedback provided by users and went back to the drawing board. adjusted the user flow removing the onboarding and a shortcut icon that users did not use.
The updated user flow has an additional flow added. Recipes can be found on their own unique page on the website since it has been separated from the blog.
Sitemap
I took the feedback provided by users and went back to the drawing board. adjusted the user flow removing the onboarding and a shortcut icon that users did not use.
Branding
Part of the MVP of this project is a User Interface redesign. The Client would like her website to match her aesthetic visions. The client requested a website that is modern, and minimalist.
Mood board
I collaborated with the client when making UI design decisions. This mood board represents the client's aesthetic vision and what she would like the website to look and feel like. There are plenty of warm tones, whimsy typography, and the baked goods inspire the look and feel.
Colors
We chose beige for the background, to add warmth and calm. The black text communicates elegance and sophistication. The brown tones throughout communicate warmth and establish the trustworthiness of the brand.
Typography
Accessibility
Accessibility is an important consideration in the design, to make the design accessible to as many people as possible, I followed the accessibility standard. Throughout the website, the colors all have AAA approval for color contrast. The colors are also colorblind-safe. All icons are 48 pixels wide, and the font size is not below 18 pixels, which makes it easy for people to click and read.
Solutions
Below are comparisons between the current website and the solution I designed for the client, keeping in mind the feedback, pain points, and needs of users and UX standards.
Landing page
Home page
Blog page
Blog post
More usability testing
After adding the UI elements I presented the website back to users for further usability testing.
“I like the Heading typeface“
“The photos are high quality and the pictures match and colors”
“I enjoy the variety of shapes, it is very good to look at”
“I like that the recipes and the blog are separated”
“Color palette is light and it feels modern”
“It’s all so nice to look at, easy on the eye”
Going forward...
-
Design a mobile version of the website
-
Custom order online capability - link on the home page to contact form
-
Increase amount of recipes on the website
-
Remove email sign-up - Users stated they prefer to be notified via Instagram. However, the client requested an email sign-up for right now since there is no Instagram page designated exclusively to “Handmade Productions”
Reflecting
-
The Agile/sprint model is not my favorite design model, it feels rushed and haphazard, I need to get some more practice on additional projects to get the hand of it
-
It’s an art to tread the line giving the client what they want and designing products that meet users' actual needs
-
Finished in better than perfect
-
Translating abstract ideas into actual design decisions takes a lot of thought, research, and empathy!