RebranD   |   Website   |   FOOD & DRINK   |   community

Coffee & Community

Building connection through a local coffee shop website

When physical connection is restricted, how can we build on the sense of community offered by local cafes and establish these places as community hubs beyond the pandemic?

I began by exploring ideas for a website for my local cafe, looking at new opportunities for increasing sales but also as a way of bringing together people as they search for new routines and ways of working and living.

The Brief

Explore the possibilities for expanding the business proposition to better serve the community and create a hub for bringing people together beyond the pandemic.

skip to prototype

CLIENT

Little Star Cafe
Brief created for Designlab UXA Capstone 1: Create a responsive website for a local business

TIMELINE

Two Weeks

COMPLETED

February 2021

ROLE

End to end UI/ UX Designer

TOOLs

Figma, Google Forms, Otter, Whimsical, Zoom

Research :

Plan

Research

Research how, when & why existing customers use the cafe

Analyse

Analyse competitors to understand their strengths, weaknesses & identify opportunities

Identify

Identify ways in which a sense of local community can be fostered & maintained

Determine

Determine the key demographic that is most likely to use the cafe

Define

Define and understand the key factors that determine why a customer chooses to support a particular cafe

Research :

Secondary

In order to explore wider hospitality and coffee industry trends market research was carried out by investigating articles, relevant influencers, published reports & SME interviews.

Supporting Local & Investing in Community

With everyone struggling in 2020, there has been a collective attitude to support the shops closer to home to help them survive. Having been limited to our locality during lockdowns has also meant more of us are choosing to invest in our own communities.

Coffee Subscription Boxes

Subscription boxes have seen a steady rise over the last year, thanks to the in-person shopping limitations.

‘Insperiences’

In-home experiences where people can taste, learn, do and get involved in things like blind coffee tastings and barista experiences from the comfort of their own home

Sustainability

Sustainability now goes beyond food & drink packaging - consumers also want to know where the coffee they drink comes from, how it’s grown, how it’s harvested, if the growers are paid a fair price, and if the whole process is ethical.

Travel through Food & Drink

As travel is still a way off being back to normal, a taste of other cultures’ cuisine and coffee is becoming more desirable.

Health

Healthy coffees will come to the fore as people look at how they can reduce their fat intake, increase their overall health, and in particular their gut health.

Research :

Stakeholder Interview

“The queue is the best advertising you can get; everyone walking past sees it”

Whilst happy to help with my project, the cafe owner made it clear that he was not interested in pursuing a website for his business; preferring a more organic approach to growth, so far successfully gained from word of mouth and the constant queues outside his cafe.

This led me to question the validity of the project: would a small, local coffee shop really benefit from a website and could you justify the cost and upkeep involved?

Looking back at my initial research I refocused on the 'why' of the project; creating a digital space for encouraging local engagement. I decided this concept was something that could work more broadly for local coffee shops across the UK and had potential beyond my local cafe.

Whilst happy to help with my project, the cafe owner made it clear that he was not interested in pursuing a website for his business; preferring a more organic approach to growth, so far successfully gained from word of mouth and the constant queues outside his cafe.

“The queue is the best advertising you can get; everyone walking past sees it”

This led me to question the validity of the project: would a small, local coffee shop really benefit from a website and could you justify the cost and upkeep involved?

I looked back at my initial research and reminded myself of a study that had directly looked at the importance of coffee shops in connecting the local community. I also refocused on the 'why' of the project; creating a digital space for encouraging local engagement. I decided this concept was something that could work more broadly for local coffee shops across the UK and had potential beyond my favoured cafe.

Research :

Field Interviews

Four remote interviews were conducted with participants between the ages of 35-37. Three of whom had young children.

One unexpected insight was the level of loyalty to coffee chains that some of the participants had.

This may simply be a reflection on the area and local cafes where the participants live however it also highlights the benefits that larger chains offer in terms of reliability, choice and facilities, especially for those with young children.

“maybe they were just friendly to all the babies, but I remember all the staff would recognise Charlie, the little one. Which was nice.”

“the staff kind of know me as well, cause they always get me a nice table”

“It's like my weekend tradition. After finishing at the gym, I would walk back and go and get brunch and a coffee”

“I think they had one with an after eight this year. I literally text my sister, I'm like; ‘guess what, the new coffee's out!’”
“If we're out and about as a family I know I can rely on Costa to just work”

Research :

Debrief

Goals

  • Getting a coffee out or catching up over a coffee is a well established routine within our society.
  • For some this purely represents the ability to get a tasty treat and reconnect with a bit of normality, therefore convenience is key.
  • For others, a visit to their local cafe also provides a much needed form of social interaction and a way of reconnecting with their community.

Needs

  • A great tasting cup of coffee!
  • A safe and comfortable space
  • A welcoming, vibrant place to connect with friends and family
  • For parents of younger children: enough space, good facilities, a family friendly vibe and a well thought out children’s menu

Motivations

  • Overall look and feel of the cafe - being busy or having a queue outside can reassure potential new customers
  • Convenience
  • Being remembered by a member of staff or feeling like you get preferential treatment
  • Loyalty cards
  • Limited seasonal offers and new products
  • Sustainability & Ethical Practices

Frustrations

  • Wasting time & money on an experience that doesn’t match expectations
  • Lots of unnecessary, unsustainable packaging
  • Unfriendly service

Define :

Personas

On The Go Parents

Sociable but time poor. Values local community and keen to support local businesses.

The Dog Walker

Up early before the rest of the family and appreciates the walks as much as the dog.

Home Office Worker

Used to commute into London, now working from home. Likes to get out for a break at lunch.

The Leisure Cyclist

Enjoys long picturesque cycle rides at the weekend planning in breaks at local cafes or pubs

Laura regularly visits the cafe when taking her children to the nearby park

GOALS / NEEDS

  • To ensure weekends feel like family time
  • To connect socially with local friends and feel a part of her community
  • To support local businesses and make more sustainable and ethical choices in the products she buys

frustrationS

  • Work creeping into family time and always feeling like she’s in a rush
  • Poor customer service - she loves chatting and meeting new people
  • Poor quality coffee - she has always enjoyed starting her day with great cup of coffee

Define :

Empathy Map

Laura

SEEING

  • Other families out walking
  • Local people queuing for coffee
  • Mess, everywhere
  • The house needs re-decorating
  • So many new puppies - St Albans is full of Cockapoos
  • Neighbours

HEARING

  • Negative news, all the time
  • Local companies are going under and need our support
  • Stay home, save the NHS
  • Redundancies
  • We’re killing the planet and need to make a big changes for our children’s sake
  • Have you seen the new extension they’re building?

DOING

  • Feeding the baby
  • Going to the park at the weekend
  • Getting out for a walk everyday to stay sane
  • Organising random things inside the house
  • Getting a takeaway coffee and trying to drink it while the baby sleeps and the oldest plays
  • Trying to keep the kids entertained
  • Watching TV
  • Snacking, way too much!

THINKING / FEELING

  • Its so nice to talk to someone other than my husband!
  • How safe are we? When will we get a vaccine?
  • Stressed and lacking social support
  • Isolated - I miss seeing my friends and family
  • I wish I could have had a more ‘normal’ maternity leave with coffee meet ups and baby groups
  • I’m so glad I m not currently working and having to home school
  • Its been good to get to know our neighbours better since the pandemic started
  • I wonder if my job is safe?

PAINS

  • I hate seeing all the litter that gets left behind on the Heath after a busy day
  • Parking is crazy around here
  • Rude / poor customer service
  • I hate all the packaging on that
  • No kids menu
  • Having to take so much stuff out with me every time I leave the house

GAINS

  • Getting a free pastry with my coffee
  • I love his positivity - it makes my day
  • Chatting to someone random in the queue
  • Being able to pick up some delicious Italian treats with my coffee
  • They do a ‘Babychino’ -
    perfect for Emily
  • There are nice toilets we can use and space to bring the buggy in

Define :

Core Project Goal

Improve communication in order to increase trust and build a shared sense of pride and connection to the local community

Define :

Sitemap & Flows

My first attempt at a site map resulted in something oversized and over complicated considering the size of the business.  After looking back over the project goals I managed to simplify it by identifying three core sections of the site; ‘Cafe Menu’, ‘The Pantry’ & ‘Community Hub’.

I discovered through my research that many people rely on Google Maps to seek out new cafes so I created a task flow based around a potential customer deciding where to get lunch. This helped me to focus on the key information this customer would be looking for when arriving on a cafe homepage to help them in their decision.

I created three user flows for Laura based on different scenarios for which she might realistically have to use the site:

  • Registering for a loyalty card after a visit to the cafe
  • Seeing a hamper on the cafe’s instagram account and considering buying it for a gift
  • Wanting to organise a celebration and searching for a local space to hold it

Design :

Strategy

Authentic, positive, community feel with an understated aesthetic that represents the high quality products sold.

The majority of users will be on-the-go. Design for mobile first before making the website fully responsive.

Focus on the three core sections of the site; 'Cafe Menu’, ‘The Pantry’ & ‘Community Hub’.

Design :

Branding

I felt the cafe name could be made more specific to the local area and the logo more unique.

Over the last three years that the cafe has existed it has had two owners and two different names. Despite the changes ‘Little’ has remained part of the cafe's name and I thought it beneficial to keep this as a remembered link.

The cafe is opposite a Heath (a public park with woods and a children’s play area) and this is what makes it such a good location for the business. I therefore chose to rebrand the cafe as ‘The Little Heath Coffee House’. I felt ‘Coffee House’ provided a better portrayal than ‘Cafe’ of the premium products sold and knowledge and experience of the owner.

Design :

High Fidelity UI

Test :

Objectives

1

Test ease of navigating to the community hub section to find specific information

2

Test the journey from product page to final checkout for the click & collect service

Test :

Overview

Participants were given two tasks to complete; finding information about an event and placing a specific order that included a hot chocolate made from oat milk.

The first three participants failed to complete the second task unaided, due to a lack of clarity on how to select an alternative milk. There was also an issue in not being able to navigate back to the homepage.

User testing was paused and the design was iterated to improve the way alternative options were selected within the ordering process and 'Home' was added to the navigation menu.

USer TESting round one: fail

Instructions in menu blurb not read

Menu dropdown shows item price & description

Drink options given at checkout

USer TESting round two: PaSS

'Home' added to Navigation Menu

All drink options displayed in menu dropdown

Drink selections displayed in menu dropdown

Test :

Insights

Strong branding and use of colour with an ‘upmarket feel’

Clean, clear layout and easy to read text

Nicely laid out navigation menu with all options instantly visible

Drink options should open as soon as a drink is selected

Blue question mark in a circle

Download icons on Menus Page caused confusion

Expectation of a 'Go to Basket' button as soon as item is added

Test :

Final Prototype

Order Process

Conclusion :

Key Learnings

  • Give users all options upfront

    Initial attempts to try and simplify the order process made it more confusing by not giving all options upfront, when users expected them.

  • users don’t read blocks of instructional text

    User testing reinforced the fact that people don’t tend to read blocks of text, at the most, skimming through.

  • create components from the outset

    The iterative nature of this project reinforced the benefits of creating components for every element from the outset, speeding up changes when necessary.

Conclusion :

Next Steps

The next step for this project would be a final round of user testing on my third iteration to ensure a completely smooth checkout process before hand off.