The Original Website:

The original website is functional and not displeasing to look at, but it doesn’t overall represent Sugar Mama’s brand.

The online ordering process — particularly the customization and the current use of annoying and confusing pop-ups — are pain points we wanted to address. We realized that being able to attach a photo when requesting a custom order would be a great added feature. Additionally, we wanted to simplify the navigation at the top of the page.

Survey & Analytics:

Our user survey exceeded our expectations. After two days of the survey link being on Sugar Mama’s Instagram bio (with their 19.3k followers on Instagram as our user base for testing), we received 415 survey responses. We really got to see the benefits of working closely with the stakeholder.

For instance, the bakeshop agreed to use the survey responses as entries to win a 4-pack of cupcakes from Sugar Mama's. As a result, we now have 415 emails from potential customers we can leverage for follow-up testing and feedback.

Because of our direct access to the stakeholder via my teammate, Dawn, we were able to gain access to some of the analytics for the original site. This allowed us to not just create a hypothetical redesign, but create something that Sugar Mama's Bakeshop wants to use as their new website. We've been working closely with the bakeshop to implement our designs and plan to use these metrics as our reference point once the new, redesigned site is live to track our results.

Survey & Data:

After a successful survey, we compiled the response data to form a picture of the customer base. One of the major takeaways was that over 50% of respondents said they were just browsing to satisfy a sweet tooth. This supported our goal of making the site easy to navigate for those who don’t know what they want right away.

Competitor Analysis:

In our competitor analysis, we identified two main direct competitors: Hey Cupcake! and Uppercrust Bakery and Cafe, both local small businesses in Austin, Texas, with the same niche market. Indirect competitors included grocery store bakeries, such as Whole Foods, but the main indirect competitor is the baked goods chain Nothing Bundt Cakes. 

The competitive analysis revealed some of Sugar Mama’s strengths in the market as well as some places of improvement.

SWOT Analysis:

Our SWOT analysis revealed that one of the bakeshop’s biggest weaknesses is the communication back and forth for custom orders. As a result, the customization flow became one of our main focuses for this project.

Heuristic Evaluation:

Icons were updated to make sure they are universally understood. Additionally, text and colors were updated and are consistent on every page, and it is now easier to identify where you are on the site.

User Persona:

When building our user persona, we took into account all of the research we accumulated to paint a better picture of who our user was. The majority of our customers are women. So, here we have Jennifer Martin, a mom local to the Austin, Texas, area. She wants a unique dessert that she can easily order online and have delivered to events.

Storyboard:

Jennifer’s son, Bryson, has a party coming up at the end of the soccer season, which is only three weeks away. As team mom, Jennifer starts to look for soccer ball cupcakes. She was reminded about Sugar Mama’s from another mom and remembered Olivia’s shop can bake gluten-free, organic cupcakes. She goes online and gets a quote from the new easy-to-use “Special Occasions” page by making a custom order. She simply uploaded an inspiration picture of soccer ball cupcakes with her team's colors and had a reply within a few hours.

Low-Fidelity Screenshots:

Here was our first round of low-fidelity wireframes. Creating our first draft helped us define the hierarchy of our website so we had a solid foundation to build upon.

Mid-Fidelity Testing & Iterations:

We then developed our mid-fidelity prototypes and did some user testing.

• Notable changes from our test results included:

  • Added search icon to primary navigation

  • Finalized font families and sizes

  • Added overlays to fade into some of the images for a smoother effect

  • Updated footer

  • Edited copy

Style Guide:

Our goal was to integrate Sugar Mama’s progressive, welcoming and whimsical feel with the site. These ideas are reflected in the updated style guide. Some examples include:

• Color palette:

  • Use pastels to create a bright and welcoming atmosphere

  • Keeping the burgundy and light blue to match the bakeshop’s original logo

• Text:

  • Solway is a fun serif for buttons and navigation that add to the website’s character

High-Fidelity Screenshots:

We wanted to showcase as much as possible on the main page without overwhelming the user. To achieve this, we used big, colorful jumbotrons and bold calls-to-action to help people navigate the site.

The owner wanted as few pages as possible while highlighting the things she’s passionate about, so we created the new "About Us" page to help users get to know the brand and mission.

On the original site, selecting gift cards took you to an external page. On the new site, we created a "Gift Shop" page where customers can now purchase gifts cards and other merchandise directly on site.

For the menu, we made an easy-to-use tab system to keep the pages as short as possible, while still showing all they offer. For delivery, they can go off-site with Uber Eats, or they can ask for a custom order. We also created the check-out flow with fun micro-interactions.

Conclusion:

After sharing our proposed redesign with Sugar Mama's Bakeshop stakeholders, they agreed that they'd love to update their website with our new design. We are continuing to work with them to bring the redesign to life!