REVL EVENT APP UI & UX
jul.2017 – apr. 2018
REVL is the UK's largest aggregator of event information platform, which has over 180k events in the app with the ability to personalise the events by means of machine learning. Their mission is to become the ultimate 'What's On' guide for the millennials. When I joined in mid 2017, the app had already been launched less than a year ago. Hired as a product & brand designer to help driving engagement, retention and acquisition. I worked on the iOS app from identifying pain points to the final design mock-ups.
In defining growth opportunities for an existing app, it was important to understand the current state of the product before thinking of any solutions. My role was to identify any areas of frustration with the platform by interviewing real users, and to analyse the way they perform each task. I laid out some of the key user journeys, and noted down feedbacks of any recurring problems after presented in front of 5 different users. The key insight was that most users find the UI not very intuitive, and the process of saving an event for later was not very straightforward, especially everyone was confused by the name 'PLAYlist' to mean 'collection'. There are two parts to this challenge:
Problem 1 - The process of saving an event for later is not straightforward
How can we make the process of saving an event as frictionless as possible without costing the users any mental effort? The first obvious thing was to change the name 'PLAYlist' to 'Collection'. Secondly, we got rid of 'favouriting' feature so that the call to action is clear: to create Collections. At the same time, what we loss is the immediacy of saving something in 1 click. But what if the app was able to automatically suggest a Collection to save when the user click 'Save' based on the category of the type of event it is? Then we would reduce the process of saving an event to just 2 clicks and keep the best of both 'collection' and 'favourite' features.
problem 2 - users can't easily find the saved events after they're saved
The find-ability of the saved event is the other crucial part of this UX challenge. When the task was presented in front of the users, the feedback was that the UI looked a bit complicated and the layout of the 'My REVL' page did not feel straightforward. It was creating a huge cognitive overload. One user did not even notice the main tabs and thought that it was just a section header! So it was apparent to me that the solution would involve tackling the visual hierarchy as well as the aesthetic appeal. A change in grid layout as well as using the strong yellow colour sparingly could help drawing users' eyes to informations that matters the most on the page.
The key user flows
- User Goal 1 - Save an event for later so that user can come back to it easily later, which involves creating a Collection from the event profile.
- User Goal 2 - How to access Collections before or after they've been created.
- User Goal 3 - What happens and how to do this if a user wants to create a Collection first before seeing any event profile.
I mapped out the user flows (see below) for each User Goal to see what the the journey and the happy path looks like:
Simplifying the workflow of creating a 'Collection'
The image below shows a comparison between the old and the new workflow for saving an event to a Collection. The old design involved a lengthy 5 step process and many clicks to achieve its happy path. In the new design, we've freshen up the event profile, making the 'saving' action much clearer by calling it 'Save'. Our system then automatically suggests a 'Collection' based on the type of event it is, removing the lengthy process of creating a collection and complete the whole workflow in 2 clicks.
As well as the simplification of the user flow, some cosmetic improvement has also been introduced in this redesign to enhance the visual appeal of the page. Let's take a look at the 'Collection' page (the screen on the far right), the enlarged events image and the subtle background treatment in the new design make the page feel more much more appealing.
Visual design improvements
Let's take a closer look at 'MY REVL' page. In the old design, the user's static profile information used to take up almost half of the screen, leaving the crucial part of the information buried under and it's hard to find events. I removed the greys bars behind the tabs to enhance the overall look and feel of the UI as well as added icons to help users navigate better. I made sure that yellow is used sparingly so that the focal point is obvious, and yellow text is only used when it's a hyperlink.
Bringing the brand to live through image curation
REVL is a lifestyle brand that exists because it wants to inspire and enable people new experiences, and ultimately makes people feel happy. The brand ethos is about finding happiness in the experiential space and, therefore, as well as being functional it was important that our digital products reflects the company value. In order to bring the brand alive, I worked closely with the Marketing team to make sure that every areas of detail (from image treatments to in-app messages & tone of voice) delivers the same message; that REVL is fun, open and is every millennial's trusted friend.
The image below shows the new design of the new Homepage (left) & the Find (right) page, as well as our curated list of category images. In terms of the image direction, we intentionally avoided the obvious and tried to inject some humour into it. E.g, instead of showing pictures of real children for the 'Stuff for Kids' category, it's much friendlier to use picture of kid's foot print. We received many positive feedbacks and, as a result increased engagement & retention with the new designs.