top of page

Portfolio

Web Design

MacBook Pro Mockup (5).png
Square Sign Mockup (1).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
 
 

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.

pexels-photo-1181519_edited.jpg

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

Screenshot 2024-02-18 at 5.03.26 PM.png

Old logo

Screenshot 2024-02-18 at 5.10.11 PM.png
Flying Mailer Box Mockup.png

New logo

Kraft Paper Bag Mockup.png
Branding (6).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

Untitled (3).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. 

Screenshot 2024-02-19 at 9.57.37 PM.png

Low- Fidelity Wireframes 

High- Fidelity Wireframes (desktop) 

Screenshot 2024-02-19 at 10.16.17 PM.png
Screenshot 2024-02-19 at 10.16.46 PM.png

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) 

Screenshot 2024-02-20 at 9.09.52 PM.png

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.

Atoms, molecules, and organisms.png

Web Ads 

Half-page ad
Half-page ad (3).jpg
Square
Square (2).jpg
Leaderboard
Leaderboard (2).jpg

Email(desktop and mobile version) 

Desktop (2).jpg
X - 1.jpg
bottom of page