#Check-out Flow #Redesign #Heuristic Evaluation #Card Sorting

Improve E-Commerce Website with Efficient Navigation

Bean Square

#Check-out Flow #Redesign #Heuristic Evaluation #Card Sorting

Improve E-Commerce Website with Efficient Navigation

Bean Square

Project Overview
Background
Bean Square is a local coffee shop that serves varieties of coffee beverages and food. The store itself is quite popular among the locals. My friends and I went there often to study during college. It was “the spot”. Like many coffee shops, Bean Square offers online ordering where customers can order ahead and pick up in the store. However, their website needed many improvements.
Challenge
Bean Square's online ordering service provides customers an easy and quick way to order. An effortless user-flow is crucial for any e-commerce platform.
I applied Heuristic Evaluation, the site met with many violations:
Match Between System and Real world, Visibility of System Status, Aesthetic and Minimalist Design, Help and Documentation, Flexibility and Efficiency of use, Consistency and Standard.

Especially the Menu page is missing product picture, pricing and details. Asides from that, the browsing and check-out process could create confusion. Because Online Ordering is separated from Menu page with a different page style.

Target users: Coffee drinkers with online shopping experience
Solution
I redesigned Bean Square’s website. Focusing on improving the site's navigation, checkout flow and diminishing the Heuristic Violations.
I re-arranged the navigational scheme such as re-organizing menu and adding feature where user can directly place order via the menu page instead going through other link.
I changed up the UI to make the content more visible, accessible and consistent.
The original checkout-flow required users to go through multiple pages. Therefore, I re-designed the checkout-page by limiting the pages and adding side-by-side purchase summary where user can always preview the purchase before submitting the order.
Project Plan
My Role
• Research: I conducted user interviews with potential users and synthesized the findings. From there, I narrowed down the user's goals, needs and frustrations. Meanwhile, I explored other coffee shop’s sites and other popular e-commerce sites as references.  
• Design: I created paper, lo-fi and hi-fi wireframes and prototypes in Sketch. I conducted usability testing and iterated the design in each stages prior moving on to the next phrase.
Scope
• Team: This was a solo project
• Tools: Sketch, Miro
• Team: This was a solo project
• Duration: 2 weeks
• Design practice: User Interview, Affinity Mapping, Journey Map, User-Flow, Persona Development, Competitive & Comparative Analysis, Heuristic Evaluation, Card Sorting, Tree Testing, Wire-framing, Prototyping, Usability Testing & Iteration  
Research & Synthesis
User Research
Objective
To gain insights of user’s needs, behaviors and frustrations with experiencing E-Commerce site and purchasing coffee products.
Method
User interview in-person. The participant must be a coffee drinker and had online shopping experience.
Findings
• Users prefer to use digital wallet mainly Apple Pay and Google Pay.
• Users relied on recommendations to make a purchase. They needed detailed product information.
• Users were very aware with the price when they entered an E-Commerce site.
"I'm concerned with security issue of my credit card information"
"I don't trust picture anymore. I need reviews."
"I have problem finding the right price tags for beans."
"I would enjoy cannabis at the right social setting."
User quotes from the interview
User's Needs, Goals Behaviors and Frustrations
"I can't function without coffee! "
- Annie, Media Editor
Behaviors
• Gets caffeinated at work
• Has a busy schedule
• Often tired from the lack of sleep
Needs & Goals
• Online ordering option for quick pick-up
Frustrations
• Doesn't feel safe providing card info
• Not enough product information to help her making purchase
Problem Statement:
Annie needs an efficient way to find the coffee product that fits her expectation because she doesn't want to be late for work from spending too much time on the website.
Ideation & Iteration
Navigation Scheme
Card Sorting on the menu items. As I reconstructed the Menu page with a change of categories.
I later ran a Tree Testing to ensure a smooth navigation flow with the new information architecture. I conducted
I also combined Online Ordering with Menu page so the user can add items to the cart while browsing through the Menu. Instead having two pages separated.
Menu page structure. Items are re-categorized in response to Card Sorting results.
Sketches
I sketched out couple screens covered from homepage, menu to entire check-out flow. It was made in Procreate with iPad Pro.
Low Fidelity Wireframes
Sketches were transformed into low fidelity wireframes which is built with Sketch (software). The layout, structure and check-out flow was established in this stage.
High Fidelity Wireframes
To improve the checked out process, I added:
Current order review
More payment options
Checkbox to save personal information for next visit
I used the background picture (coffee beans) as an indicator, to inform user that they have reached the end of the page.
Usability Testing with High Fidelity Prototype
Goal:
1) To identify potential blockers users have while browsing items and completing the checkout process.
2) To ensure users know by clicking the logo, it will take them back to the homepage
Findings & Iteration:
• No visible error was found.
• The users were able to associate the logo link with Homepage. I was a little concerned since I decided to take out "Home" from navigation bar
High Fidelity Prototype
Back to Top ^