Portfolio
Check out my projects
About / CV
Learn more about The man. The myth. The legend
Contact
Like what you see? Hire me.
2017

CASE STUDY: Building a website for a food professional

+ Website, Brand Development
Celia showing off some amazing veg
From her photoshoot for her book SuperVeg
6 minute read

Some context about the project

Celia Brooks describes what she does on her business card with two words: Food Expert. Talking to her you will quickly find out that this is the truth. She is incredibly knowledgeable about the food world. Not only does she have nine internationally published cookbooks, but she has her own London food tour company called Gastrotours. She’s also the only person licensed to run tours at Borough Market. On top of this she does consulting for major food companies that seek her out specifically since she has her finger on the pulse of all the latest food trends in London.

That’s a lot for one person to manage. That’s how this project was born.

Celia was looking to expand her business and needed to:

  • Clearly show all the different services she provides
  • Solidify her brand
  • Lay the groundwork for food tour expansion
  • Ease automation for buying her tours and vouchers

Development & user research

Celia’s services can be broken down into several different facets - Food tour guide, TV personality, food writer, consultant, journalist, public speaker, teacher and recipe developer.

It was important for her to include all of her services on her site. Once her business expands she understands that they might have to be split up into separate sites so people can focus on one service at a time instead of being overwhelmed with choices. This will also help with SEO/SEM.

Personas

I usually work directly with a team of UX designers to map out user personas, but I was doing this as a freelance project on my own. Taking what I’ve learned over the last five years of working in an agile work environment, I created several personas of people that could be looking for her various services.

Sitemap & wireframes

Mapping out each user journey was key to creating a simple flow. It was imperative that information was easily accessible for anyone landing on any page. From redeeming a voucher to hiring Celia for a consulting job, everything was considered and mapped out.

Creating Celia’s brand

I love the idea of Celia’s food tours as a theatrical performance. She brings together all of these different elements of tastes, knowledge and experiences. I wanted to mirror that kinetic energy on her new website with a layout that’s similar to a food magazine with a lot of overlapping elements.

Grid system
Responsive 12 columns
6px baseline
Darkish-pink
R238 / G45 / B123
#ee2d7b
Lipstick
R184 / G37 / B96
#b82560
Yellowish-orange
R247 / G148 / B30
#f7941e
Orange-yellow
R255 / G163 / B0
#ffa300
Color Palette
Secondary colors
Off-white
R251 / G251 / B251
#fbfbfb
Very-light-gray
R241 / G241 / B241
#ee2d7b
Brownish-grey
R112 / G106 / B106
#706a6a

Typography

I usually use one typeface with a a good selection of font variations, but since the overall look is more like a magazine spread, it allowed me to be a bit more ample with my typography. I carefully crafted it so there was a good balance between the three typefaces.

Iconography

In the process of creating custom icons for Celia Brooks,I was looking for some special flair to help them have a life of their own and still be fun.

On her business card is says “Food expert.” - that period at the end helped me find what I was looking for: punctuation that drives home the point. Time. Calendar. Mail. Period.

I created a custom small (36px x 36px) and large (48px x 60px) icon set depending on usage.

Various screen shots
www.celiabrooks.com

Launching the product

Compared to the last three months before launch:

  • Sales of tickets and vouchers went up 24%
  • Bounce rate went down 35%
  • Session durations went up 101%
  • SEO improved immensely! Search “London food tours” and her site bounces between first and second page results now.

A lot of positives came up very quickly. Celia has reported a sharp decline in customers calling her looking for answers to questions about her tours, which has freed up her admin time considerably. I’m looking forward to working on future iterations of this project and watching her business evolve over time.

Celia on set for a cooking show

Testing the product

Identifying a few key challenges

Originally there was going to be a shopping cart with voucher validation. Surprisingly there isn’t a very good out-of-the-box solution for this, which meant building a custom shopping cart and CMS. That wasn’t within the budget restraints for this initial launch. For now we’re just linking to an external site called AnyRoad - not an ideal user experience. I hope in the future to revisit this because I have a killer shopping experience ready to implement in my user journey wireframes.

Initial findings

Here are issues and feedback found through user research that will be addressed in future iterations of the website.

  • Too much information, especially with the mobile experience - Content prioritization is paramount.
  • Redeeming a voucher and buying tickets isn’t streamlined - see above about needing custom shopping cart and CMS.
  • People love the look of it.
  • Didn’t like having to go to AnyRoad external site - see above about needing custom shopping cart and CMS.
  • Companies looking to hire Celia loved the services and hire pages.

Future iterations

Using our user research and Celia’s initial business plans, we have a list of changes for future iterations:

  • Streamline shopping cart
  • Split off Gastrotours and make it a separate entity
  • Simplify the mobile experience
  • Integrate voucher redemption into the shopping cart system
  • Add a CMS blog system
  • Cut out all external sites (ie. AnyRoad, etc.)
Next Project