Beanhunter

UI/UX Design

Challenge

Beanhunter is an app for a coffee enthusiast to discover, share and review independent coffee shops in a city. Loved by users and coffee shop owners, it created a new platform to connect users and discover independent coffee shops.

 

Over the years, the app has not been updated. The design has become outdated and lacks some features when compared to other competitors.

The Problem

  • Aging interface design

  • Lack of highlighting core features

Solution

Beanhunter is still used by many users. The design and experience of the app haven't changed for years. The goal is to update the UI design and audit the elements that are necessary.

Role

UI/UX Designer

Visual Designer

Time Duration
Tools

Figma and Adobe Illustrator

A personal project.

40 hours

The Research

Empathize

Market Research

I wanted to understand the consumer behavior of coffee drinkers and the industry. Identify the demographic and determine their motivation for drinking coffee and supporting local brands.

  • Demand for coffee will continue to grow. Partly due to the growing millennial market which is willing to spend on brands and experience.

  • The coffee culture among the young population helped grow the coffee market.

  • Specialty coffee shops are growing in Europe and Japan at 10% and 13% respectively.

  • The millennial market, which is tech-savvy, is going for brands that are socially and environmentally responsible.

User Research

In the early days of the app, users and coffee owners loved it. It made users discover and share coffee shops in an area and read reviews. It was also a good source of traffic for coffee shop owners. Nowadays, the app is filled with users who are frustrated with using the app. Functions not working properly, unreliable user reviews of coffee shops, and generally outdated features.

Based on app reviews:

  • "Good as a guide as to where you might find good coffee, but I hate that the customer service and atmosphere get the same weighting when you rate. I’m only interested in finding good coffee, and this used to be awesome for that. Now find Google reviews more reliable, unfortunately."
     

  • "I love Beanhunter, and add reviews but find it incredibly frustrating not being able to add new cafes as the app crashes. I contacted the team to add a new cafe but never got anywhere. It also looks like they bought a “cafes in Australia” and uploaded this to fill out their directory. Too many duplicates, the inability to merge these, and questionable places (Mobil petrol station for coffee?!). Used to be fantastic. Limping by now."
     

  • "This used to be (and in some ways still is) my go-to for finding great coffee when in an unknown area.. but there are so many places missing, it’s impossible to add new cafes due to the app crashing, and the ratings are unreliable a lot of the time (bad coffee rated highly, good coffee missing or barely rated)."
     

  • "I still tend to use this for a quick view of my area, but more often than not find myself falling back on Google maps or similar alternatives instead. Which is disappointing, to say the least."
     

Based on reviews, users still want to use the app but has become unreliable. Common pain points by users are reviews becoming unreliable and adding coffee shops is difficult.

Competitive Analysis

Discovery

​It’s been a while since the app has been updated. The market for coffee and coffee shops has drastically changed with new characteristics of what consumers are looking for. Before anything else, I wanted to know if the redesign is necessary for the users and the market.

Similar Sites

googlemaps.jpg
Google Maps
  • 👍 Free and has a dedicated filter search for coffee shops.

  • 👍 A very thorough list of coffee shops.

  • ❌ The map can get busy with other features or stores.

460x0w-2.jpg
​Cups
  • 👍 Allows users to order coffee and get discounts.

  • ❌ No reviews or user interaction.

  • ❌ All coffee shops need to provide some form of discount.

460x0w1.jpg
​Th3rdwave
  • 👍 Detailed information on the beans and facilities of the coffee shop.

  • 👍 Reward system for users by giving points that can be used to purchase coffee.

  • ❌ App navigation is confusing.

The competitors have their own strengths and weakness. The coffee-focused apps have outdated design and confusing user flow. Knowing these, we can avoid these problems in updating Beanhunter.

User Persona

Define

With the user research at hand, I created a user persona based on research from the market and user. This will be my point of reference to create features and goals that will solve the problems of the users.

Persona.jpg

Point of View Statement

  • Diane needs to discover coffee shops in an area.

  • She’s hoping to get insights from other people about coffee shops.

  • Diane also wants to share about the coffee shop.

How Might We Questions

  • How can we help Diane discover coffee shops?

  • How can we help Diane connect with other coffee enthusiasts and get reliable reviews?

  • How can we help Diane discover coffee beans and roasters in an area?

Brainstorm

Ideate

With the user research at hand, I created a user persona based on research from the market and user.

Beanhunter_20220325_Brainstorm_01.png

Goals

Ideate

Business Goals

  • Create a clean and user-friendly design for the app.

  • Help users discover new coffee shops and roaster.

  • Keep users engaged.

User Goals

  • To help Diane discover coffee shops and roasters.

  • For Diane to share her thoughts about a coffee shop that they’ve visited.

  • For Diane to get recommendations of coffee shops and roasters.

User Stories

Ideate
  • As a coffee enthusiast who likes to explore coffee shops, I want to find coffee shops with reviews, so that I can support and try independent coffee shops.

  • As a coffee enthusiast, I want to share about a coffee shop/coffee roasters in an area, so that people learn about the place.

Design

Mid Fidelity

Created mid fidelity wireframes from the sketches. Testing out if the screens solves the user goals and the user needs. Several iterations was made from the initial sketches. 

Usability Testing

Test

Tested the app with a user who enjoys coffee and someone who regularly tries coffee when outside.  I was able to get some feedback which lead me to create changes in the design in low fidelity before implementing high fidelity designs.

  • Identifying which is a coffee shop and roaster on the map. The initial wireframe didn't have it.

  • The direction to the coffee was slightly difficult to find.

Design

Created low fidelity wireframes from the sketches. Testing out if the screens solves the user goals and the user needs. Several iterations was made from the initial sketches. 

High Fidelity Wireframes

Design Decisions

After branding and solving the previous issues with the first test, I created a high-fidelity wireframe implementing the brand elements.

Old login
IMG_8527.PNG
New login
LoginPage_02.jpg

​Previous Design

  • Facebook login is separated from the lower part of the screen. 

  • There is not enough contrast to distinguish between the sign up and log in form. 

Updated Design

  • The login page has been updated with better contrast on the input field.

  • Other methods of login have been added with 3 primary social media platforms.​

Old Feed
IMG_8522.PNG
New feed
ActivityFeed_04.jpg

​Previous Design

  • The feed page lacked highlighting certain parts of the feed. From numbers that aren't relevant to a visual element that lacked engagement.

  • Users couldn't gauge if the review is good or bad right away.

Updated Design

  • Created better contrast with the background, highlighting the review cards.

  • Added a star rating for easier understanding of the review.

  • Added like button the card for engagement.

Old Details Screen
IMG_8526.PNG
New Details Screen
CoffeeShopView_01.jpg

​Previous Design

  • The number on the reviews felt out of place. As seen above, the number 8 didn't signify what it meant since the app didn't have any star rating system. 

  • Users couldn't gauge if the review is good or bad right away.

Updated Design

  • Highlighted the coffee and beans button with icons added beside the store name.

  • User can add the coffee to a list to save for later reference.

LeaveReview_01.jpg
LeaveReview_02.jpg
UserReview_01.jpg
CoffeeShopView_Reviews_01.jpg
MapView_01.jpg
Direction_01.jpg

Reflection

Takeaway

I've updated the design that was used a lot in the app. The focus was on clear features and user flow. At the same time, have the key features accessible right away. It was also important to differentiate it from competitors by having a focused feature. Contrast was necessary creating hierarchy was important.

Next Steps

There are still some features that I would like to implement to make it a fully functioning prototype. I'll be iterating over the designs and testing them to more users.

A personal project.