Community Kitchen Landing Page—A UX Case Study
Stepping back to reflect on a website’s target audience and goals
About Pit Stop Cafe
Back in March 2018, my community at Remote Year collaborated with Pit Stop Cafe, a social enterprise in Kuala Lumpur improving the lives of the city’s underprivileged population.
When things are bad, ‘look for the helpers’. Homeless people are not the problem, they are the victims. In a city with a sizeable homeless population, Pit Stop is one of the organisations that helps providing an answer. They focus on restoring their dignity, through delicious and nutritious meals 6 days a week, through individual support, through professional coaching and training.
Our group joined for one or two afternoons a week, first helping in the kitchen (chopping stuff and washing dishes, that is—they leave the cooking for the pros, former dinner clients who’d been trained for the job) and then from 5 PM onwards running the dinner service, serving around 200 meals for every dinner service.
The challenge
My prompt was to think about landing pages and what makes them effective, and I wanted to base my research and reflection on a real-world example. Pit Stop has a very special place in my heart, so exploring ways I could potentially stay engaged with them is a dead giveaway.
Pit Stop has clearly put some effort in having a thorough and decent-looking online presence. Going through their website, there’s plenty of insight on how the organisation works and ways to get involved. However, it also has a number of quirks, namely:
- Confusing structure. There aren’t gaps in information. Yet it is quite hard to find the answer to the bread and butter questions—What is Pit Stop? How does it work? How do I sign up to be a volunteer? When is it open? It could use a more thorough re-thinking of what content to present and how to do it, with the website goals in mind.
- Unclear copy. Many of the pages (‘About us’ being a case in point) have big walls of text. This is not useless information, but in some cases it borders on redundant: it could be reorganised and rewritten to be more clear and concise.
- One annoying popup. Recently Pit Stop has introduced a for-hire catering service, as a part of their efforts to become self-sustainable. Rather than an obtrusive and context-deaf pop-up, what are other ways we can bolster leads for their business?
What does success look like?
What do the above-mentioned quirks stand in the way for? What would be the reasons why we would want to do a project like this? I am not associated with PitStop and I don’t have access to their website analytics. For the sake of this exercise, I will assume that a more effective landing page would mean:
- From reading the landing page, visitors understand the gist of what PitStop does and where it is located
- Increased number of incoming leads (volunteering, catering, and speakers)
Scope
There is plenty of work that can be done in terms of general structure, copy, and visual aspect of the Pit Stop website (while validating that work on actual data and user research), and I do want to get back to this in the future.
I’ve limited this specific exercise to the landing page — what are the issues with the current landing page, and how could we go about solving them?
Current landing page—What could be better
1. The page doesn’t answer any of the basic questions: What? Why? How?
Upon opening this page, I’m greeted with a large Pit Stop logo. We learn that it is a ‘community café’, and from the navigation bar at the top we can assume that they offer some sort of volunteering service, and that we can also hire them. The first interaction with the page doesn’t explain what Pit Stop is all about. Scrolling down the page, the bulk of these questions remains unanswered.
2. The navigation bar has too many action points
I’m not even sure what this thing is all about, yet there’s so much I can do already! Hit About Us and finally unveil the mystery! Check out the Programs/Events! Volunteer! Hire them! Collaborate! Media! There are sub-menus too!
The navigation bar should help users to easily find what they need—we don’t do that by dumping everything we would like them to know about us.
Terrible analogy #1: Like an elevator pitch, not a 2-hour speech.
3. The page looks busy
Scrolling down, we see an image gallery of sorts, with superimposed headers and navigation buttons. Between the multi-coloured all-caps text, the two-coloured buttons, and the full-length images in the background, there’s a lot going on here. I don’t know where to look.
Terrible analogy #2: Whitespace is a balm to the soul, like the supreme bliss that descends upon you when a loud, drilling construction noise finally stops.
4. No anticipation
Still on this gallery/menu sort of general mishmash, there is no preview text that helps me decide where to click next.
This a bit more acceptable in some cases — it’s not hard to guess what comes with ‘Contact and Volunteer’ (although why are those two clubbed together?), although it would be nice to have some additional insight on the content I’ll see on the next page.
In other cases (‘Collaborations’), it’s impossible to guess what the page will be about, unless we actually go and click on ‘Find out more’.
5. Unclear information hierarchy
We reach the footer. I have questions.
- The dinner service is the heart of Pit Stop. This is important information. Why is it only mentioned for the first time on the footer?
- Why does the footer have such a large heading?
- How many fonts are there in this page? (4, excluding the logo)
- Why are there two links for Facebook, one through the social icon and the other through the written down URL?
Note: Facebook is paramount for Pit Stop. It is their main channel for updates as well as communication. This needs to be kept in mind on any website redesign. However, I’d argue two entry points on the footer are not quite the ideal solution to bring more traffic to their Facebook page.
Terrible analogy #3: When something is important, you put it in your head, you don’t trample it under your foot(er)
Target / Goals
Proposed solution
My early iterations featured three main elements: a simpler navigation bar, a short blurb to describe the organisation, and a more detailed description of its services.
Navigation bar
The (formerly massive at 600x282px) logo is still visible at the upper left corner of the page, without stealing the whole show.
The action points have been simplified, in order to reflect the three main goals of this website: inform, recruit volunteers, and get leads for the catering and public speaking business.
Hero image & short summary
The hero image of the volunteers in the kitchen superimposed by the short summary give the elevator pitch.
What we do
This section came to be later. While I was putting the page together, I realised that the hero image above didn’t provide enough information to spring people into action.
The contents were surfaced from the ‘About us’ page. The original version reads:
The Pit Stop Community Cafe was set up by Joycelyn Lee and Andrea Tan with three objectives:
#1 To Build — To build a platform for groups and individuals who want to give back to the society but have little to no knowledge on how to do so
#2 To Reach Out—To reach out to and assist marginalised communities through food and services with the ultimate aim of reintegration into society
#3 To Minimise—To minimise food waste through food rescue, redistribution & repurposing
I partially rewrote it in order to make it more clear and concise, and swapped points #1 and #3 in order to give them a more logical sequence.
Icons (The Noun Project) were added in order to visually reinforce the message.
Dinner service
Dinner service information was bumped up from the footer. Adding “pay-what-you-can” makes clear that anyone is welcome to join, while subtly reinforcing this is not a handout.
Ways to get involved
The headings are much smaller, but still very much visible and easy to skim. The short summary underneath adds gives a clearer idea of what the different sections entail.
The full-length images were replaced by large miniatures depicting the daily work of the organisation on the right hand side (photos taken from Pit Stop’s public Facebook page)
There are sections missing: ‘Programs/Events’, ‘Collaborations’, and ‘Media’. They don’t make sense here as they are not associated with any action any of the target audiences could possibly take. These are informative in nature, and can be absorbed into other sections, such as ‘About us’ or ‘Contact’.
Reflection
Intentionality is everything. When designing a website, we need to think who are we making it for, and what are the outcomes we want them to achieve. For someone coming from a product background, this may sound like a truism.
Yet for someone without this type of background with a powerful mission to share, this principle can easily be overlooked. They might want to share all the things at the same time, in the process drowning even the most powerful message in the noise. The people at PitStop are good at feeding people in Kuala Lumpur—they don’t need to be good at designing websites.
This exercise was also yet another reminder of the importance of writing in my work. In this case, putting down the issues and my thought process in words helped me get a clearer understanding of what I was doing, and also detect logical mistakes as I put this page together.
Thoughts? Suggestions? Criticisms? I thrive on honest feedback. Thank you for your time!
