top of page
top-view-flour-wooden-surface.jpg

B2C E-COMMERCE APP

Design a mobile Breka Bakery & Cafe app, that allows users to easily order baking goods and coffee online so the brand can compete in the market, improve sales, and increase overall customer satisfaction.

Timeline: 4 Weeks   |   UX Design, UX Research, Prototyping, Testing & Iterations

Platform: IOS APP

Team: 2 UX Designer, 2 DevOps, 1 Project Director

Tools: Figma, Miro, Adobe Photoshop, UserTesting, Jira, Microsoft Office

Project Brief & Overview

This project is not affiliated with Breka Bakery & Cafe. The following work is a conceptual educational exercise to practice and refine UX skills. 

Vancouver people's beloved  bakery coffee shop exceeds expectation in their quality of food and service, and  the Breka 's e-commerce app should reflect those qualities. We want to help this popular local bakery improve their site usability and update their mobile presence while maintaining and expanding upon current branding. 

Brand Overview

Breka Bakery & Cafe is a local family business famous of German bakeries.

 

  • Breka considers products for vegan and gluten frees customers to achieve sustainability. 

  • The business focuses on ingredient acquisition and storage efficiency.

  • Only cafe that all locations open 24h
     

Research & Discovery

Prior to generating ideas, our initial step involves conducting comprehensive brand research. This process aims to uncover essential aspects of the business, identifying key features, potential strengths, and opportunities that must be integrated into our app design.

 

I began my research for this project with a quick secondary scan of market trends, which helped me contextualize Breka Bakery's situation. What I learned: 

Insight:
 

  • Narrow product line

  • lack of promotion

  • They are not up to date with technology

  • lack of interaction with the customers

Existing E-Commerce Platform Review

app review.JPG

Pain Points from Research:  (After analyzing feedback from various channels, including user comments for both online ordering and in-store shopping experience)
 

  • Some users have difficulties with existing app interface.

  • Some users are struggling with the online checking out process.

  • Some users are looking for the option to cancel the order within app.

  • Looking for an option to order the product for other people. 

  • Going to store and waiting for the order are time consuming.

  • Store location function is not available outside Vancouver. 

Goal

Design a bakery app that enables users to customized and edit their orders, offer catering services for special events, provides a convenient pick-up feature, displays comprehensive menu variations and prices, incorporates a live chat for real-time support, and implements a loyalty program to reward frequent purchases. 

Process

kisspng-computer-icons-research-clip-art-bacterial-5ade12ab785bd4.899192341524503211493.pn

User Research

Secondary Research / Interview / Survey / Analysis

defining.png

Define

User Flow

idea.png

Ideation

Paper Wireframe / Low Fidelity Prototype

noun-interactive-prototype-229087.png

Prototype

User Testing / Hi-Fidelity Prototype

testing.png

Test

2nd Round User Testing

Outcome

User Centric Efficiency

Seamlessly accomplish tasks with ease, ensuring a hassle free experience. Encourages repeat purchases by simplifying the user journey. 

Value to Business

Elevating customer loyalty and retention, fostering a robust brand image. 
Expectations: Increase monthly sales by 10% by the end of June within 4 month.

User Research

I conducted interviews and did primary research. The research mainly targeted to the group of 18-40 years, who have daytime jobs and can't afford to waste time waiting in line at bakery stores.

I developed a list of questions and an interview guide to structure my contextual inquiry. I struck up conversation with people and persuaded them to talk to me for  few minutes about their experiences with The Breka Bakery & Cafe, other local bakeries in town, and bakery special orders.

Pain Point

Financial

  • High delivery cost

Support

  • Hard to find customer support

  • Late response 

  • Complicated contact process

Process

  • Lack of customization options

  • Discomfort of text heavy apps 

  • Can’t schedule time before checking out

  • Can’t track the order, Delivery delay​

Product

  • No reviews available

  • The actual product is not matching the online picture

  • No food ingredients and calories displayed

  • Can’t see the food availability

Proto Persona

Desktop - 13.png

Leah is 40 years old, a doctor with busy working schedule everyday who needs to easily place the order through app and get the delivery on time, or make the payment on app and pick up the order in store, because she wants to make a daily order at any time she needs.

Goal

  • Be able to order her food on the way to work quickly and seamlessly.

  • Health conscious, mindful of what she eats, looks at ingredients in her food & where it’s sourced

  • Sufficient time to choose tasty baked goods.

Frustrations

  • Not all apps are optimized for screen reader usage.

  • Not being able to know the freshness of the baked goods.

  • Sometimes her favorite items are sold out when she comes to the bakery.

Case Study20.png

Zareen is 22 years old, and is about to complete a B.A. in Business Administration and hopes an internship will launch her career in project management. Zareen likes to order tasty and fresh bakery and coffee for the office. She also likes to keep exploring new bakeries during her free time.

Goal

  • Sufficient time to choose baked goods on app.

  • More accurate food delivery tracking to reduce the wait time. 

  • Simple to discover tasty bakery and share it with colleagues.

Frustrations

  • Waiting in a long line for a long time.

  • Daily special or some new products are being excluded on app for profit.

  • No key ingredients information for each type of bakery.

User Journey

Created a visual map that depicts emotional ups and downs our user experience while completing their mobile ordering process.

Competitive Analysis

I conducted direct and indirect competitors that also provide a platform for online ordering of baked goods. Competitive audit helped me understand how users interact with the product and let me discover features that I can add to my app to make it to be unique.

Insights

  • The app should be available in multiple languages.​

  • Ordering process should be easy.

  • Should be visually appealing.

  • Payment should be simple and effective. 

  • Reviews and detailed information for each product should be available.

User Flow

What we did was, after gathering the information from the card sort, user interviews, and competitor analysis, we created a new user flow with key flow pages. These fixes were solutions to some of the confusions our users were facing while trying to complete their task of purchasing a food from registering a new account to final payment step. 

Desktop - 15.png

Paper Wireframe

Taking the time to draft multiple screen iterations of the main user flow on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. The Favorite sections were highlighted and refined until the screens were narrowed down to a single user flow.

Desktop - 16.png

Digital Wireframe

User Flow Goal: Making a purchase & Tracking the order  (Key Pages displayed)

Frame 73.png

User Testing

To test my low fidelity prototype, I completed a moderated usability study with 5 participants, with guided questions and prompts for users.

The goal was also to identify pain points that the user experiences, so issues could be fixed. Two rounds of usability studies were conducted.

Desktop - 17.png

UI Guide

Hi-Fidelity Prototype

Desktop - 20.png

With the Breka Bakery app, users can easily order high-quality baked goods, including healthy options that can be customized to their liking. This is a great option for those who are short on time but still want to enjoy delicious, fresh-baked treats.

Takeaways

One of my main challenges is the lack of resources and time that I had during the design and development phase. With this challenge, I have to reiterate the designs in order to be achievable within time and technical constraints, while still providing an overall and functional product to potential users. 

​

There are still improvements that can be made and the product needs to be tested on the real market with real users. At this stage of the process, the focus was to complete the primary user flow. To complete the app, more sections need to be refined and tested to find out of the pain points have been effectively addressed.

Were I to continue to develop this project, my next steps would be to iterate on the last round of feedback from my usability study. Also, add more features to make the product accessible to all.  I would continue to iterate until I was satisfied with the user flow and and then package my files to send to a UX Engineer for development.

© 2021 by ZAM Design . All Rights Reserved. Legal/Privacy

bottom of page