Fol Epi Website Redesign
The purpose of this project was to redesign, Fol Epi, a local organic bakery's website to help customers easily find and order baked goods.
My Role
UX/UI Design
User research
Design
Prototyping
Timeline
8 weeks
Scope
Design thinking
Problem framing
Concept ideation
User journey
User flow
Interaction design
Information architecture
Tool
Pen & Paper
Post-it notes
Figma
DISCOVER
CURRENT SITUATION
Fol Epi is a local bakery in the heart of downtown Victoria. Its mission is to produce distinctive and unique pastries and bread. They mainly serve downtown office workers and residents. There are always customers lining up waiting to get inside. As one of Fol Epi's regular customers, I've noticed that I'm always in line and often I have to witness my favourite item go out of stock. This sparked the assumption - many customers line up to get into the bakery. However, not everyone can purchase the items they want.
GOAL
My goal for this project was to redesign the current platform allowing customers to effortlessly find the products they want without waiting in line and seeing their favourite items go out of stock. Not only does this saves time for current customers, but it will also provide more business opportunities for new customers to visit Fol Epi.
WHITE PAPER REASEARCH
Before diving into design, I wanted to look into the psychology and motivations behind ordering food online.
WHAT is happening - Quantitative data (Survey)
Through extensive research, I learned that:
-
55% of customers who visit bakeries at least twice a month wasn't able to purchase the item they want.
-
60% of customers who visit bakeries at least twice a month would prefers having the option of ordering online.
WHY it is happening - Qualitative data (User interviews)
I conducted 4 user interviews to help me understand better user's needs and define my goal for this project. During the user interviews, I had the opportunities to ask specific questions and at the same time learn from the users' perspectives to identify the pain points that they experience while using For Epi website.
Key Findings
-
Lack of essential product information on menu: during the users interviews, I found one of the challenges that users face is finding essential product information (inventory, photos, description) on menu.
-
Taking too much time to place an order: through observation, I found that Fol Epi doesn't have an online order feature.
Competitor Analysis & The Gap
Understanding the current situation, I performed research to identify any features that I can leverage from other bakery platforms to help me make informed design decisions. I choose three top-rated bakeries in Victoria: Très Gourmet Bakery, Crust Bakery, and Patisserie Daniel. I compared their website features, visual design, and user flow. I found that none of them had a live inventory feature and online ordering. This then became my potential opportunity for the solution.
User Journey
Based on the research and competitor analysis, I created the user journey to help me better identify problems and pain points. The user journey reflects what the users are thinking and feeling while using the website. This helps me to identify potential opportunities to improve the user experience for the website.
Define
Pain Points
-
Challenge to see essential product information.
User Goals
-
I can easily find essential product information.
-
Can't place order online and have to wait inline every time.
-
I can order online and pick up in-store.
Information Architecture
Current Version:
This structure confuses the customers. When going into the "Bakery" category, the page is not organized, such as the photos doesn't match the product descriptions. Customers may likely leave the site and find it frustrating to use.
New Version:
I reorganized the navigation bar and implemented sub-categories that are relevant and familiar to users. This way users can navigate the website easily with familiar categories found on other bakery or restaurant websites.
How I got there ...
Goal #1
I can easily find essential product information on bakery menu.
Challenge
HMW make browsing menu simple and effortless?
Metrics
- Task completion time
- Task successful rate
DESIGN DECISION #1
Navigation Bar : horizontal vs. left-vertical
-
Navigation bar helps customers to quickly locate the information they are looking on the website. I considered two design patterns: left-verticle and top bar.
-
Some eye-tracking studies has shown that attention leads left on websites. By placing the navigation on the left side makes it likely to be noticed and scanned by customers.
-
I believe vertical navigation bar offers room for growth as Fol Epi continually adds more product categories to their bakery. Additionally, vertical navigation translates naturally when customers are browsing on mobile.
Previous Navigation bar:
New Navigation bar:
DESIGN DECISION #2
Product page: live inventory feature
-
Implementing live stock inventory feature allows customers to know what is currently in-stock. During user interview, customers mentioned that they feel upset when the items they want are out of stock.
-
With this feature, users can easily identify if the item that they are looking are available to make the decision to visit the store or not without feeling disappointed. This feature helps to bridge the gap between the bakery and customer.
ITERATION #1:
Browse category and search for products
Choose category
Browse product information, inventory and reviews
ITERATION #2:
Browse category and search for products
Two clicks to browse product information with inventory
Browse product information and reviews
DESIGN DECISION #3
"Sort by" bar and Category
-
The categories are not separated on the current website. Customers have to scroll up and down to locate the items they are looking for.
-
I implemented different categories for customers to easily locate items.
-
The "sort by" bar allows customers to quickly sort the items based on the product name, cost, inventory, size, and ratings.
Main pain categories provide an overview of the bakery speciality, new products, and products for those who have restricted-diet.
The "Sort By" bar speeds up the search process and allows customers to locate the information that they are looking for.
Goal #2
I can quickly place order on the website.
Challenge
HMW make placing order at Fol Epi effective and accurate?
Metrics
- Task completion time
- Task successful rate
DESIGN DECISION #4
Give customer choices: Placing order as a guest or Sign up an account
-
When I performed the competitor analysis, I realized most competitors would ask customers to signup for an account before placing an order. I want to give customers the option to choose.
-
I wanted to put the users need first, so my design allows customers to place order as a guest. Giving the customers the choices for them to choose what work for them the best. This provides customers with a successful experience using the platform.
What I've learned
This was my first-ever UX case study! More than the outcome, I've learned so much from going through the entire UX process. Here are a few things that I've learned:
Rationale - knowing the "WHY" behind each design decision
Throughout this project, I learned that there should alway be a rationale behind each design decision. When I was designing the overall layout of the website, I looked at least 10 other local bakeries websites. By analyzing these websites, I noticed patterns. For example, many bakery websites asked customers to sign up for an account to see the menu and price. Through examining these websites, I learned why some designed worked while others didn't.
Iteration - repeat and evaluate as much as you can
Over the 8 weeks of my project, I've redefined my problem 2 times. I iterated 3 times making sure my design was meeting the needs of the my users. I want to design with intention where I can use my design to address user's goal.
Trade-off decisions - how and why
This project taught me that there is no right solution when designing a product. It really comes down to prioritize the goals that I'm trying to achieve to best meet the users' needs. An example of making trade-off decision is deciding when to introduce the sign up page. I decided to put the users' needs first because not everyone wants to sign up for an account.