Client

HappyCow

Year

2021

My role

User Research | UX | UI | Prototyping

Tools used

Figma | Miro | ProtoPie | Photoshop

About the Project

HappyCow is a travel app that helps users find vegan options in restaurants, cafes, and grocery stores in more than 180 countries.
With this app, you can search for a place to get your food using multiple filters, access directions, reviews, and share photos and comments with other community members.

Its primary purpose is to make it easier for users to find vegan food all over the world.

Why HappyCow?

When I stopped to think about my first case study, I knew it would be about this app. Since it is only available as a paid app for iOS users, it's more likely to disappoint if the interaction falls short of the user's expectations.
To this day, I only remember buying 3 or 4 mobile apps, HappyCow being one of them. However, in this case, it wasn't a happy purchase, but I paid for it, so there it lingers on my phone.
‍When you have little or no time to figure out how to use it, it can be unintuitive, and its interface can be very cluttered.
According to multiple reviews, many users felt frustrated because they paid for an app that didn't live up to their expectations.
"Our biggest traffic is on mobile, so it’s a big focus." - HappyCow

My Approach

Research

Industry Analysis

I started by looking at numerous other apps on the market to estimate if there is much competition, the quality of the product they offer, and then to understand whether HappyCow has any advantage over the others.
From this analysis, I learned the following points:

Competition advantages
• Free apps with the same offer
• Easier to use
• More restaurant options
• Just Google it

HappyCow advantages
• Focus on this specific market
• The community
‍
Later, I read several user reviews on the App Store and Google Play websites and gathered a good amount of data.
I organized it in an affinity map to understand which were the most recurrent complaints.
I felt this was a good starting point because it is an accessible way to get real feedback from users.
Based on this research, these were the pain points identified:

App Analysis

I also analyzed which actions were the most talked about, both positive and negative, to assess which interaction flows stimulate the most interest from users when using the app, information that I transposed to the Red Route Matrix.

And while there are negative reviews about specific processes, such as adding a restaurant, these processes are usually performed by users who are part of the community and want to contribute to the app.
For the primary user, searching for a restaurant and its more detailed information become more impactful and relevant if well provided.
‍
“The biggest focus is just making it easy to find foods.” - HappyCow

Definition

Personas

The primary user is vegan or vegetarian, but we shouldn't exclude those who are not part of these groups and who want to find these types of options.
The user is also someone who uses this service while traveling to learn about its possibilities.
Going further through the research, I identified 4 personas, each demonstrating a different reason for seeking the application.

Existing Design Evaluation

I started by deconstructing the information presented on the screens to understand what was crucial to keep and what could be discarded or rearranged.

Then I identified its main problems and, from there, the areas that could be improved.

Designing a Solution

When analyzing between the need and the benefit of buying HappyCow, since the market fulfills the first one (for free), I decided to focus on the advantages that the app can bring to users, especially when they are paying for it.
With this in mind, and based on user feedback, research on competing applications, and given the most common actions performed in the application, I decided to focus on these pain points:
‍

• Make the UI simpler and more functional to use

Concentrate on the first screen and the restaurant details screen where a lot of information is fighting for attention. The content must be readable and the hierarchy clear, as the user can get lost in too much information.
There are numerous icons whose meaning the user doesn't know and lacks consistency in their categorization. Some show the type of food the place has to offer (vegan or vegetarian), while others show the type of place (whether it is a restaurant or an ice cream shop).
"It's not intuitive to learn to navigate."‍
‍

• Set the map as a separate screen to avoid overloading the user

The map ends up taking screen space and doesn't optimize the overall experience. It will be rearranged so that it only appears when the user requests to use it.
‍

• Improve the filters, both in options and organization

Regarding the filters, the current ones have mixed categories, require the user to do a long vertical scroll to see all the possible preferences, and lack some options to enhance the search performance.

Ideation

Sketches

With the features and goals outlined, I moved on to the next stage of shaping the app.
I started with some rough sketches, then brought them to life in the form of wireframes and later in low-fidelity prototypes.

Wireframes

Redesign

Recreating the Brand

When I started thinking about rebranding this app, the first values that came to mind were community and purpose. And keeping that in consideration, I strived to convey the meaning of those words into the new design by experimenting with different ideas and transposing them onto tangible screens.
‍

My initial goal was to freshen up the screens, making them cleaner, inviting, and enjoyable.

Color has a strong impact as a communication tool, so I knew from the beginning that I would change the color palette, and given some user reviews and research, I validated that the overall feel of the app could be improved.
I also opted for a simpler font with good legibility for mobile phones.
As for the logo, I just softened its features, making it a little more refined and up-to-date.
‍
Users don't appreciate overwhelming information, and with more and more options out there, they become more demanding and don't like to waste time.
‍So I aimed for a nice balance between images and text to increase readability and to properly arrange the elements to promote a better visual hierarchy.

Mockups

FIRST SCREEN
✤ Food search by list or map
The first screen now has the option to view by list or by map.
In this way, it makes it easier for users to understand the information presented and offers a more intuitive screen.

MAP SCREEN
✤ Improved hierarchy and more whitespace
The information hierarchy was restructured, and the whitespace increased to allow the most relevant features to stand out and prevent the user from wasting time searching around.

RESTAURANT DETAILS SCREEN
✤ New translation feature in reviews
The content has been rearranged to display the most useful actions at the top of the screen.
A translation feature has also been added to the reviews section, which allows the user to switch between translating comments into English and putting them back into the original language (English / Show Original).

FILTERS SCREEN
✤ Quicker to view and choose
The filters screen has been completely redesigned.
First, it has been divided into sections so that it's possible to see all the available categories immediately. This way, it avoids a lot of scrolling, and it's simpler and quicker to choose all the options. Additionally, this allows the user to check how many filters he has already selected.

404 SCREEN
✤ More visual coherence
In this case, I decided to use the app logo adjusted to the situation to make this screen more consistent with the others, and the buttons were updated.

Redesigned Screens

Style Guide

Conclusion

Lessons Learnt & Future Steps

My initial goals were to enhance my learning experience by taking ownership of the different roles involved in designing a product, questioning design decisions, and developing solutions.
When starting the project, it was tempting to start designing the screens immediately, but doing the research and consolidating the information was crucial for the rest of the process.
It was challenging not to get lost in multiple tasks simultaneously and just follow what I had planned.
If I were to continue working on this project, I would address another complex process and simplify the steps the user needs to complete, one that would be relevant is adding a restaurant. Alternatively, I would completely redesign the community screen.