E-Commerce, Web Design, UX Research
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.
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.
I redesigned Bean Square’s website. Focusing on improving the site's navigation, checkout flow and diminishing the Heuristic Violations.
Target users: Coffee drinkers with online shopping experience
• 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.
• Team: This was a solo project
• Tools: Sketch, Miro
• 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
User Research: Conducted interviews, analyzed findings, persona & journey map
Sketches: brainstormed solutions & ideated lo-fi wire frame
Prototyping: designed & created mid-fi prototype
Usability Test: tested overall user flow, identified findings & problems for iteration
Team: 4 UX designer across 3 time zones worked in a remote setting
Duration: 2 weeks
Tools: Sketch, Figma, Miro, Zoom
To gain insights of user’s needs, behaviors and frustrations with experiencing E-Commerce site and purchasing coffee products.
User interview in-person. The participant must be a coffee drinker and had online shopping experience.
• 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
• Gets caffeinated at work
• Has a busy schedule
• Often tired from the lack of sleep
Needs & Goals
• Online ordering option for quick pick-up
• Doesn't feel safe providing card info
• Not enough product information to help her making purchase
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.
I conducted 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 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.
Lo - Fi Wireframes
While I was doing competitive analysis, I got the idea of having Cart (order overview) on the bottom from Starbucks's website.
I thought was a great idea to avoid different elements overlapping with each other in the interface.
And that accelerated into having navigation bar on the top, contents in the center and orders on the bottom.
Hi - Fi Wireframes
To improve the checked out process, I added:
• Current order review
• More payment options
• Checkbox to save personal information for next visit
I also simplified the process using one form instead having user going back and forth filling out different info.
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 Hi-fi Prototype
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