.png)
Doan's Bakery
I recently worked on a project to redesign the website for Doan's Bakery. Although the store had a good rating, the website was not visually appealing and lacked user-friendliness. I aimed to enhance the website so customers could easily purchase their favorite cakes online, especially those too busy to visit the store. Additionally, I aimed to attract new customers to the business.
Role: UX/UI Designer
Tools: Figma, Adobe Illustrator
Timeline: 6 weeks
.png)
Let's go through the whole process.
To start the redesign project for Doan's Bakery Store's website, I began by researching their customers. This helped me gain a better understanding of their needs and pain points when it comes to ordering from the Doan's Bakery website. With this information, I was able to develop a website that is more meaningful and user-friendly for the customers.
Personas
Rosa
23 years old, Student
Rosa is a busy senior student who loves Doan's Bakery. If the bakery had a website, she could easily order her favorite pastries with a few clicks on her phone or laptop. This would make it much easier for her to shop from the bakery.
Pains:
-
​The current website is not organized.
-
There is no online ordering option on the website.
​​
Goals:
-
Find the item that she is looking to buy in no time.
-
the website offers online ordering, so she doesn't need to go to the store.
Sera
38 years old, Working mom
Sera wants to order a birthday cake from Doan’s bakery for her kid's party, but the bakery doesn't have a professional website with pictures of their cakes. This means she has to physically go to the store to check what items they offer and place an order.
Pains:
-
She may have limited availability to make it to the shop.
-
The website doesn’t cover her needs.
Goals:
-
Order a lovely cake for her kid's birthday.
-
She can place an order at any time on the store's website.
That's great! Understanding the expectations of Doan's Bakery's customers is crucial. Now is the perfect time to rebrand the website to attract and retain customers.
To best represent Doan's Bakery, I suggest designing a stunning logo that catches customers' attention. Additionally, creating a memorable color palette for the store can help create a signature look that customers can easily recognize.
Logo Design
Old logo
New logo
.png)
Branding
A user-friendly site map is crucial for a good website experience. I tried revamping Doan's Bakery's website format to make it more user-friendly for their customers. A clear site map can help visitors find what they need quickly and easily.
Site Map
.png)
Once I have a clear understanding of the website's structure and hierarchy through the site map, the next step is to start sketching the actual pages. This involves creating rough wireframes or mockups of each page to get an idea of the layout, content, and overall design.
Low- Fidelity Wireframes
High- Fidelity Wireframes (desktop)
Following the same steps for desktop and mobile project versions is a great idea. Sketching the wireframes is an excellent way to get a clear understanding of the layout and structure of the design. Converting them to low-fidelity wireframes and high-fidelity at the end is a solid process to ensure a smooth design process.
Hi- Fidelity Wireframes (mobile)
Atoms Molecules and Organisms
Atoms are the building blocks of a UI interface, molecules are simple UI components made up of atoms, and organisms are complex UI components that form discrete sections. Understanding these components in UI design helps create a visually appealing and highly functional interface.
Web Ads
Half-page ad
.jpg)
Square
.jpg)
Leaderboard
.jpg)
Email(desktop and mobile version)
.jpg)
