.jpg)
Home Bakery Web & App
About
This project is for my small home bakery business, Solo Baker, as I am considering opening up my own website.
​
Tools Used
Illustrator, Photoshop, InVision
​
Background
I have been running a small home baking business since the pandemic started and have been taking orders via WhatsApp but realise that I might need a website to keep up with the increasing orders.
1. OVERVIEW
TARGET USERS
My customers are within the age of 20-40 years olds.
They are active working adults who love home baked confectionaries.
But they do not know how to bake or have time to bake.
So they are interested in genuine home recipe biscuits like mine.
TASK & USER FLOW
The task flow is simple, user will navigate their way through the web or app searching for "Chocolate Chip".
After which they will purchase and make online payment.
2. BRANDING
My home bakery is called, Solo Baker, as I am running it alone.
The first step in creating my own brand is designing a logo.
​
I chose this shape and colours because it represents my first product,
Chocolate Chips, which is also my best-selling biscuit.
LOGO
STYLES
I would like to make something clean and readable, so I use Avenir Next family fonts.
​
As for colours, they will be based on the same colour style as the logo.
3. WEB DESIGN
LOW FIDELITY
PRODUCT
PAYMENT
CART
CONFIRMATION
HOME
HIGH FIDELITY
PRODUCT
PAYMENT
CART
CONFIRMATION
HOME
SOLO BAKER WEB
Your task is to purchase "Chocolate Chip".
*You do not have to key in your details.
4. APP DESIGN
LOW FIDELITY
HOME
CONTACT
PRODUCT
CART
PAYMENT
CONFIRMATION
HIGH FIDELITY
HOME
CONTACT
PRODUCT
CART
PAYMENT
CONFIRMATION
The home page in app version will be split into two: the home page and the contact page.
The home page will only show one product at a time, user can swipe left or right to see others.
​
There is a product number shown for user to know how many products there are to swipe through.
User can also use the search function on top for convenience.
​
For the product, cart and payment pages, the right portion details are brought down.
So user can view them at one page without having to scroll or swipe right.
SOLO BAKER APP
Your task is to purchase "Chocolate Chip".
*You do not have to key in your details.
5. ITERATIONS
WEB HOME MENU
BEFORE
AFTER
Initially, there is an "Add to Cart" option on the home page.
The idea is to make it convenient for user so they can select what they see on the home page itself.
​
But there are two problems.
​
1) User can only see the product details on the cart page. This is not a problem for one product but what if user is purchasing several products? They will be overwhelmed with information about the product details and cost details being listed on the same page which makes their experience a frustrating one.
​
2) Visual wise, it will not be a pleasant sight to see the home page cluttered with so many CTA buttons for every product.
Initially, there is no product number. So the user will have no idea how many products there are and how many more products he or she need to swipe before reaching the end.
​
Now, not only will the user knows how many products there are but also know where they are at, as they might have forgotten if they had seen the previous product already or not.
APP HOME MENU
BEFORE
AFTER
SELF-REFLECTION
This is an interesting UX/UI Case Study as unlike the others which I design for others, this is the first time that I am designing something for myself and for my own use.
​
In the beginning, I only wanted to design for a desktop and tablet use but I was curious to know what it will look like on a phone, be it through an internet browser or app.
​
​
​
​
​
​
​
​