A mobile-first responsive website design boosting engagement and revenue for an online restaurant guide. (2016)


Hardens is a stalwart of the restaurant industry and is described as the “Gastronome’s bible” by the Evening Standard.

Hardens were facing challenges monetising their site traffic.

Their business model consists of providing market-leading restaurant reviews which attracted discerning diners, who provide an attractive audience for advertisers to buy display adverts and restaurants to buy premium listings.

This model required a high volume of page views to drive revenue and Hardens' revenue had levelled off.


  • Discover why Hardens.com revenue had stalled.
  • Increase user engagement on the Hardens.com website.
  • Re-develop their website to drive visitors and create a mobile-first core user journey.


  • No insight into why revenue had levelled off.
  • A limited budget with which to discover and fix issues.
  • An ageing technology stack that made redevelopment of the site time consuming.

My role

I worked alongside a Product Manager, Marketing Strategist and Full-stack Developer.
I led the User-testing, and Product design phases of the project.

Audience & research

Quantitive research

I worked with a colleague to carry out a Google Analytics analysis to draw out patterns in the well-trafficked existing user base.

We discovered:

  • Traffic from Google Search was the primary source of site visits
  • That the site received a healthy number of unique and returning visitors
  • Key restaurant pages the length of visit averaged minutes rather than seconds.
  • The bounce rate was very high (85%) indicating that users found the content they wanted on their arrival page, but then didn't engage with the rest of the site.
  • Mobile traffic made up an increasing proportion of the site traffic, but the site was optimised for a desktop experience.

Qualitative research

We identified that the highest priority activity was to develop a deeper understanding of the Hardens.com audience.

To generate this customer insight, we ran on-site qualitative surveys on Hardens.com as well a Net Promoter Score survey.

The surveys gave us a clear picture of customer satisfaction levels. They highlighted areas for product improvement as well as areas of the product that customers were very happy with.

We conducted a Net promoter survey to give insight in to user opinion

User needs discovery interviews

To add the final piece to the customer insight jigsaw, we ran remote user interviews. I carried out several of these interviews. These interviews allowed us to understand what jobs the users were trying to achieve and how a digital solution could help them.

The major pain points we discovered were:

  • Finding the right restaurant for the situation (e.g. impressing clients at a business meeting).
  • Being able to book a table easily at their chosen restaurant.
  • Being able to discover similar restaurants in their chosen area.

UX Design

With an understanding of the users and their needs and pain points, we brainstormed different potential opportunities.


Concepts we explored included:

  • Re-focussing the website to be an area-based online guide.
  • Creating a rating-based taxonomy, grouping unrelated restaurants together into useful categories (e.g ‘Best restaurants for impressing clients’ or ‘Most romantic restaurants in West London’).
  • Turning Hardens into a personal concierge who would generate bespoke suggestions for you and book restaurants.
  • Creating an exclusive club with unique dining experiences.
Concept - an online concierge
Concept - A area-based guide
Concept - A search-based map

As the primary goal was to increase revenue quickly, we chose to focus the website on becoming a trusted area-based guide.

The exclusive club was a favoured idea, so we agreed to develop this in the future.


I generated sketches for the key users journeys ensuring customers could complete their tasks.

These sketches allowed us to rapidly test different approaches to searching for suitable restaurants, focusing on a mobile-first approach.

In addition we re-designed the key restaurant detail page with the aim of providing enough information for the user to decide if it was suitable for their needs but with the opportunity for restaurants to buy a premium listing and add in additional content such as menus, galleries and more detail about the restaurant.

I conducted a content audit of these key pages and suggested the best types of content to show on each page in the form of low-fidelity Balsamiq wireframes.

Wireframes of home, search and restaurant screens

UI Design

I created a component library of UI widgets ensuring consistency through the new pages and designed to work on mobile-devices first of all.

I designed a new look and feel for the Hardens website, bringing the colour palette, typography and graphic design back to the printed guide.

Component library with common styles, navigation and map elements

I introduced a new visual language for the restaurant scoring system and included this whenever a restaurant is displayed to reinforce the value of the customer reviews throughout the site.

Interaction design

As the map interface was a key component for the new design, I experimented with different layout options for cards. I chose the stacked card layout, as the user could see more results on screen and the variable length of content lent itself to wider cards.

Different UI options for the map interface; a vertical stack of cards, a swipeable gallery of cards and a tooltip-based version

Final designs

Homepage with emphasis on search
Search results UI, allowing for browsing and filtering of suitable restaurants
Restaurant detail page UI
Final desktop search results UI


After six months:

  • The bounce rate on the website has reduced to 55%.
  • Average time on the restaurant pages has increased to 1 minute 60 seconds.
  • Pages per session has increased to 4.3.

View live website

View all