WhereTo - Responsive Web App - UX/UI Project

WhereTo is a responsive web app that allows users to connect with people in their network and view and share recommendations for restaurants, bars and things to do.

For this project I focussed on user research, wireframes, user testing and responsive designs.

Project 1: WhereTo


Design a location-based recommendations app.

Project Brief


People who want to find and share recommendations of places to go with people they trust.


A responsive web-app that allows users to view and share recommendations easily from any device.

When & Where

When planning a trip or evening out or when trying to find somewhere when on the go. The tool can be used from any device.


It can be hard to find recommendations you trust. This tool allows users to share more personalised recommendations with people in their network.


Design a responsive web app that provides trustworthy, relevant information on one easily accessible platform.


I wanted to solve the users’ problems using the best possible design solutions. I therefore combined user-centred design with the design thinking process. User testing was conducted regularly throughout the process.

Research Define Ideate Design

1. Research

Competitive Analysis

The following services were analysed to gain an understand of the current market and help develop the concept for the app:

Foursquare City Guide

Foursquare City Guides is a well-known name that provides personalised recommendations based on previous browsing history and check-in history.

A full SWOT analysis identified Foursquare’s greatest weakness as only allowing access to its service through an app.

UX analysis identified positives in the search function and tab layout, but highlighted inconsistencies in navigation that hampered ease of use.


Tripadvisor was one of the first consumer review sites and prides itself as the world’s largest travel platform, featuring listings for almost every place on earth.

The SWOT analysis highlighted criticisms that the brand has received in the past for allowing unsubstantiated anonymous reviews which led to a lack of trust from some users.

User Interviews


  • People value recommendations from friends and people they know most highly.
  • All participants were very likely to tell friends and family about experiences they had.
  • Photos are important for making decisions.


  • Recommendations not being updated regularly.
  • Need to be able to filter more localised than just city.
  • Anonymous reviews can’t always be trusted.
  • Not being able to link from the app to other useful services like venue website or way finding app.


  • Need to be able to easily link to way finding app or show directions.
  • Useful to have all required information in one place.
2. Define

User Personas

From the results I was able to compile user personas of the type of users I would expect to use my app. By doing this I could clearly see the motivations, goals and frustrations that my app needed to answer, and could refer back to these throughout the design process.

User Persona 1 User Persona 2 User Persona 3

User Stories

My next step was to create an MVP document and user stories from the insight I had gathered. This would allow me to develop feature requirements based on wants and needs of the user.


As a busy person with limited time to spend browsing the web, I want to have all the information about places relevant to me in one place, so that I can easily and quickly make an informed decision.


When searching for somewhere new to try, I want to be able to view places that my friends have recommended, so that I can decide based on reviews that I trust.


As a social person with different groups of friends, I want to be able to easily post reviews of places I have enjoyed to my network, so my friends and family can see places I have recommended.

User Flow Diagram

From these stories I mapped out user flows to see what screens were required and in what order. The result was a clearly mapped path that users would take on the app to achieve their main goals.

User Flow Diagram
3. Ideate

Low-Fidelity Wireframes

Now that the research had been completed and the concept was defined I could begin the wire framing process. I began with rapid prototyping and used the Crazy 8 method for my initial sketches to come up with various solutions to the problems. I then converted what I considered to be the best solutions into digital wireframes.

Low-Fidelity Wireframes

Usability Testing

Before progressing any further it was important to conduct user testing of the initial designs. This proved to be one of the most valuable stages of the project and cemented the benefit of early user testing.


  • Observe and measure any errors that are made, whether the users understand the project, as well as how they complete basic functions such as searching for recommendations, adding friends and posting a review.


  • The majority of users tried to add friends using the menu and ‘My friends’ feature.
  • The majority of users wanted to post a review from the place detail page.
  • Few users navigated straight to the plus button to investigate it’s functionality.


  • Remove the plus button as it is clear it does not provide the most clear and straightforward solution for users.
  • Allow users to add friends from the ‘Friends’ page
  • Ensure reviews can be added from the page details page.

Tested Designs

Iterated Designs

Tested and Iterated Designs
4. Design

Brand Development

Now I knew the changes I needed to implement for the mid-fidelity wireframes I was able to begin developing the brand identity. For this I created two mood boards. I decided to opt for a gender neutral pallet that I believed best fit the user requirements and allowed the app content and images to remain the focus.

Mood Board 1
Mood Board 2



Colour Palette

Colour Palette


Mid-Fidelity Wireframes

Mid-Fidelity Wireframes

A-B Preference Testing

When designing the mid-fidelity prototypes I used A-B preference testing to help finalise decisions.

The full test can be viewed here

Tested Screens

Breakpoint Designs

To ensure the app was responsive I used grids to develop prototypes for different breakpoints; XS, S, M and L.

User testing of the below breakpoint screens provided mostly positive feedback but highlighted some small design errors which I implemented into my final designs.

Breakpoint Designs

High-Fidelity Mockups

WhereTo Breakpoint Mockups
WhereTo Mockups
WhereTo Mockups
WhereTo Mockups


What went well?

Early, regular testing resulted in a design that really worked for the user and avoided wasted time on unnecessary design features.

Skills: User testing, wire framing, iterative design.

What could be improved?

I conducted most of my user testing online. I think the project could have benefitted from conducting in-person interviews and testing to gain better insight.

Skills: User testing

Skills Gap: Confidence

Solution: More experience will increase confidence. Practice in-person interviews and testing with friends and family.


As a UI Designer this project gave me a great insight into UX design. It drove home the importance of always establishing exactly who the expected user is and then keeping them at the forefront of the design process.

Thank you for reading!