top of page
Image by Daniel K Cheung

iBrick

A third-party LEGO app that provides all users more freedom to create their own set.

BACKGROUND
Screen Shot 2021-07-17 at 14.54.57.png

SomeCrust Bakery is a local bakery at Claremont, CA that produces sandwiches, bread, salads, pastries, cakes, and more.

SomeCrust Bakery has been Claremont’s Bakery since 1916. The owners are committed to bringing the community of Claremont quality baked goods in a space that has become a local institution and a favorite meeting place.

INITIAL STATE - SOMECRUST.COM

The current website has a black-and-white based design with distorted low-quality images. 
 

The texts are hard to read because they are small and light. 

It also has too much unnecessary information taking lots of space. 

Most importantly, the menu is not standing out for quick and easy navigation.

USER INTERVIEWS

To understand who the primary customers are and their behaviors and needs, I randomly interviewed 5 customers who were shopping at the SomeCrust Bakery at the moment and asked the following questions:

Screener Questions

1. How long have you been living at Claremont?

2. Are you a college student?

Interview Questions

1. How often do you shop at the SomeCrust Bakery every week?

2. Do you often know what to order beforehand or do you seek recommendations?

3. Have you ever used the SomeCrust website before?
     a) If yes, what did you use it for?
     b) If no, what’s the reason?

4. What kinds of services do you need from the website?

5. Have you used similar websites before? If yes, what made you use their website?

PERSONA

Derived from the user interviews, two primary personas were created to estimate customers’ needs and goals

Screen Shot 2021-07-17 at 23.30.09.png

Primary user: college student Alex

​Alex is a 21 years old female student who has just moved to Claremont to start her academic career. She is fresh and curious about this small town and willing to explore around. Before she goes to a shop, she usually checks its opening hours online and browses the menu. She can be very adventurous on food and try whatever is on the recommendation.

Alex's needs and goals:

  • Seeks for seasonal products or recommendations.

  • Needs menus that have detailed information and appetizing pictures.

  • Checks the opening hours of the shop.

Secondary user: local resident Mary

Mary is a 50 years old female who lives in Claremont with her family since 2005. Mary likes to shop locally because it makes her feel everything is familiar and reachable. One of her favorite shops is the Some Crust Bakery located in Claremont Village. She often walks into the bakery, gets a cup of coffee and the same old sandwich she always orders, and maybe a few cookies for her kids.

Screen Shot 2021-07-17 at 23.38.06.png

Mary's needs and goals:

  • Customizes and orders cake online for special occasions.

  • Need to be able to order ahead to avoid waiting in line.

  • Checks the availability of products.

USE CASES

Among all the tasks, three cases were prioritized as the primary focuses of the website. In other words, users will be completing these tasks most of the time and with higher needs than the other tasks.

1.png
3.png

Place an online order

1. Go to the home page
2. Browse the webpage and select the products you want to purchase
3. Click on the plus icon to add them to the shopping cart
4. Click on the Shopping Cart icon
5. Browse and confirm the quantities and product names
6. Click on the Checkout button
7. Confirm the pickup time and address
8. Sign in to your account (optional)
9. Select a preferred payment type or choose an existing payment
10. Click on the Place an Order button to place an online order

Look up the ingredients

1. Go to the home page
2. Select a category or browse the webpage
3. Choose a product you’re interested in
4. Click on the product image to see more information
5. Scroll to the Ingredients section
6. Click on the common allergies or diet you have (optional)
7. Check if there’s an alert of food allergy (optional)

2.png

Redeem my rewards

1. Go to the home page
2. Click on My Account
3. Use phone number or email address to sign in
4. Click on Rewards, all available rewards will be shown
5. Choose the reward you want to use for this time
6. Let the server scan the reward code
7. Confirm the notification if the reward was successfully redeemed

SITEMAP
Screen Shot 2021-07-27 at 14.19.30.png
WIREFRAMES

To help to visualize the prototype, I then created wireframes for both desktop and mobile versions as they will be responsive on different platforms. 

Home

Shopping Cart

Shopping Cart.png

About Us

Categories

Category.png

Checkout

Rewards

Desktop ver: Wireframe Desktop

Mobile ver: Wireframe Mobile

Product Description

Product Description.png

Confirmation

User Profile

VISUAL DESIGN

LOGO

OLD LOGO

NEW LOGOS

COLOR

PALETTE

After building the wireframes, I started with redesigning the logo because the old one looks creepy and doesn’t remind customers about the bakery.

I decided to add more elements that are relevant to bread, wheat, and bakery to bring it a different look.

oldlogo copy.jpeg

Black-and-white

Doesn’t remind customers about bakery

The illustration is unclear

33bef0fdacca4c9bb36e7429f2d4e158.png
b768ff8ef37a4e42bf1361cce82bf17b.png

Traditional and classic

Reminds of the long history [est. 1916]

Adds a bakery-related icon

Emphasizes the handmade craft

Adds a bakery-related design

Adds a ingredient-related icon

Inspired by the bakery and coffee shop theme, I used dark brown and nude as my main color palette for the website.

#9B7A50

#FFE4C6

#FFF4E8

#FFFFFF

main color palatte

PROTOTYPE

Added with the visual design and color palette, the new prototype has brought the app with a fresher look and better presentation of the content.

Prototype: SomeCrust Mobile

more mockups.png
USABILITY TESTING

At the last stage of my first version prototype is the usability testing. 
To ensure the participants can complete the tasks and achieve their needs and goals successfully, I will need to understand how do they use my product and things I need to make changes on.

Screen Shot 2021-08-22 at 00.57.14.png

USERS' GOALS & ASSUMPTIONS

The first step is to clarify some assumptions I have toward my customers and their potential needs and goals that need to be completed at my site. 

ASSUMPTIONS

Users are interested in placing an online order at a bakery shop.

GOALS

1. Users will be able to tell from the home page that this site is for a bakery shop.
2. Users will be able to easily navigate the website.
3. Users will be able to easily place an online order at this site.
4. Users will be willing to shop at this website again in the future.

Screen Shot 2021-08-22 at 00.57.25.png

I then prepared some questions and scenarios for my usability testing on UserZoomGo.com and planned to recruit five participants for quick 30-min testing for my first prototype.
During the entire process, participants were encouraged to think out loud as a big part of the usability testing depends on their verbal feedback. The entire testing process was under their consent and recorded for future personal use.

SCREENER

QUESTIONS

1. When was the last time you went to a bakery shop?
    A: must be within two years

2. Have you ever placed an online order at any bakery shop?
    A: must be selected from always, often, or sometimes

ESTABLISHING QUESTIONS

1. What is your most preferred way of placing an order at a bakery shop?

2. Please recall the last time you placed an online order for a bakery shop, was the experience easy or hard?

Screen Shot 2021-08-22 at 00.57.36.png

TASK

SCENARIOS

1. Please explore around the home page and tell me what do you think this website is for.

2. You are in the mood of treating yourself with a Mixed Berry Puff today (hint: it’s one of the bakery foods). Before purchasing one, you’d like to check if it contains ingredients you do not eat. Please explore around and customize your order.

3. Too bad you’re on a budget today. Please only purchase the *Mixed Berry Puffs* in your shopping cart and leave a 15% tips at the checkout.

4. Please browse to confirm the information and select your preferred payment method (this is not an actual payment) to place an order.

5. Imagine you have received a reward code through a text message after placing the order. Please add it under your account so you can store the points for a free item.

Screen Shot 2021-08-22 at 00.57.42.png

FOLLOW-UP

QUESTIONS

1. Please rate the overall design of this website

2. Please rate the overall difficulty level of all tasks

3a. If you rated the process as hard, please specify which task was difficult for you and how can I make it better.
3b. If you rated the process as easy, please specify what makes it easy for you.

4. Is there any feedback you’d like to provide?

5. How likely do you think you’ll be using this website in your daily life?

TESTING RESULTS

Almost all of the five participants completed the questions and tasks within half an hour.
Among all five tasks, participants usually have the most difficult time in solving the last one regarding redeem the reward code. One of the reasons was the prototype wasn’t fully interactive, thus making it hard to imagine logging with the user information and redeem code under personal account. 

Task 1. Please explore around the home page and tell me what do you think this website is for.

Avg complete time: 3 mins 2 sec

Passing rate: 5/5

Difficulty level (1- easy, 5 - hard): 1

Task 2. You are in the mood of treating yourself with a Mixed Berry Puff today (hint: it’s one of the bakery foods). Before purchasing one, you’d like to check if it contains ingredients you do not eat. Please explore around and customize your order.

Avg complete time: 1 mins  58 sec

Passing rate: 5/5

Difficulty level (1- easy, 5 - hard): 1

Task 3. Too bad you’re on a budget today. Please only purchase the *Mixed Berry Puffs* in your shopping cart and leave a 15% tips at the checkout.

Avg complete time: 1 mins  33 sec

Passing rate: 5/5

Difficulty level (1- easy, 5 - hard): 1

Task 4. Please browse to confirm the information and select your preferred payment method (this is not an actual payment) to place an order.

Avg complete time: 0 mins  46 sec

Passing rate: 4/5

Difficulty level (1- easy, 5 - hard): 2

Task 5. Imagine you have received a reward code through a text message after placing the order. Please add it under your account so you can store the points for a free item.

Avg complete time: 1 mins  48 sec

Passing rate: 0/5

Difficulty level (1- easy, 5 - hard): 4

The usability testing has revealed some weaknesses of the prototype, such as adding the reward code is not as intuitive as users expect.

Another way to resolve this issue is to build a button at the confirmation page that allows users to directly add the reward code under their accounts.
Moreover, more flaws will be improved in the future version to avoid as much confusion and trouble for the users.

CLOSING THOUGHTS

Through redesigning the SomeCrust Bakery website, I’ve learned a lot about how to determine a shop's customers, needs and goals, and what needs to be served on a website so that the customers would feel comfortable and intuitive to navigate. The usability testing helped me to understand how users would use my website and inspired me to a lot of features and improvement I didn’t think of. This prototype will not be a finish. I will be constantly testing the prototype and updating it based on user feedback and needs.

bottom of page