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.

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

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.

• 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

• 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  

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.

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.

I sketched out couple screens covered from homepage, menu to entire check-out flow. It was made in Procreate with iPad Pro.

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.

To improve the checked out process, I added:

• Current order review

• More payment options

• Checkbox to save personal information for next visit