Project 1

 

Project 1 – Website Redesign Proposal | Magnolia Bakery

Introduction

Project 1 was a full web redesign proposal exercise. The goal was to analyze and redesign an existing website. I chose Magnolia Bakery 🍰, a renowned New York dessert brand known for its warm, handmade cupcakes and banana pudding. I chose it because I've always loved their brand sensibility, with a slightly retro, sweet visual style. However, their official website didn't fully convey this warmth. So, I decided to rethink its design from both a user experience (UX) and visual design perspective.

Magnolia Bakery  LINK 🍰- https://www.magnoliabakery.com/

On the opening page, I briefly introduced Magnolia Bakery's background and brand vibe.

It's known for its warmth, retro charm, and sweetness, but the website didn't fully capture that feeling.

My stated goal was:

"The redesign will create a more unified and user-friendly website, while also better expressing the brand's handmade charm."

This page served as the starting point for the entire proposal. I wanted the professor to immediately understand why I chose this website and the problem I was trying to solve.

🕵️‍♀️ Early analysis: Finding the problem is the key to a clear direction

Before starting the redesign, I conducted a comprehensive analysis of the existing website as required by my teacher, including layout, color scheme, fonts, images, overall aesthetics, usability, responsiveness, etc.

✳️ Layout

The website's navigation is clear, but the homepage is too cluttered, with information piled up, insufficient white space, and a blurred visual hierarchy.

👉 I'd call it "visual noise"—the user is immediately overwhelmed by banners and images, making it difficult to tell where to look.

I've divided this section into two columns: "Strengths" and "Weaknesses":

• Strengths: The navigation is logically clear, the footer is well-organized, and the overall design is easy to understand.

• Weaknesses: The homepage is overcrowded, lacks white space, the visual hierarchy is confusing, and the alignment is inconsistent.

These findings made me realize that it's difficult for users to quickly focus on the content after entering the site. So, I plan to use a clearer block structure in the redesign to establish a stronger visual rhythm. 🎯

🎨 Color Scheme

The website uses a creamy beige, white, pink, and light green color scheme. While warm and consistent with the brand's vibe, the contrast is too low, making the buttons unclear and resulting in poor readability. 

🔤 Typography

Magnolia's font combination (Gatefold, Ambit, GT Alpina) is quite distinctive, but the visual hierarchy isn't clear enough. My idea was to retain that elegance while adjusting the level and weight of the headings to make them easier to read.

The font combination does have a sense of warmth, but the hierarchy is not prominent enough.

🖼️ Imagery

Their images are good quality but lack a strong narrative. I hope the redesign can showcase more of the emotions between people and desserts, like moments of gathering, sharing, and smiling, to give the brand a more "lifelike" feel.

🌈 Overall Aesthetics

I summarized the overall vibe of the website—warm, retro, and a bit dated.

It lacked a modern feel and visual consistency, with inconsistent button styles and irregular spacing.

So I wrote:

"The goal is to retain the brand's nostalgic vibe while enhancing modernity and visual consistency."

This became the aesthetic tone of my redesign, and it also became the direction of subsequent moodboard designs.

💻 UX Evaluation

I analyzed the problem from four perspectives:

1. Usability: Unclear CTA, excessive scrolling content;

2. Accessibility: Low contrast, missing alt text;

3. Responsiveness: Images distorted on mobile devices;

4. Navigation: The menu bar wasn't fixed, and important information was too deep.

This section was the most "UX-focused."

I began to look at the problem from a user's perspective, not a designer's. 

⚙️ Functionality

The website has all the basic functionality (ordering food and finding restaurants), but it lacks interactive feedback.

For example, there's no "Submit Successful" notification when clicking a form, making the browsing experience feel a bit cold.

I suggest adding subtle animations and hover effects during a redesign to make the user experience more responsive.

🎯 Redesign Goals

📍Objective

I've clearly outlined four goals here:

1. Modernize the UI

2. Simplify the User Journey

3. Strengthen Brand Identity

4. Improve Accessibility

This section represents the core direction I've identified from the previous analysis, and corresponds to the "Redesign Goals" section requested by the instructor. ✅

👩‍🍰 Target Audience

I categorized my audience into four groups:

• Local customers (who prefer to dine in or take out)

• Young families and dessert lovers

• Social media users (who enjoy taking photos and sharing their experiences)

• International tourists (who want to experience New York desserts)

These segments helped me prioritize the content for the redesign:

📸 Images needed to be photogenic;

📍 The menu and ordering process needed to be clear;

💬 The overall tone needed to be warm and welcoming.

🎨 Visual and Experience Design (Design Proposal)

🧩Wireframes & Moodboard

This is where I translate the previous analysis into design concepts.

• The wireframe shows the new structure (clear homepage + simplified navigation).

• The moodboard uses a palette of off-white, creamy yellow, and light brown to emphasize warmth.

• The font board shows the new font pairing for easier reading.

💡 These pages embody my visual decision-making process and are my favorite part because they transform "analysis" into "creativity."

🧠 UX Enhancements

On this page, I've listed five UX improvements:

1. Clearly organize content

2. Prioritize key information

3. Increase interactive feedback

4. Maintain visual consistency

5. Improve accessibility

This is a direct response to "user experience issues," allowing teachers to see my logical progression from problem to solution.

📱 Technical Considerations

I covered four key points:

• Mobile Optimization

• Image Compression

• Page Loading Speed

• Optimizing Button Tap Areas

This section may seem technical, but it's actually closely related to UX.

I've learned that "usability" isn't just about intuitive interfaces; it also encompasses the smoothness of the technical experience.

Finally, I listed all my reference websites, Pinterest boards, font sources, and design inspirations.This information showcases my exploration process during the research phase and provides evidence of how I translated real-world examples into my own design language.

Feedback from my teacher (week 6)

The teacher looked at my PPT and suggested that I change the layout of the mood board page. He suggested that I not pile up all the photos together and add some visual references. Regarding the secondary color, the background color can be just one, not so many. The text can have two colors out of four. In the web design, the font can be two, not so many.

Change process

Before

After

Before

After

Before

After

PROJECT 1 Document

Website Redesign Proposal-DONGNUOYAN，作者 tian dong

Reflection

While completing this website redesign proposal, I gradually shifted my focus from simply "looking good" to "how user-friendly it is."

At first, I thought a redesign would simply involve redesigning the layout and changing the colors, but after truly analyzing the Magnolia Bakery website, I realized that a good design is truly a balance between visuals, aesthetics, and user experience.

During the analysis phase, I systematically applied UX thinking for the first time: from information hierarchy, user flow, visual focus, to the mobile experience, I considered the user's next move. This process gave me a deeper understanding of the true meaning of "user-centricity."

I've found myself becoming increasingly meticulous in assessing website issues, such as: Is the font contrast adequate? Does the navigation help users find their way around quickly? These are small details that I used to overlook.

The design aspect made me rethink the expression of my brand personality. Magnolia Bakery's tone is warm, retro, and handcrafted, but the website looks a bit dated. I hope the new design retains the warmth of a dessert while incorporating a modern, refreshing feel. While creating the moodboard and wireframe, I constantly adjusted color scale, font pairings, and white space, striving to find the perfect balance between the brand and the times.

The technical considerations were also a new challenge for me. For the first time, I seriously considered concepts like "loading speed," "responsiveness," and "accessibility," and understood how they directly impact the user experience. I now understand that even if a website is visually perfect, if it loads slowly or is difficult to navigate on mobile, the experience will be significantly diminished.

Overall, this project has greatly enriched my UX design thinking.

I learned how to start with a problem, formulate reasonable design goals, and then address these goals through visuals and interactions. I also gained an appreciation for the logic of the design process—from research, analysis, proposal, to technical optimization, it's a complete system.

If I had another chance, I'd like to conduct more in-depth prototype testing, so that the redesign goes beyond the visual aspect and truly verifies its effectiveness. But for me now, this assignment has given me a clearer understanding of my design direction:

It's not just about creating a beautiful interface, but about creating a warm and engaging experience.