UI/UX Case Study: Bakery Website — A popular London bakery chain gets a new website
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
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.
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:
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.
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
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 sequences 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.
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
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
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
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 physician and online brand elements and reinforces the buns from home brand.
Elements
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.
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.
