Morning Lavender
Objective: create a more intuitive and seamless shopping experience for customers’ needs and preferences
Context
Morning Lavender is an online women’s boutique that sells feminine pieces curated by the owner.
Hypothetical Project of the owner wanting an increase in sales of clothing and retention rate.
Team: Sohee Bae
​
My Role: UX Research, Information Architecture, Competitive Analysis, Affinity Mapping, Persona Creation, Prototyping
​
Duration: 2 weeks
​
Software: Figma, Google Suite, Zoom
​
*This is a concept project done under the UX Design Immersive Program
Preview
Reorganized Filtering
Improved search flow by adding new filters, adjusted positioning, and increased clarity.
Product Checkout
Streamlined product checkout process and made information more clear.
Research
Competitive Analysis
I conducted a series of competitive analysis among other e-commerce websites that are affordable fashion catered towards women. After analyzing their business models, functionalities and differences, I focused on these main features. Here are my takeaways:
​
-
Morning Lavender caters to young mothers by providing maternity friendly clothes and kids’ clothes
-
They offer unique cafe and boutique experience
-
Does not provide much search functionality (there is search bar but it has visibility issues and redirects user to wrong pages)
Research Synthesis
I interviewed 3 users with online shopping experience and created a user persona after synthesizing responses with affinity mapping.
​
-
3 out of 3 users wanted to save money or time when looking for online apparel.
However, they try to only shop for necessity since websites can overwhelm them with adverts/distractions.
Current State Usability Testing
In order to gain a better understanding of where the website was having issues I conducted usability testing before ideating new ideas. As a result of conducting current state usability testing with 3 new users. I gave 2 tasks of finding a regular dress and a maternity friendly dress to see if the user flow is consistent regardless of the content of the user’s needs. As a result:
​
-
3/3 users were able to complete all tasks and actions
-
2/3 users used the shop tab, 1/3 users used search bar
-
All users were able to add blue dress to cart within 30 seconds whereas adding the maternity dress has taken 3-4 minutes to complete
-
Average of 4 Errors/extra clicks occurred during the second half of task
Users main concern was confusion if the dress was in fact maternity friendly.
Problem
Users need a better way to find and purchase affordable and good quality clothing to save time and money.
Solution
How Might We...
-
Adjust search based on color preferences or clothing material?
-
Make it easier to see total costs before placing orders?
Ideate
User Flows
The current state user flow was not effective enough in helping the user understand if their searching process was effective in finding their desired item. In order to address this, I created new filters and would set search results appearing by relevance instead of best selling. So regardless of user’s path of search bar or navigation tab, the user would have the best results appear at the top.
Current State User Flow
Proposed User Flow
Usability Testing
We had the users accomplish the following task and took feedback on what we did well and how we can improve.
Task: Find a maternity friendly dress and complete the purchase.
“I liked how easy the filters were to use.”
“The process was straightforward from searching to checking out”
3/3 users were able to complete all tasks and actions.
Time to complete the task (maternity dress) was reduced to 1 minute compared to 3-4 minutes.
Key Takeaways
Results: Users were able to shorten the time spent on navigating the website as they were given clearer indicators of different kinds of dresses. Besides one user who wanted functionality for adjusting the relevance of search results, other users were able to use the search filters effectively.
​
After applying changes based on the first round of usability results, we completed usability testing for the high-fidelity prototype with slight adjustments to the task while still following the same user flow. As a result of the feedback we:
​
-
created indicators of what size and color selected
-
implemented a order confirmation page
What are the next steps to development?
-
Add an in stock filter or better indicator of what sizes/colors are out of stock
-
Move social media icons and tabs at header to the footer
-
For Store Pickup, unbold locations and other text. Instead darken or change color of CTA (call to action) box
-
You can play with the full prototype here!