Case Study

The Shredded Carrot

a responsive website for a modernizing bakery

Role

UX/UI designer, UX researcher, brand designer

Tools

Figma, Maze, Adobe Illustrator, Wix, Square

Duration

65 hours

Goal

Working with a bakery owner client to attract a new customer base by refining the bakery's online presence and refreshing the bakery's branding

Results

Created responsive website according to stakeholder's budget and time constraints

Created new logo and branding for the bakery

Refined online presence of bakery, which previously did not have a functional website

Background

The Shredded Carrot Bakery (TSC) has recently changed ownership. The previous owner had built a strong rapport with the community and for those in the know, the bakery has a strong reputation as the place to go for carrot cake.

However, the bakery has trouble getting new customers, especially of a younger demographic.

The new owner wants to update and refresh the bakery’s image and online presence to attract more customers, while staying true to the original cozy and welcoming atmosphere.

To determine how to best help TSC, I followed the Double Diamond.

The Design Council's Double Diamond

Discover: What is the bakery's current situation?

What are the challenges with the change in ownership?

The stakeholder presented what she felt were the biggest obstacles as the new business owner.

What are the challenges with the change in ownership?

The stakeholder presented what she felt were the biggest obstacles as the new business owner.

Stagnant customer base

The bakery’s main traffic is from its loyal customer base. However, there has been no significant growth in new customers.

Stagnant customer base

The bakery’s main traffic is from its loyal customer base. However, there has been no significant growth in new customers.

Limited online presence

The now-defunct website only had an outdated menu with limited images and interactivity.

Limited online presence

The now-defunct website only had an outdated menu with limited images and interactivity.

Bad SEO

Searching for the bakery online will only bring up social media results such as Instagram, Facebook and Yelp, rather than the bakery's website.

Bad SEO

Searching for the bakery online will only bring up social media results such as Instagram, Facebook and Yelp, rather than the bakery's website.

Difficulty taking custom orders

Currently, custom orders can only be placed over the phone or in person, which has led to missed opportunities, confusion, and customer dissatisfaction.

Difficulty taking custom orders

Currently, custom orders can only be placed over the phone or in person, which has led to missed opportunities, confusion, and customer dissatisfaction.

Competitive analysis

I looked at what both local and chain bakeries were doing, to see where TSC could stand out.

Competitive analysis

I looked at what both local and chain bakeries were doing, to see where TSC could stand out.

See full competitive analysis

Opportunities to improve TSC's value proposition

Showcase TSC's wide array of customization

Showcase TSC's flagship offering - the carrot cake

Emphasize community and closeness aspect of the bakery

User interviews and insights

I also conducted user interviews with two different populations:

Survey questions with 12 existing bakery customers, conducted in-person
Interviews with 8 participants that like going to bakeries.

User interviews and insights

I also conducted user interviews with two different populations:

Survey questions with 12 existing bakery customers, conducted in-person
Interviews with 8 participants that like going to bakeries.

See interview and survey details

Insights from existing TSC customers:

The carrot cake is the main appeal of the bakery, TSC has a very strong foothold as the carrot cake bakery

Many customers found TSC through word-of-mouth recommendation from family and friends

Many did not even know that TSC offers custom orders or other non-carrot cake items, showing lack of knowledge about its menu

Insights from people that enjoy going to bakeries:

Users use factors such as Internet searches, recommendations, and proximity to find bakeries

Many use pictures or videos to judge whether a bakery is worth visiting, social media such as Tiktok and Instagram mentioned frequently

Bakery has a bigger draw if they have a specialty item to stand out (durian goods, chocolate croissant, etc)

See affinity map

User personas and customer journey map

With the interview findings, I created two user personas. These were based on the interview demographics. I mapped out what their respective goals and pain points would be.

User personas and customer journey map

With the interview findings, I created two user personas. These were based on the interview demographics. I mapped out what their respective goals and pain points would be.

See full personas and customer journey maps

With plenty of research conducted, I could identify how I wanted to tackle the problem.

Define: What can I solve?

After synthesizing the research insights, I arrived at some key questions for the business to consider:

How might we familiarize both current and new users with all of TSC’s offerings?

How might we make it easier for new users to discover TSC?

How might we eliminate the confusion with errors in placing a custom order?

User goals

To try new bakery
To order a cake/custom order for special occasion
Easily find information about bakery in order to make informed decisions
- ex. viewing menu, prices, hours, store info, testimonials
To be able to place orders efficiently and easily, whether through phone, online or in person

Business goals

Increase and retain customer base and revenue through:

Appealing to younger audience
Increasing community engagement (better storytelling, calendar of events, newsletter)
Be to go-to for carrot cake and custom orders
Refresh and update brand to reflect values
Increase online presence, both website and social media
Improve customer satisfaction with less mistakes on custom orders

Create functional, responsive and accessible website that will:

Modernize and showcase the bakery’s offerings while reflecting brand values
Streamline customer and employee experience by being able to take custom orders online
share information about bakery offerings
communicate custom order options (ex. gluten free, less sweet, substitutions, etc)
create a community feel through social proof and public events

Project goals

There were also technical limitations to keep in mind:

User goals

To try new bakery
To order a cake/custom order for special occasion
Easily find information about bakery in order to make informed decisions
- ex. viewing menu, prices, hours, store info, testimonials
To be able to place orders efficiently and easily, whether through phone, online or in person

Business goals

Increase and retain customer base and revenue through:

Appealing to younger audience
Increasing community engagement (better storytelling, calendar of events, newsletter)
Be to go-to for carrot cake and custom orders
Refresh and update brand to reflect values
Increase online presence, both website and social media
Improve customer satisfaction with less mistakes on custom orders

Project goals

Create functional, responsive and accessible website that will:

Modernize and showcase the bakery’s offerings while reflecting brand values
Streamline customer and employee experience by being able to take custom orders online
share information about bakery offerings
communicate custom order options (ex. gluten free, less sweet, substitutions, etc)
create a community feel through social proof and public events

User goals

To try new bakery
To order a cake/custom order for special occasion
Easily find information about bakery in order to make informed decisions
- ex. viewing menu, prices, hours, store info, testimonials
To be able to place orders efficiently and easily, whether through phone, online or in person

Business goals

Increase and retain customer base and revenue through:

Appealing to younger audience
Increasing community engagement (better storytelling, calendar of events, newsletter)
Be to go-to for carrot cake and custom orders
Refresh and update brand to reflect values
Increase online presence, both website and social media
Improve customer satisfaction with less mistakes on custom orders

Project goals

Create functional, responsive and accessible website that will:

Modernize and showcase the bakery’s offerings while reflecting brand values
Streamline customer and employee experience by being able to take custom orders online
share information about bakery offerings
communicate custom order options (ex. gluten free, less sweet, substitutions, etc)
create a community feel through social proof and public events

Budget is limited for hiring web developer/website fees. Some features may need to be cut, or we can rely more on pre-made templates from website builders.

Integration of bakery's current point-of-sale system (Square) would be ideal, for inventory and analytics purposes.

The bakery does not have access to the previous ownership’s accounts or social media, meaning they will have to start their online presence from scratch.

Narrowing the scope

The new bakery owner was eager to have a working website, but knew it was not feasible to include every feature we thought of.

Keeping that in mind, I decided what was most important to include.

Narrowing the scope

The new bakery owner was eager to have a working website, but knew it was not feasible to include every feature we thought of.

Keeping that in mind, I decided what was most important to include.

Narrowing the scope

The new bakery owner was eager to have a working website, but knew it was not feasible to include every feature we thought of.

Keeping that in mind, I decided what was most important to include.

With the features of the website decided, I worked through the tasks a user might undertake while navigating, and developed a sitemap.

See full user flow and sitemap

Design: Putting the site together

The stakeholder decided that using existing Wix templates would be the most budget-friendly way to get a website up and running. With that in mind, I sketched out the desktop versions of the pages.

Logo and brand design

At the same time that I was working on the website structure and and wireframes, I was also ideating with the stakeholder about the bakery's branding.

Previous branding and website

The new owner wanted an updated logo and color palette to reflect the change in ownership and appeal.

Previous branding and website

The new owner wanted an updated logo and color palette to reflect the change in ownership and appeal.

Previous branding and website

The new owner wanted an updated logo and color palette to reflect the change in ownership and appeal.

The bakery's previous branding and logo on its business cards.
The bakery's cash register, with their old logo.
A signboard displaying the bakery's offerings.
The bakery has been an active part of the community since its opening.

The new owner liked the homey, cozy, community-focused atmosphere that the previous owner created in the physical space of the bakery, and wanted to recreate that virtually.

Examples from the previous website.
Examples from the previous website.
Examples from the previous website.

Style tile

I kept the orange that was so prevalent in the previous branding to match the in-store orange interior that the owner wanted to keep.

I swapped the dark, harsher brown for greens and yellows to create an inviting atmosphere.

Style tile

I kept the orange that was so prevalent in the previous branding to match the in-store orange interior that the owner wanted to keep.

I swapped the dark, harsher brown for greens and yellows to create an inviting atmosphere.

Style tile

I kept the orange that was so prevalent in the previous branding to match the in-store orange interior that the owner wanted to keep.

I swapped the dark, harsher brown for greens and yellows to create an inviting atmosphere.

Logo design

The egg logo was an homage to the previous owner's name. However, the new owner thought it could also be updated and streamlined.

I made a carrot cake slice to emphasize what the selling point of the bakery was, and iterated for maximum readability at all sizes.

Logo design

The egg logo was an homage to the previous owner's name. However, the new owner thought it could also be updated and streamlined.

I made a carrot cake slice to emphasize what the selling point of the bakery was, and iterated for maximum readability at all sizes.

Logo design

The egg logo was an homage to the previous owner's name. However, the new owner thought it could also be updated and streamlined.

I made a carrot cake slice to emphasize what the selling point of the bakery was, and iterated for maximum readability at all sizes.

See logo and branding iterations

Business card redesign

With the new logo complete, I also redesigned the business card to match the refresh in branding (old on left, new on right).

Business card redesign

With the new logo complete, I also redesigned the business card to match the refresh in branding (old above, new version below).

Business card redesign

With the new logo complete, I also redesigned the business card to match the refresh in branding (old on left, new on right).

I applied the new branding style to the wireframes to get a working prototype.

See all mid-fidelity wireframes

Deliver: a fresh new website for a new bakery

Testing and conclusion

From there, I tested the usability with the users. As this was based on an existing Wix template, I did not have to make too many changes. However, some users were confused about the "Gallery" versus "Menu" versus "Order now"

The stakeholder wanted to emphasize that:

there were items that would always be in stock at the bakery
the bakery could make items per customer request

but that users should not expect to order some obscure flavor and be able to pick it up in ten minutes.

I emphasized the separation between ready-made items and made-to-order items.

See user testing questions and results

With the users validating that the site design made sense, I created the high-fidelity prototype with the updated images and item pricing.

Then I recruited more users for one more usability test.

See usability test details

Usability test results

Users no longer experienced confusion between the “menu” and the “order online” functions.

Users no longer had difficulty in identifying the different pages.

I asked users about the “fresh from the oven” section - which is meant to be a section highlighting items that are only sporadically in stock. Users understood that these items were not available to order online.

I cleaned up the prototype further and had the final product ready to hand off to the web designer.

See final mobile prototype

See final desktop prototype

Conclusion

Working within the budgetary constraints was a challenge; both the bakery owner and I had many ideas for a bespoke, hyper-custom website and ways to increase user engagement. However, we had to keep in mind what was feasible at the lowest cost.

Impact

Users were successfully able to navigate purchasing bakery items.

Users could easily determine what the bakery offered.

Users could detail a custom order request without any confusion.

Users were able to find information about the bakery (hours, location, contact information) with no problem.

"I like that I can see what I'm getting - "eat with your eyes" and all that"

***get more impressions

What I learned:

It is crucial to communicate the value proposition to the user ASAP

Set expectations and standards for your team in order to prevent headache later

Asking the difficult questions to the stakeholder leads to a stronger product