Light Pink
#FAE5EA
Bakery Redesign Portfolio Project
This project is a redesign I made of an existing e-commerce website with adjustments and tweaks to improve UX, accessibility, responsiveness, and performance.
Below, I made a breakdown and comparison of the changes I made and how they could help improve the existing website.
Disclaimer: This case study is for educational purposes only and belongs only to the author. The contents in this document may not be sold, shared or published by anyone but the author or without the written authorization of the author.
Branding & Style
The main issue with the color palette and even the logo itself was the accessibility, since the color contrast was quite low.
So I optimized these aspects with accessibility and brand consistency in mind:
Original logo
Optimized logo
Original Color Palette
Pink
#F6CAD7
Light Green
#DBEEED
Medium Green
#92CCCA
Redesigned Color Palette
Light Pink
#F5DCE3
Pink
#D43567
Light Green
#C6E2E2
Dark Green
#117972
Landing Page
As you will see in the comparison below, I featured more invitations for the user to browse through the different categories the shop has to offer, and multiple opportunities to capture leads (such as the newsletter subscription section).
When it comes to the product images, I used AI to generate most of them.
Original Landing Page
Structure of the original landing page:
- Header (logo and navbar)
- Hero image
- CTA
- Featured products
- About Us section
- Instagram profile embedded
- Contact form
- Footer
Redesigned Landing Page
Structure of the redesigned landing page:
- Header (logo, navbar, and top bar)
- Hero image with CTA
- Category list with CTAs
- Newest products
- Promotion boxes
- Featured products
- Another promotion section with a CTA
- Information about their two brick & mortar stores
- Newsletter subscription CTA for leads
- Both Instagram profiles embedded
- Footer (including the T&C and the Privacy Policy, besides the button to take back an order, as required by local laws)
I moved some elements (such as the About Us section and the contact form) to other pages.
Shop Listings Page
Original Shop Listings Page
Redesigned Shop Listings Page
Observations regarding the changes in the shop listings page:
- Boxed each product so they're not confusing for users (especially on lower resolutions, since it might be unclear to which products the buttons might belong without the limits being drawn)
- Added "Buy" and "Add to cart" CTA buttons to each product
- The products are organized in a JSON file
Additionally, more shop listing pages can be viewed in the following links:
Product Page
Original Product Page
Redesigned Product Page
Observations regarding the changes in the product page design:
- Added breadcrumbs at the top to make the navigation easier for users
- Moved the notice at the top to the bottom, to give priority to the product itself and the CTA
- Added the product ingredients to the product description, since they can be helpful and provide value to users that might be interested in them
- Integrated the details about the two different sizes to the dropdown menu itself
- Added a box for the user to leave a comment, in case they might need the product to have (or not have) a specific detail
- Added a "Buy" primary CTA button and moved the "Add to cart" button as a secondary CTA
- Added a small section with recommended related products so the user can keep browsing
Stores Page
Original Stores Page
Redesigned Stores Page
Observations regarding the changes in the brick & mortar stores page redesign:
- Added the newsletter subscription section for acquiring leads
- Took the opportunity to embed both Instagram profiles belonging to the brand, since this might also be a quick way for users to get in touch
Deliveries Page
Original Deliveries Page
Redesigned Deliveries Page
Observations regarding the changes in the deliveries page redesign:
- While this page could be considered a FAQ section, it's strictly about their deliveries
- The information has been reorganized to improve the UX and the availability of the contact info
About Us Page
Original About Us Page
Redesigned About Us Page
Observations regarding the changes in the About Us page redesign:
- Some of the contents removed from the original landing page have been placed here where they seemed more appropriate
- The story being told of the brand remains the same, but the presentation has been redesigned to make it more appealing to the user
Contact Us Page
Original Contact Us Page
Redesigned Contact Us Page
Observations regarding the changes in the Contact Us page redesign:
- Besides the contact form, I also added direct links to the brand's Instagram profiles and Whatsapp messaging
- Added the FAQ section since it might also be relevant to users seeking to contact the brand
Do you have something in mind for us to work together?
You can find me on LinkedIn or you can also contact me directly through the form!