LINEHOP

The end to end process of UX Design

Impact & Results: Creating an app to solution for long lines - I created this top to bottom design. This included planning a 4 - week sprint, defined the problem, used design thinking skills to solution, conducted several in-person interviews and competitive research, designed brand guidelines, user flows, personas, moodboards, wirframes, prototypes, and lo-hi fi's. 

The problem: Government Centres and Events are not able to accomodate population increase, leading to frustrated people, missed opportunities and lower business returns because lines reached capacity. 

The solution: Create an app that allows users to book their spot in line before arriving to an event. 

My role: I was the only UX Designer, Researcher, Ideator, Strategist and carried out the top to bottom process. This was a 4 week project assigned to us as  students of Bitmaker (now General Assembly). 

Tools Used: Principal (Animations) InVision (Prototypes), Sketch (Lo-Hi Fi's, Brand guidelines, Personas), Illustrator (Icons), Excel (Sprint Plans)

WHY do we need another app?

• Nearly one million immigrants will be coming to Canada over the next three years, and tens of thousands of them will moving to Toronto — is the city ready for the influx in our population?
• We can find long lines in immigration centres, service ontarios, driving centres, doctor's offices and emergency centres.  We can also find them for more trendy, pop-culture reasons such as japanese cheesecake store openings or Kendrick Lamar pop-up stores.
• Problem: We are not always able to accommodate the volume of people interested in events because of long wait lines. 

HOW can we solve long lines?

• Design Thinking: Since I wanted to better understand the Torontonians experiences towards lines and waiting, I decided to use McMillian's study and chose in-person, qualitative user interviews as my method of primary resarch.
• Here you can find responses to the user interviews, which I then categorized by similarities, resulting in two primary user personas (below)
• So why do people hate long lines? I hypothesized that people hated lines because of their nature to be instantly gratified. I was wrong. 

USER RESEARCH

After conducting several qualitative interviews,  it turns out the actual pain points were:  

• Standing in line is, simply put, a poor experience (ex. forced to stand in bad weather, uncomfortable to stand alone, or in one spot)
• Standing in line made people feel guilty and uncertain about wasting time (ex. "I could have done my laundry in this time" or "What if this isn't worth the wait?")
  

PERSONA #1

The guilt of wasting time was important to Peter. 

He would rather miss out on a rare experience than lose more than 30 minutes of his day.

Peter the Planner prioritized Time more than the Experience.

PERSONA #2

The guilt of missing out on an experience was important to Valerie. 

She would spend more time waiting in line if she felt the experience was worth it. 

Valerience prioritized Experience over Time

WHAT new solutions can we create?

BRAINSTORMING & USER FLOW

After a brainstorming session, I found there were many solutions that could be used to defeat long lines. However, since the project required a digital product, I created a system of virtual booking as the solution.  Virtual booking saves users a plethora of time by allowing users to book ahead for a service centre, a cinema, restaurants, or events.

Thus creating "LineHop" - LineHop is a mobile application to help you book a spot in line remotely, be it within the comfort of your own home, on the way to an event or while looking for something to do downtown.

Key Challenge #1: Initially I pictured users seeing an event they were interested, and the system would book them online based on their current location and their ETA. A key challenge I ran into was that I did not know how users were traveling (car, bus, bike) which would result in a more complex system and a vigorous user flow. I decided to simplify it by allowing the user to set an arrival time and then get a personalized countdown.

Key Challenge #2: Another key challenge I ran into during the project was how to calculate if users were running late or had to cancel.  User feedback led me to add an "I'm late" button to the system so users could be moved to a later spot in line. Others in line would receive a notification and accept if they wanted to be bumped to an earlier line time, as requested by users during the follow - up user interviews. 

2. Allow the user to choose a time in advance so they could have control to plan out their day accordingly.

B. The persona that valued experience over time:

1. The opportunity for the user to choose interests, and get suggestions 

USER INTERFACE DESIGN

The voice and tone for LineHop is supposed to be light, bouncy, and sound like the friend "who works for the event or restaurant and is helping you skip the line". This helps make the user feel like a VIP, while also feeling homey and tech-savvy. 

MOODBOARD

The moodboard helped me brainstorm colors, shapes and menu layouts that were user friendly, trendy and common in apps with similar industries.  I found that gradients are commonly used in apps that recreate movement (ex. temperature apps or flight booking apps). The app needed to reflect the on-the-move, dynamic experience that the user would have after using Linehop. Gradients and swift animation provided this depth and charisma to each screen, leaving the user excited and engaged.

MOODBOARD RESULTS

Red was the inital color of Linehop's brand, but it came across too strong and robbed the fun, bouncy tone of the brand.  A dark sunset orange communicated the brand's warm, energetic tone with more clarity. It is used at the top of the gradient, while purple is used at the bottom of the gradient. Purple mixed the energies of red and blue, which convey boldness and trustworthiness. Purple is a trending color in tech because it is gender neutral, fun and dependable. 

The curved overlay attribute is a trend that I found frequent in android material design. It fit with the curve of the logo and added to the fluidity and character of the app. Fluidity is most important to the user during onboarding, which is where the curved overlay is primarily used. Originally, it was also displayed on the app's home screen, but as you can see in the "Main Menu" image above, the curve was changed to a rectangle gradient to allow for a cleaner look that utilized space well.  

During the competitive analysis, I was inspired by how welcoming others in the industry made their apps. MeetUp and Eventbrite had colorful, interactive apps that captured a similar tone as LineHops- light and bouncy- by having the user select interests that bounced around the page when you touched them (Eventbrite), or having the welcome screen be underlayed with a video (MeetUp). I expanded further on these ideas by having the overlay play during the entire onboarding process. The video helped the user remember the problem and feel empathetically towards the people in the long line. The onboarding's semi-circle shape is caried through the app and is part of the LineHop branding, and the slide in transitions provide a smooth feel to an otherwise interactive onboarding process. 

The video is taken from Blog TO's post about Kendrick Lamar's pop up shop in Toronto.