UI/UX Case Study: Bakery Website — A popular London bakery chain gets a new website

UI/UX Case Study: London Bakery Website Redesign
UI/UX Case Study: buns from home Website Redesign

Stuck at home at the beginning of the pandemic, two brothers and their mom started a little “let’s bake for our neighbors” operation. One thing led to the next and two years later with a little bit of help from a crowdfunding campaign, this “little operation” morphed into six bakeries at highly popular places around central London, such as Nothing Hill, Soho, Covent Garden, and more.

This is the abridged version of the inspiring story of Barney and Gabriel, the brothers behind buns from home. Their story deserves to be told in full and they deserve a place online where people can easily find them and instantly fall in love with their delicious creations.

Description

Website redesign for a popular artisanal bakery chain in London called buns from home. So far the bakery has six locations in popular neighborhoods and there are plans to open even more. The growing popularity of the bakery chain demands a website that matches its fun brand and highlights the excellence of its baked goods.

My Role

  • Research
  • Web Design

Tools Used

  • Figma
  • Illustrator
UI/UX Case Study: London Bakery Website Redesign — buns from home Website Redesign Preview
buns from home: Website Redesign Preview

Empathize: Understanding the Problem

Challenge

The challenge of this project was to create a website where the current and future buns from home customers can quickly find the information they need to order or visit one of the bakeries or order online on an off-site platform.

Goals

  • Invite people to one of the physical locations
  • Give clear order and delivery instructions
  • Inspire people to treat themselves to delicious baked goods
  • Nurture the community spirit of the whole operation
  • Inform customers about ingredients, dietary restrictions, seasonal offerings, etc.

Requirements and Restrictions

The chefs at buns from home are encouraged to experiment and create new delicious buns every week. This means that the menu changes often and there are no high-resolution images available of the products.

As a result, one major restriction is the size and quality of the images available. This automatically means that there will be no full-page backgrounds. The default image size will be the Instagram square size (1080 x 1080 px).

This might restrict the web design options somewhat, but it’s an interesting quirk to work with. Many businesses don’t have high-quality photos or don’t have the option to use stock photos. This project challenged me to look for different creative solutions to this problem.

Define: Research & Analysis

In addition to the initial research, I reached out and received a little bit of information about the current customers of the bakery.

UI/UX Case Study: London Bakery Website Redesign — buns from home Numbers
buns from home: Numbers

Currently, the website receives about 14k monthly visits. All orders and deliveries go through deliveroo.co.uk. People cannot order through the website itself and the plan is to keep it that way. For the time being, the priority is opening more physical locations around London.

The lack of e-commerce functionality and a blog makes the website a static landing page. Here is the current website with all its pros and cons:

Screenshots From the Current bunsfromhome.com Website

It does:

  • provide a link to a delivery service
  • informs about the current locations (however, it does so a level deeper than it should)
  • provides an email address for contact
  • informs about social proof through major publications

It does not:

  • deliver any meaningful information above the fold
  • highlight essential for the customer information on the home page
  • provide any indication of the popularity of the bakery on Instagram
  • nurture a sense of community
  • give any information about dietary accomodations (vegan, halal, etc.)
  • state any benefits of signing up for a newsletter
  • provide a meaningful contact form
  • showcase reviews and testimonials from happy customers and food critics
  • tell the story of the founders, even though it is one of the main things that sets them apart from other brands
  • show photos of the products

Website goals

As previously mentioned, the bakery uses deliveroo.co.uk for orders and deliveries. This is convenient for the team since they don’t need to maintain an e-commerce system themselves. It is also great for customers, who most likely already have an account at deliveroo.co.uk

With the deliveries covered by another platform, the website is left with two major tasks:

To inform

The primary goal of the website is to give easy access to information about delivery options, locations, opening times, etc.

To inspire

The bakery’s offerings fall more into the “hedonistic indulgence for the senses” category and less under the “healthy option” one.

As a result, the secondary goal of the website is to inspire people to treat themselves, experience joy with friends and share a moment of guilty pleasure with their loved ones. One of the ways to do this is to create a sense of community around the bakery and its products.

Persona

Based on my findings during the initial research phase, I came up with one persona. The typical buns from home customer uses the website to find information about the bakery, such as delivery options, locations, opening hours and more.

Sarah — 26, Londoner, Social Media Analyst

Sarah lives in Hackney. She shares a flat with her best friend Leila and her dog Bow. She works from home most of the time but she goes into the Paddington office at least once a week. She’s active, extroverted and feels the happiest when adventuring out with colleagues and friends.

UI/UX Case Study: London Bakery Website Redesign — buns from home Persona
buns from home: Persona

Likes:

  • Sweet pastry
  • Running half marathons
  • Having adventures with friends
  • Sharing amazing food
  • Her job and her colleagues
  • Trying new things as often as possible

Needs:

  • Quick access to information on the website
  • All links in one place (delivery, social, locations)
  • Info about opening hours, new and seasonal offerings, etc.
  • Easy ways to recommend buns from home and leave a 5-star review

Hates:

  • Clutter
  • When she can’t find something that was there 5 seconds ago
  • Wasting calories on bland, flavorless food
  • Lockdown and prolonged solitude
  • Broken links

Customer Journey

Here is what a customer journey might look like for Sarah:

It’s Friday, she’s at the office and she wants to order a box of buns for her team. Also, a friend of hers is visiting on the weekend and she wants to take them to one of the bakeries for a coffee and a scrumptious bun.

Goals:

  • Find the shops nearest to her office and her home
  • Order from the first one right away
  • Check the opening times of the one nearest to her home
UI/UX Case Study: London Bakery Website Redesign — buns from home User Journey
buns from home: User Journey

Step 1 — Opens up the website on her mobile phone

Tasks:

  • Opens a browser and googles buns from home
  • Opens the website and scrolls down looking for the information
  • Doesn’t find it on the home page

Pain Points:

  • Can’t read header text — above-the-fold background makes text illegible and hides links
  • Can’t find what she’s looking for — the home page offers no valuable information

Improvements:

  • Remove background images
  • Pick a vivid highlight color for the buttons and links
  • Put everything important on the home page

Step 2 — Finds the delivery option and locations

Tasks:

  • Scrolls back up
  • Finds a link to deliveroo.co.uk to just one of the locations
  • Clicks on the hamburger menu
  • Finds the locations

Pain Points:

  • Can’t find where to order because order & delivery information is incomplete and hidden
  • Can’t find the shops right away — locations are hidden a layer deep and in a hamburger menu

Improvements:

  • Put deliveroo.co.uk links on the home page
  • Put shop locations on the home page
  • Add them to the hamburger menu as well

Step 3 — Opens Google maps to find the shops

Tasks:

  • Discovers street names are not linked to Google maps
  • Opens maps app manually
  • Checks all addresses one by one to find which one is closest to the office

Pain Points:

  • Can’t click on the locations — has to manually browse through a map app to find the info she needs
  • Can’t click to order from the desired location — has to manually look through deliveroo.co.uk for the right shop

Improvements:

  • Add links to Google maps next to each location
  • Add a link to deliveroo.co.uk to the locations that do deliveries
  • Open all links in new tabs so the website can stay open

Step 4 — Opens deliveroo.co.uk to order for the office

Tasks:

  • Finds the closest bakery and finds it on deliveroo.co.uk
  • Browses the menu and picks a box
  • Places her order

Pain points:

  • Ordering on deliveroo.co.uk is easy enough but she would like to know more about the buns.

Improvements:

  • Add FAQ section and page and add a link to it on deliveroo, if possible.

Step 5 — Jots down working hours and closes the website

Tasks:

  • Goes back to the buns from home website and checks which shop is closest to her home and when it’s open during the weekend
  • Closes the website

Pain Points:

  • She is taken away from the website to make the order on deliveroo.co.uk and now she needs to find the website again to check the other locations
  • All in all, using the website takes too long, too many steps and it’s unnecessary complicated

Improvements:

  • Keep the page open in a tab so the user can go back to it whenever they need to.
  • Keep everything on the landing page and only add layers, if necessary.

Ideate: Sketches & Wireframes

The buns from home website is hosted on Squarespace. Squarespace uses sections and blocks on each page so the wireframe is created according to these design parameters.

I used the content of the current website as a guideline and brought all important information under one roof on the landing page.

UI/UX Case Study: London Bakery Website Redesign — buns from home Website Wireframe
buns from home: Website Wireframe

Navigation: It contains the simple, small caps logo, links to either pages or anchor points on the landing page, and social media links.

Social media links in the top navigation are usually a bad idea. They add one more CTA distracting people from the main one above the fold, and they lead back to the place where most people usually came from.

However, this website is the exception. It’s not a content-heavy website and it doesn’t need to keep people reading and engaging for as long as possible. The goal of this website is to create a community and invite people to follow, join, come visit, etc. Social media is great at doing this, so the links in the navigation can be of great help.

Header: The first section of the website contains the main CTA — it is either an invitation to order or to visit.

Locations: Information about the physical locations of each bakery is perhaps the most important thing on this website. The current focus of the buns from home team is to expand their location portfolio, so highlighting each bakery on the front page should be the main goal of the website, too.

About: As mentioned above, the origin story of the bakery is quite remarkable and needs to be told in full. The landing page contains a short version, which should be enough to deepen the emotional connection between the brand and the customers.

Social Channel: The buns from home Instagram account gets updated every day with photos of amazing baked goods. Embedding the feed on the landing page is an easy and effective way to showcase up-to-date offerings.

Reviews: Every brand should have a collection of stellar reviews on its website. In this case, this section should be filled up with great reviews by food critics and social proof by loyal customers. Words have different power from images, so this section needs to be included on the new page.

Press: It’s important to spread the word about how great this bakery chain is so this section is a collection of all the publications, interviews and articles about buns from home.

Footer: As usual, the footer is the “last chance to find what I’m looking for” place on the website. If the user hasn’t found the information they were looking for through scrolling or clicking on links, this is where they should find it. Repeated links from the top navigation, additional links, contact and social info — everything that the user must now has to be here so it can be easily found on every page.

Build: Prototyping a Solution

Design System

The buns from home brand already has some design elements, which I gathered in one place. I also made some minor adjustments and added new elements only where needed.

The goal of the design system is to keep the visuals as close to the existing brand as possible so it can be recognizable right away by all current customers.

Branding

UI/UX Case Study: London Bakery Website Redesign — buns from home Brand Design
buns from home: Brand Design Elements

Most buns from home brand elements can be found on their packaging (the house logo), on their physical storefronts (the small caps logo), and on their social media accounts (the house sub-mark).

The current website isn’t using any of those elements. The new website needs to incorporate all of them. To help with that, I’ve created a pattern from the house logo to use as a background across the website.

Colors

UI/UX Case Study: London Bakery Website Redesign — buns from home Colors
buns from home: Colors

The color palette is simple — there are three shades of pink used in the already existing brand elements, grey for less important information and black for text.

There is no need for additional colors at this point. However, if the website gets more complex or gets an e-commerce functionality, then additional colors may be needed.

Fonts

UI/UX Case Study: London Bakery Website Redesign — buns from home: Fonts
buns from home: Fonts

There are two fonts on the website. The first is Public Sans, which is the font of the logo and most of the headlines.

Using the logo font for headlines is not the best practice in most cases, but here the logo is so simple, most sans-serif fonts will look either too similar to it, or clash with it.

The second font used on the website is Crimson Pro. This is the font used for the house logo on the bun boxes. It’s an elegant serif font that brings balance to the otherwise modern small-caps-title-look of this website.

Both fonts are already used by buns from home on their packaging and storefronts. Putting them on the website creates a visual connection between physical and online brand elements and reinforces the buns from home brand.

Elements

UI/UX Case Study: London Bakery Website Redesign — buns from home Components
buns from home: Components

All photos used on this website come from the buns from home Instagram account. This was one of the requirements and restrictions of this project.

To make their use on a Squarespace-hosted website easy and consistent, they are used “as is” without the rounded edges of the buttons and graphic elements.

The buttons have rounded “bun” edges. Buttons use the two highlight colors and all links use the bright pink accent color to indicate clickable text.

The Solution

The final solution is an elegant and bright website, full of useful information, CTAs, and street credit.

UI/UX Case Study: London Bakery Website Redesign — buns from home New Website
buns from home: New Website

Test: Evaluation & Conclusion

Key Takeaways

  • A website that doesn’t sell but advertises and informs should have most, if not all of the information on the first level.
  • People mostly use their phones to check for locations and opening hours so the mobile version of any information website should load quickly and be easy to navigate without hiding important information on second layers.
  • As much as possible, descriptions on information websites should be clickable and lead to maps, shops, social proof, etc. The goal of an info website isn’t to retain visitors for longer but to invite them to buy or visit.

Next Steps

The immediate next step will be to design the website in Squarespace and launch it. Then test and evaluate how useful it is through analytics tools and customer surveys. After that, it can be improved by taking all feedback into consideration.

Conclusion

buns from home is a bakery with a beloved signature product, undeniable success throughout central London, and great popularity online. I hope this web design, should they choose to use it, will help the team spread the word about their culinary magic fast and wide and give their current and future customers another way to become their loyal fans.

Thanks for reading! If you want to see the project without so much text, take a look at it on Behance or Dribbble.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lina Cher

Lina Cher

UI/UX designer with a passion for telling stories that inspire people. linacher.com