LineUp App: gamification of going out. A UX Case study into the world of bar hopping.

Image for post
Image for post

Overview

LineUp is a crowdsourcing app that relies on it users to report information about lines to popular venues in NYC. With some amount of users who do use the app, the conversion of users to actually report information is very low. My team was presented with a task to better understand a psyche of LineUp user, test out potential solutions and re-design an interface that will make it easy and fun to report information that other users rely on.

Users & Audience

The users who mostly use the app are twenty-somethings who live in 5 boroughs of New York, who like to go out every week to popular spots around the city.

Roles & Responsibilities

Meet the LineUp UX Team:

Me (Sergey Bestuzhev — UX Design, UI Design & Presentation Design), Ash Burke (UX/UI Design and Research) and Christiaan Montgomery (UX Research/Design and Point of Contact).

Overall, the work was mostly split between 3 of us, with exception of Christiaan (yes, with 2 A’s), who was a point of contact with the client and pretty much a face of our team.

We didn’t really assign any specific roles to each of us and we all continuously worked together on most of the steps as a UX/UI Team, with every decision that related to design and flow was voted on to be approved by all 3 of us in order to proceed. We found out that doing it good ol’ democracy way, was extremely helpful for us to proceed faster with work, without arguments along the way during our very tight deadline.

Scope & Constraints

This was a 3 weeks sprint that ran from very late November 2019 to mid December of 2019 as well. The constraints of a sprint as you probably know are very tight deadlines and everything has to be delivered to the client on last day in order to proceed to development.

Research & Synthesis

To start off the project, me and my team did a short internal Heuristic Evaluation of the app to see where are the problem areas can be in the current version of the app. Along the way we found that you cannot accesses a Venue Screen from Map Screen and can only see very basic information about it.

With that in mind, we have decided that we need to interview current LineUp users. While preparing a user interview script, we realized that we need to also interview users who have never seen the app before. Through some internal discussions, we came to conclusion that we should interview people who have used apps or sites that are crowdsourced, and never show them the LineUp. Why crowdsourcing sites and apps? Because LineUp app currently is basically a crowdsourcing app, that collects information from it users that is displayed for other users to see.

So here are 2 things that we did: created a Screener Survey for users of the crowdsourcing sites, as well as sent out emails (provided by the client) to users who agreed to participate in the User Interviews about the current version of the LineUp app.

Here is a short visual overview of what have happened during this stage of the process:

Image for post
Image for post

After we interviewed all of the users in both groups, we have invited Founder/CEO Ankita (Niki) Agrawal of the LineUp app to participate in the Affinity Mapping exercise. Because we have interviewed 2 different groups of people, we had to do 2 different Affinity Maps and the client participated in one about crowdsourcing sites and websites. She was a fast learner of the process and after explaining what are we doing, she jumped head first to help to come up with final “I” Statements that have been used for the creation of the Persona.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
CEO of LineUp and my team are working on Affinity Mapping exercise

Interestingly enough, when we did the Affinity Map for the current user of the app, we realized that “I” Statements are mostly shared across both groups. Not only does the Lineup user exhibit these insights, but if the LineUp app were to grow to explore other areas besides bars/nightclubs, these insights would still hold true for those users as well.

Image for post
Image for post
“I” Statements from 2 Affinity Maps

Using “I” Statements, me and my team started to work on the Persona that combined the traits of both Crowdsourcing User and Current User of the LineUp app.

Image for post
Image for post
Persona of the LineUp app

Meet Michael who is a young professional and goes out to bars and clubs in the city. He would like have a reliable crowdsourcing app that can provide him with information on where to fo and how long the lines might be at the popular venues. His Pain Points are that he has no incentive to engage with the crowdsourcing app and on the current LineUp app doesn’t fully get how the time reporting works (this data came from user interviews with current users, who were confused how exactly the wait time is calculated). Because he uses other crowdsourcing apps and sites, he uses rewards that allows him to save money. With that in mind, we have worked on creating a User Journey for Michael on his evening out.

Image for post
Image for post
User Journey Map for Michael

With all the data combined, we have created a final Problem Statement:

Image for post
Image for post
Problem Statement

Design Opportunities for next version of the app:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Insights gathered from the LineUp user interviews

Designing an Engaging Interface for LineUp Users:

With everything we gathered and created so far, we decided that we need to use a MoSCoW Map to prioritize features that we should be working on.

Image for post
Image for post
Image for post
Image for post
Left: Original MoSCoW Map on whiteboard. Right: Much easier to read summary for final presentation.

The “Must” category represents features that will be included in the re-designed app. The first 5 that are bolded, are new features, that current version does not have.

The “Should” category represents features that will be added if there is enough time.

The “Could” category represents features that fit in to the app re-design, but probably will not make it in to the first iteration.

Finally, the “Won’t” category represents features that will not make it in to the first iteration of the redesign but should be considered at some point in the future.

From here we moved to the Design Phase.

Image for post
Image for post

Our Design phase consisted of 3 parts:

One: Design Ideation where we worked on Home Screen, Rewards, Map, Venue and Additional Features using a pen and paper to create Lo-Fi sketches.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Two: After creating Lo-Fi sketches and the data we collected, we created black and white Mid-Fi clickable prototypes that we then tested on 5 different users who have never seen the app before. The Mid-Fi prototype helped us test the functionality of the redesigned app.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Left: Home Screen. Center: Map Screen. Right: when a location is tapped it shows the venue info.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Left: Venue Screen. Center: Rewards Screen. Right: when user reports a screen, user prompted with a screen to spin a wheel for a chance to win free drink.

Here are the User Testing findings from the Mid-Fi prototype:

Image for post
Image for post
Image for post
Image for post
Left: Task 1. Right: Report on Task 1.
Image for post
Image for post
Image for post
Image for post
Left: Task 2. Right: Report on Task 2.

With the data collected from Mid-Fi usability testing, we applied changes and created HI-Fi prototypes with colors and style guides applied to whole design of the app. From there we went through a whole new round of 5 user interviews and collected as much data possible for next steps. During our testing with users, we uncovered that using the words Wait Time was still confusing to users and decided to switch it to concept of Line Length instead across the whole app (first screen below).

Image for post
Image for post
Image for post
Image for post
Left: Report Pop-up Screen Differences. Right: My Rewards Screen Differences.

During our user testing on mid-fi prototypes, some of the users said this:

User 1 — “What if I wanted to build up a few drinks?”

User 2 — “ I would expect my drink to be at the bar I have just reported at.”

So with that in mind we went into designing current layout for the app. The Reward Information is no longer a repetitive image that users see every time when they look at this particular section of the app, but now rather is a popup that should show that information when tapped on the Question Mark Icon. Your Next reward is still grayed out , but takes less of the real estate and does not have information for bar location. We now also have a “Reward Wallet” where users collect their rewards that they can redeem at the bars that participate in the program.

Image for post
Image for post
Image for post
Image for post
Left: Home Screen Differences. Right: Map Screen Differences.

For the Home Screen during our Mid-Fi user testing we realized that buttons are still small and still not visible and not size that should meet Accessibility standards. Both Filter and Icons, as well as Buttons had to be enlarged to meet those said standards. We have also created a reminder for users to report the Line Length for a chance to get a free drink at any participating venues. On our new Map Screen, we left the martini glass icon idea, but now we’ve added a line (Status Meter) under a martini glass that indicates the Length of the line, from No Line all the way to the Long Line. The reason why we did it was to show the Line Length and for some users who may be colorblind that cannot see some of the colors and now will be at least understand how big the lines are by just seeing a part of the Status Meter.

Image for post
Image for post
Image for post
Image for post
Hi-Fi Usability Report Findings

On Dec 13 2019, we have presented our report to the client of LineUp app.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Virtual Walkthrough of the new LineUp app

I must say, she was very ecstatic to see what have we came up with, even though we were updating her during our sprint with our work progress. With that said, she have also promised that the new design and the process will be implemented in the next version of the app. We have submitted the Final Deliverables to the client that included: Final Mock-up with Functional Annotations that included the Style Guide, Feature Prioritization Map, “I” Statements, User Journey and User Persona/Problem Statement, all Usability Tests results and Final Presentation PDF as well.

Image for post
Image for post
Next steps in this project

Leanings:

Improving an app is a continuous process. Technology goes ahead every day, as well as how we get/read/process information via outlets that we use on daily or at least occasionally. Working with massive data we collected during this project, we learned to understand how the app works and what can be implemented even in the future version of the app after ours.

Image for post
Image for post

“Without continual growth and progress, such words as improvement, achievement, and success have no meaning.” — Benjamin Franklin

Written by

UX Designer with passion for product design and the history of the world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store