Closest match competitors: Foursquare and OpenTable
What is Clink'?
Clink’ is a location-based app used to find beverage establishments in a given area with searchable parameters such as price, offered beverages, atmosphere, and even establishment style.
Tools
Figma
InVision
UsabilityHub
My Role
UX Researcher
Interviewer
Test Conductor
UI Designer
My Design Process
1. Project Brief
Objective
The project brief explained that I needed to create a locations-based app and perform the necessary UX and UI practices in order to create my deliverables.
Problem
I had to not only find a need that wasn’t being met by current apps on the market but also research and design an app to successfully fulfill it. I needed to pinpoint weaknesses to exploit, opportunities that existed, and the design that would deliver the functionality of this new app, all from the ground up.
Hypothesis
With all of the location-based finding apps on the market, the options a user has for specifically finding a place to get a drink are numerous but unhelpful. Users should be able to search for a place to go based on the type of drink they want and even the type of atmosphere to have that drink in.
Users want to be able to search for a place to go based on the type of drink they want and even the type of atmosphere to have that drink in, without being inundated with irrelevant options.
App Overview
The purpose of Clink’ is to allow users to search for nearby beverage establishments as well as based on location not nearby, to view an adjustable map with establishment recommendations, to filter search results based on a variety of parameters, and to view the details of the individual establishments.
2. Discovery
Competitive Analysis
The closest competition to Clink’ would be location-based Food & Beverage establishment-finding apps, two of the top on the market being OpenTable and Foursquare. OpenTable’s search and results displays are clean, user-friendly, and informative, but they lack character. Foursquare was cluttered and not user-friendly on larger screens, but provided an excellent idea of using icons for some of the factors users look for most under each establishment.
Interviews
After conducting my Competitive Analysis, I wanted to hear how my idea might be received and if there was indeed a market for a beverage establishment-finding app. I conducted a handful of Interviews with people I had access to. In the future, I would prefer to conduct more interviews and with people of varying demographics.
Questions
How often do you search for a place to go for beverages?
When did you last have to look up an establishment to visit to get a beverage?
What types of beverages might you search to find?
What factors do you consider when choosing a place to get a beverage?
What style of establishments would you be interested in searching?
What’s the largest inconvenience or frustration when you try to search for beverage-establishment options?
How might an app like this be helpful to you?
What app/website do you typically use to search for places to go for beverages?
Results
Knowing menu options and atmosphere is very important to users.
Reviews are less important as many of this target market don’t trust them.
To search by atmosphere, users need suggestions.
Not getting basic operating information from establishments is frustrating.
Users want to be able to find nearby places quickly while on the go.
Implementation
From these testing results, I decided to make Clink’ less focused on popular opinion (reviews) and more focused on tangible factors such as menu offerings and atmosphere. To make these the center of focus, I would need to add them as filterable criteria in the search.
To address the desire to find places nearby and to use Clink’ while on the go, I would include a map element as well.
User Persona
Personas
The target market is people ages 21-40 of all genders, single or partnered, with various interests but particularly people located in urban or suburban areas that enjoy going out for drinks with friends or trying new establishments such as wine bars, coffee shops, etc.
Out of the three User Personas I built, Rebecca is the most representative of the target audience. She is an average young adult, excited and adventurous, who likes to go out with friends and experience new places. In today’s world, there are too many options to remember them all, so Rebecca needs help finding a beverage establishment that not only provides the beverages she wants but also the vibe and atmosphere she’s craving.
3. Wireframing
User Flows Diagram
Low-Fidelity Wireframes
Minimum Viable Product
In order for users to search for establishments at locations of their choosing, I added a Map screen to help visualize specifically what and where locations were available. To help them from being inundated in this search, I created a means to filter as well as to view their search results in either map form or list form, switchable with the click of an icon. To assist in making their decisions as quickly as possible, I wanted to include brief insights into the establishment in the boxes populated by the user’s search. One of these insights should be into what sort of beverages are offered by any given establishment, and this is where I employed Foursquare’s idea of icons by creating beverage icons to show what may be on the menu.
Usability Testing
After drawing up my low-fidelity wireframes, I converted them into mid-fidelity to make it easier to create rapid prototypes and perform usability testing. This helped me confirm if my designs worked well and to see what sort of elements I may be missing.
I tested users’ abilities to see what locations are nearby, to search for a “chill bar,” and to find out the hours for a given establishment.
The results from this testing confirmed that my designs were fairly intuitive and helped flush out a few issues such as the toggles between Map and Listing's screens needed to become icons and the layout of the Search and Locations input boxes being confusing.
Mid-Fidelity Wireframes
Implementing Results
After the Usability Testing, I implemented the feedback and created the mid-fidelity wireframes. I changed the layout of the Search and Location input boxes and began working on a solution to better communicate the switch from Map view to List view. I created icons to allow users to better understand switching from Map and List screens, so the users have options on how they want to view the search results.
4. Design
Palette 1
Palette 2
Mood Boards
Both Palettes/Mood Boards are gender-neutral and calm while keeping a good handle on being trendy. My app’s target audience is 21+ year-olds, primarily based in metropolitan areas. The ties to the fun but classy Art-Deco and nostalgic vibes in Palette 1 would draw in this audience. At the same time, the more light-hearted, summery yet rustic feeling of Palette 2 provides a more relaxed vibe. The sophistication and flexibility of Palette 1 are more in line with the target audience and for that reason believed it was the better choice of the two.
Style 1
Style 2
Preference Testing
After deciding on a color palette and mood board, I created two different versions of the login screen to perform preference testing. I tested 26 people, all representative of the target audience, and received an 82% preference for Style 1.
Style Guide
Clink’s style is sophisticated yet fun with art-deco elements and a Great Gatsby feel. The colors are rich, deep teal, and cranberry to represent the decadence of the art-deco era. There are coordinating light versions of these colors to provide contrast and allow the app to not be overruled with deep tones.
Icons are on the bolder side, completely filled-in but for accent details, using minimal shapes.
The text is descriptive but short and to the point, using as few words as possible to get the point across and to support the purpose of the app in helping users make quick decisions.
High-Fidelity Wireframes
Iteration 1
My original iteration of the high-fidelity wireframes showed clean and crisp Home and List screens but gaudy and clunky styling on the Filter and Establishment screens. At this point, I conducted User Preference Testing which showed me that the red background with white dropdown boxes wasn’t intuitive and was unpleasant to look at. I fixed these during the design revamp, creating the final look of the product in iteration 2.
Iteration 2
As this project was done for a boot camp course, I had much more to learn and grow after completing this design. I went on to finish the course and came back to update my project with my new knowledge, The result of which is this current version.
I made the screens easier to read by changing the colors that were assigned to which elements. I removed box outlines, added new UI elements such as the Price slider bar, and edited the pop-up on the Map screen to make the screens feel less clunky and more modern, adjusting the layout to follow user viewing patterns.
See below.
Final Product
5. Review
iPad Establishment Screen
Challenges
The first large challenge occurred during Usability Testing, where I learned that the chosen UI elements made it difficult to understand how to use the Search and Location bars as well as navigate between Map and List screens. I also was having a hard time distributing colors appropriately throughout the app. I did further research to look into pleasant color pairings that still achieved my Gatsby-inspired look and then proceeded with a Preference Test which helped me get out of my own head and hear other opinions.
The other major challenge I faced was in working with limited knowledge at the beginning. This project was started towards the beginning of my boot camp course and therefore I wasn’t yet practiced enough to come out with a professional-looking product. After further research and practice, I came back to this project and applied my new knowledge of design principles and UI elements.
Desktop Map Screen
Takeaways
The competitive analysis helped create a large part of the framework of the design. However, it was the Interviews, Usability Testing, and Preference Testing that were invaluable in discovering what specific needs I was working to meet and in creating a product that not only garnered interest but also worked optimally.
What's Next
If given more time for this project and the necessary resources, I imagine the next iteration of Clink’ to create more user buy-in. I would like to add features allowing users to leave in-app reviews and develop a social/game aspect. This would be employed so users can earn badges through participation, set a favorites list, and even make reservations directly through the app, similar to others on the market.