Project 2

 

🍰 Magnoliabakery website redesign

Introduction

In this website redesign exercise, I used Magnoliabakery's brand identity as a starting point to rebuild the four main pages: Home, About Us, Product, and Contact Us.

My core objective was to:

Make the website look softer, more consistent, and more in line with the dessert brand's characteristics, while also making the information structure clearer and easier to read.

I redesigned everything from typography and color scheme to navigation structure and content visuals, ensuring the entire website presents consistency and professionalism in terms of user experience (UX) and interface design (UI). The following will document my design process, visual choices, and the rationale behind them, page by page.

Original website link: https://www.magnoliabakery.com/

PROJECT 1: Website Redesign Proposal

Website Redesign Proposal-DONGNUOYAN，作者 tian dong

Home page

I've implemented an automatic photo carousel on the homepage, allowing the photos to play automatically.

Step 1: Create three banners and place the three images you want to slideshow in each one horizontally.

Step 2: Select all three banners and create frames, adjusting each frame to the same banner size.

Step 3: Duplicate the banners three times and place them vertically, holding down Shift to adjust their positions. Leave the first row unchanged. In the second row, align the second image vertically with the first image. In the third row, align the third image vertically with the second image in the second row and the first image in the first row (the frames should all be in the same column). A demo image is attached below.

Step 4: Select the frames and choose "Crop" in the design menu on the right. Then set these three frames as variant components.

Step 5: Switch to "Prototype" in the right sidebar and connect the first image to the second, the second to the third, and the third to the first. Select "Delayed Trigger" and set the time.

Step 6: Add the components to your webpage to achieve automatic slideshow functionality.

Establishing a First Brand Impression Through Visual Theme

As the website's entry point, the Home page focuses not only on aesthetics but also on conveying the brand's core image to visitors. On this page, I made the following key design decisions:

1. A unified color scheme for the brand.

I used these colors on the homepage

Pink gives a soft, sweet, and friendly impression, which perfectly matches the warmth of a dessert brand.

2. Clear and concise top navigation

The navigation bar includes

• Home

• Product

• About Us

• Contact Us

And it includes commonly used icons for language/user/cart, making the overall structure more complete and giving it the feel of a formal website.

3. The main visual banner enhances brand appeal.

I chose high-quality dessert photos as a large banner to attract users' attention to the product at first glance; at the same time, I used a pink filter and rounded corners to create a soft atmosphere.

4. Clear Information Division and Comfortable Reading Pace

The home page uses a simple grid layout, making the page visually light and uncluttered and guiding users to browse downwards.

Overall, the Home page is like a "warm dessert shop entrance," gradually drawing users into the brand.

Product page

Clearly Categorized and Consistently Designed Product Showcase Page

As one of the pages users spend the most time on, the Product page focuses on:

Quickly understanding categories, easily viewing products, and making efficient choices. Therefore, I designed it from three aspects: structure, alignment, and card-style visuals.

1. Clearly Defined Category Titles

Each category is distinguished by a bold title, allowing users to immediately understand the product categories at a glance.

In the page you uploaded, I have already established the structure for the following categories:

• Fresh Banana Pudding

• Brownies & Bars

• Cakes

• Cheesecakes

Categories are presented in a horizontal bar format, allowing users to quickly jump to the desired area.

2. Consistently Scaled Product Cards (Card UI)

Each card includes:

• High-resolution product image

• Product name (consistent format)

• BUY button

And is paired with a light pink background, rounded corners, and subtle shadows, creating a soft yet professional visual effect.

3. Grid System for Visual Consistency

I used a three-column grid layout:

• Strengthens the overall structure

• Avoids visual clutter

• Makes product browsing smoother

Seeing these cards neatly arranged gives the entire webpage a "comfortable sense of order in a dessert display area."

About Us Page

A Visual Space for Narrating the Brand Story

The focus of the About Us page isn't on complex visuals, but rather:

How to tell the brand story comfortably.

1. Ample White Space for Easier Reading

I've included plenty of white space in the layout, allowing the text to breathe and creating a gentle, quiet, and readable rhythm throughout the page.

2. Consistent Visual Style in Text Presentation

The headings use a serif font to highlight Magnolia's classic American style; the body text uses an easy-to-read sans-serif font for a smoother reading experience.

3. A Light Pink Background to Embrace the Story

To align with the Home page, I've used a light pink as the visual base and added a blurred product image as the background, giving the page a more emotional feel without overshadowing the main content.

4. Clear Content Structure

The page includes:

• ABOUT US (Title)

• Brand Birthplace (New York)

• Signature Dessert (Banana Pudding)

• Dessert Culture and Brand Spirit

The overall presentation is gentle and warm, like a small brochure introducing a dessert brand.

Contact Us Page

Ensuring Users Quickly Find All Necessary Information

The Contact Us page focuses on functionality and clarity.

Therefore, I deliberately avoided overly decorative visuals, opting instead for an intuitive design.

1. Block-Based Arrangement of Contact Information

Organized as follows:

• Contact Information

• Email

• Store Address

• Phone Number

• Business Hours

This allows users to quickly find the information they need without having to read too many paragraphs.

2. Google Map + Store Photo Enhances Trust

A Google Map is embedded on the right, while a photo of the Bleecker Street store in New York is displayed on the left. The combination makes the page more authentic and assures users that "this is a physical brand."

3. Consistent Form Visuals with the Website

Input boxes use light pink borders and rounded corners, matching the style of the product cards and maintaining overall website consistency.

Demo video

This Magnolia Bakery website redesign exercise gave me a renewed understanding of the UI/UX relationship: Visual appeal is important, but clear structure is even more crucial; color coordination is essential, but logical information flow is paramount.

The entire website utilizes a unified color scheme, card-style layout, and ample white space, making it look:

• More professional

• More brand-oriented

• More approachable

• Easier to read

• More in line with the characteristics of a dessert brand

From the visual appeal of the homepage to the narrative of About Us, the structured presentation of Products, and the practical functionality of Contact Us, this exercise provided me with a complete experience in planning a small website and further familiarized me with Figma's capabilities in web design.

✏️ My questions and feedback to my teacher regarding the Figma website redesign assignment:

The instructor provided many specific and important suggestions regarding my redesigned Figma website. First, most pages exhibited inconsistent spacing and unbalanced layout: some sections had too much white space, while others were too crowded, resulting in an overall visually unstable appearance. The instructor also pointed out inconsistencies in button placement; for example, some "Buy" buttons appeared to float while others were positioned too close to the edge, lacking design logic and visual hierarchy.

Second, the instructor felt my corner radius was too large, causing components to look inconsistent and unprofessional. I need to standardize the corner radius of all cards, buttons, and images to maintain consistency. The text and images on the product pages were misaligned, and the overall layout did not adhere to Bootstrap's 12-column system, resulting in a visually cluttered appearance. It needs to be re-laid out according to a grid.

Regarding color, the instructor mentioned that my colors were too vibrant and saturated, suggesting reducing brightness to create a simpler, more comfortable, and professional overall style. The card design was also criticized for being unappealing and ordinary, failing to meet the visual quality expected of e-commerce products. I need to refer to more excellent examples and redesign the card style to be simpler, cleaner, and more layered. In the "About Us" section, the content lacked a hierarchical heading system, resulting in an unclear visual focus and making the page appear weak. The form section was directly criticized by the teacher as "too cluttered and unprofessional," with suggestions to use a simple line structure, reduce colors, and adjust alignment to make the form clean, clear, and easy to read.

Finally, the teacher reminded me that the final version needed to include a shopping page, improve text size, adjust spacing, and consider adding a language switching option. Furthermore, he emphasized that the entire website should maintain a consistent style, uniform layout, and reasonable white space to present a more professional web design.

Improvement process

In this Figma web design project, I initially thought my work already had a fixed style and clear structure. However, when the instructor analyzed my design issues point by point in class, I realized that visual design is not simply about stacking colors and components, but a system supported by information hierarchy, white space, rhythm, typography, and logical structure.

The instructor's feedback was very clear, for example:

• Background color too bright

• Too many visual elements, not concise enough

• Inconsistent product cards, inconsistent sizes

• Unclear typographic hierarchy

• Inconsistent button styles

• Disorganized image proportions

• Incomplete shopping process (missing "Add to cart"/"Cart" page)

Each of these was a crucial problem I hadn't noticed in my previous designs.

This feedback made me realize: I needed to pause, not immediately modify. I needed to rethink, not continue stacking visuals.

After reflection, I began the first phase of the redesign—brainstorming and sketching.

✔ (1) Redefining the overall visual style of the website

I asked myself:

"What colors best represent Magnolia Bakery's brand image?"

"How can the visuals be made simpler, more professional, and more visually appealing?"

I abandoned the old bright pink theme and replaced it with a gentler light beige paired with dark reddish-brown buttons, making the entire site look softer, more natural, and less glaring, while echoing the brand's warm tone.

✔ (2) Restructuring the structure with numerous sketches

I repeatedly drew sketches for the homepage, product pages, shopping cart and Contact pages.

Home page

Product page

Shopping cart

Contact us page

Each sketch addressed the issues raised by the teacher:

• Unified card structure

• Unified layout format

• Clear information hierarchy

• Controlled white space

• Simplified colors

• Established a clear workflow (from product → add to cart → checkout)

Sketches made it easier for me to see the structure, rather than being influenced by color.

✔(3) Transform teacher feedback into specific design principles

Next to the sketch, I wrote down key reminders:

• The background must be simple

• The colors cannot be too bright

• All cards must be consistent

• The image proportions must be consistent

• Buttons should be uniform in size and color

• The categories should be clear and the layout should be clear

• The shopping process page must be completed

This gave me a clear direction and judgment criteria when redesigning.

Home page

BEFORE

AFTER

The homepage is the first impression of the entire website, so the changes are the most obvious and comprehensive.

✔ Significantly reduced color saturation for a gentler theme

My teacher said my original colors were too bright and visually overwhelming, so I chose light beige as the new main background color.

It's soft, not glaring, and matches the dessert brand perfectly, making the overall look more professional.

✔ Banner redesign: cleaner and easier to read

New Banner:

• Product photos are the main visual element

• A light pink transparent layer was added to the left side to make the title and buttons more eye-catching.

• The buttons are changed to a deep reddish-brown, which is more stable, has a strong contrast, but is not glaring

• The white space has been readjusted to give the entire area a better sense of breathing room

Visually quieter and easier to read than the old version.

✔ Rebuild Homepage Layout Rhythm (Spacing + Hierarchy)

In response to the teacher's criticism of spacing, I standardized:

• Section top and bottom spacing

• White space between titles and images

• Font line spacing

• Content area alignment

The overall rhythm is more regular than the old version and is more suitable for a real brand website.

✔ Simplify Products Preview into an "Entrance Block"

The old version had too many and too crowded product previews, so I changed it to:

• Four product images of uniform size

• Clear categorization

• "View More" guides to the product page

The homepage is no longer a stack of products, but an "entrance page".

✔ The Delivery Block is More Neat and Professional

The new version uses:

• Three large images per line

• Simple titles

• Less text

• More balanced layout of images and text

The overall layout is clean, smooth, and has a sense of breathing room.

I've also added some interactive design elements; you can watch the demo video.

I focused on the complete shopping journey: "Product browsing → Product selection → Add to cart → View cart". My teacher provided extensive advice on structure, layout, systematization, and user flow, so I used this as a foundation to break down the page, reconstruct the process, and finalize the visual and interface design in Figma.

My design process will be presented in three parts below.

① Product Page — Product Page Redesign

BEFORE

AFTER

Goals: Unify visual rules, establish a clear category structure, and create a professional product display

In the initial product page design, the instructor specifically pointed out several key issues:

• Inconsistent product card proportions

• Inconsistent image sizes

• Inconsistent layout of names, descriptions, and prices

• Inconsistent button styles

• Unclear categorization and unclear information hierarchy

• Disorganized page rhythm and lack of visual order

To address these issues, I rebuilt the entire page content starting from the basic structure.

🔸 Rebuild a Unified Product Card Template

In the new version, I've established unified rules for all product cards:

• Fixed-ratio product images

• Consistent font weight for product names

• Concise descriptive text (uniform font size and letter spacing)

• Clear price layout

• The "Add to cart" button is now a uniform light pink button with rounded corners and the same size.

This approach makes the entire page look cleaner, more organized, and more professional.

🔸More Intuitive Category Navigation Tabs

I've organized the category bars (Fresh Banana Pudding / Brownies & Bars / Cakes…) as follows:

• Centered layout

• Selected categories have clear underlines

• Consistent font and spacing

This allows users to quickly understand product categories and easily switch between them.

🔸Simplified Visuals, Clearer White Space

The instructor mentioned that the previous color scheme was too vibrant, so I adopted softer, lighter tones and kept the background clean, allowing the product images to become the visual focus.

The entire product page thus became lighter, more airy, and less visually stimulating.

② Product Details Page — Product Details Page Design

Objective: To incorporate essential features of a real e-commerce website, enabling users to complete product selection.

The most important feedback from the instructor was that "you didn't have specification selection or quantity adjustment, and the add-to-cart logic was incomplete." Therefore, I added a complete product interaction structure to the new version.

🔸 Large-Size Product Visuals

High-resolution product images are used on the left, with smaller thumbnails below for easy switching. The overall layout is clean and highly readable.

🔸 Complete Purchase Area

The right side presents the most essential purchase information, including:

• Product Name

• Price

• Local Pick-Up Instructions

• Size Selection (Small / Medium / Large)

• Quantity Adjustment Buttons (+ / -)

• Add to Cart (uniform light pink button)

The entire interface allows users to complete product selection step-by-step, making it very intuitive.

🔸 Ingredients & Allergens Information Area

To make the page look more complete, I used a collapsed information display:

• Ingredients

• Allergens

This adds professionalism while preventing the page from appearing too cluttered.

🔸Recommended Products Section "You May Also Like"

Recommended products added to the bottom:

• Four unified cards

This enhances user browsing flow and improves page richness.

③ Shopping Cart Page — Shopping Cart Page Design

Goal: To create a complete shopping experience where quantities can be adjusted, amounts can be viewed, and users can return to continue shopping

To make the entire shopping process truly "closed loop," I added complete item information, quantities, and order amounts to the shopping cart page.

🔸 Clear Shopping Cart Structure

I've organized the shopping cart content into the most common and professional e-commerce format:

• Product Image

• Product Name

• Unit Price

• Quantity (Adjustable)

• Subtotal Total Price

The layout is neat and the columns are clear, making it easy for users to understand at a glance.

🔸Gift Voucher Area

Add a discount code input field below the product list to make the shopping cart more like the logic of a real shopping website.

🔸Order Summary Area

The right side is the summary amount area, including:

• Total Product Amount

• Estimated Shipping Cost

• Final Total Order Amount

A light-colored background is used for differentiation, clear but not eye-catching.

🔸 Back Buttons

• Users can also return to the product page with one click to continue shopping.

This creates a smooth connection between the three pages.

Demo video

About Us Page

BEFORE

Objective: Strengthen narrative structure, enhance brand awareness, and reduce clutter.

The most important feedback from the teacher was:

"Your About Us section has too many background color blocks, unclear content hierarchy, and inconsistent image sizes. It needs to be simpler and more professional."

Therefore, in this redesign, I improved it in three directions:

AFTER

🔸 Break down the content into paragraphs to establish a clear narrative structure

I divided the entire page into four main sections:

• Brand Story (Founded in 1996…)

• First Opening

• Our Menu

• Join Our Team

Each paragraph is paired with an image of uniform proportions to create a more natural page flow.

🔸Images and text side-by-side for a cleaner structure

To achieve a more professional layout, the following layout was adopted:

• Image on the left, text on the right

• Next paragraph: Image on the right, text on the left

This staggered layout adds visual interest without making the page feel cluttered.

🔸Visual simplification: Reduced color blocks, retaining only a light background

The old background color was too vibrant; my teacher suggested reducing the saturation. Therefore, the new version uses:

• Light pink as a light background block

• Plump white space

• Dark headings + dark red buttons

A softer visual effect, consistent with the homepage and product pages.

Demo video

Contact Us Page

BEFORE

Objective: To allow users to quickly find contact information and location data.

The old Contact design was too sparse and lacked a systematic approach.

My teacher suggested:

"Too much information in the background, oversized icons, and unclear hierarchy; a more streamlined structure is needed."

Therefore, the new Contact Page adopts:

AFTER

🔸Large Top Image + Title: Clear Entry Point

The first thing you see on the page is:

A large image of the Magnolia Bakery storefront

The centrally located "Contact Us" title

This gives the page a more branded feel and a greater sense of space.

🔸Streamlined Contact Information into Three Sections

I've organized all contact information into three simple boxes:

• Phone

• Email

• Address

Each section uses a consistent light pink background, icons, and text layout for easy readability.

🔸Message Us Form: Users can fill in their information directly

To make the page feel more like a real baking website, I added a form section:

• Name

• E-mail

• Phone

• Message

• Send Button

The form structure is simple with ample white space, making it easy for users to fill out.

🔸Google Map Location Display Next to Address

• A map showing the store's location is added to the right, allowing users to immediately see its location.

This also enhances the overall realism and professionalism of the page.

Demo video

Figma document

Final demo video

Reflection

Deep Understanding of Design Direction

• The Necessity of Visual Style Adjustment: My instructor pointed out that my previous pink color scheme was too vibrant, resulting in a lack of clarity in the overall website hierarchy and a lack of product focus. After reflection, I realized that brand tone, visual atmosphere, and user experience must maintain consistency. After switching to a softer, simpler, and more neutral color scheme, the website finally presented a more professional baking brand feel, allowing product images to truly become the visual focus.

• The Value of Consistency: I previously relied too much on visual appeal, lacking overall standardization. Through this project, I realized that consistent fonts, button styles, card structures, and spacing systems make pages more stable and believable, and also ensure a smooth user experience when navigating between pages.

Systematic Improvement of User Experience Flow

• The Importance of a Complete Shopping Flow: My teacher reminded me that the homepage and product pages only had visuals, lacking a "functional flow." After reflection, I realized that a truly effective website must guide users through the complete path from browsing → selecting → adding to cart → viewing the cart. Furthermore, seamless transitions between these three steps improve the completeness of the interaction logic.

• Category Navigation and User Positioning: Categorizing products as "Fresh Banana Pudding / Brownies / Cakes / Cheesecakes" allows users to quickly find what they need while reducing search stress. This made me deeply understand the importance of Information Architecture (IA), not just visual presentation.

Self-Breakthrough in Content Hierarchy and Layout

• Control of Information Hierarchy: On the homepage, product pages, About Us, and other pages, I began to relearn the hierarchical relationship between titles, subheadings, and descriptive text. Through variations in bold, capitalization, font weight, and line spacing, I made the page content more readable and rhythmic.

• Mastery of Visual Guidance: I unified key buttons with a darker, more stable color scheme and reduced unnecessary decorations, ensuring users see action buttons like "Add to Cart," "View More," and "Send" immediately, improving operational efficiency.

Growth in Brand Consistency

• Unified Image Style: After re-examining the brand visuals, I ensured all product images used similar backgrounds and lighting, resulting in a cleaner, more realistic, and unified look that made the website appear more professional.

• Expressing the Brand Story: On the About Us page, I began to focus on "brand warmth." This redesign of content made the brand image more complete and also allowed me to truly understand for the first time that "content design" is just as important as "visual design."

Reflections on the Presentation of Functional Information

• Contact Information Needs Visualization: The Contact Us page uses an icon + address + phone number + email layout, making the information clearer and easier to read. This made me realize that combining text and images is far more efficient than pure text.

• Map Embedding Enhances Usability: Adding a map allows users to immediately locate the store, reducing the cognitive load. This was my first time truly practicing the UX principle of "reducing user thinking."

Personal Growth in the Design Process

• The Importance of Sketching and Brainstorming: Before starting my Figma design, I created numerous sketches, planning everything from layout structure and information ordering to button placement and image size. This taught me that sketching is the most important thought process in design, not just random drawing.

• Proactively Absorbing Feedback and Transforming it into Action: I recorded every issue pointed out by my instructor and then translated them into changes, such as:

• Colors too bright → Adjust the tone to unify

• Inconsistent cards → Rebuild card templates

• Content too cluttered → Establish visual hierarchy

• Lack of shopping logic → Complete the process. This iterative refinement gradually shifted me from "decorative design" to "systematic design."

Conclusion: The Real Transformation Brought About by This Project

Through the redesign of Magnolia Bakery's website, I realized that professional web design is not just about colors and images, but a complete visual system, information structure, user experience logic, brand narrative, and interactive flow design.

My biggest takeaway is:

True design is not about making a page look pretty, but about enabling users to achieve their goals without having to think.

This project has transformed me from a student who "only looked at visuals" into a designer who has begun to understand "systems and experience."