Skipiit

CASE STUDY

UI/UX, User Research, Visual Design

Overview

THE CLIENT

Skipiit, formerly known as Blackbook prior to the company’s rebranding, is a hospitality based startup aimed at simplifying the drink ordering process at high volume bars, restaurants, and clubs. Skipiit is one of the first apps of its kind to directly target drink ordering rather than food, and differentiates itself by streamlining the ordering process rather than acting as a delivery service with a courier or delivery person.

THE CHALLENGE

Redesign Skipiit’s user interface in a way that adheres to modern iOS Human Interface Guidelines
Identify usability roadblocks that deter first time users from becoming habitual users
Establish a user flow that eliminates ambiguity, promotes sales, and allows for execution without user frustration

THE GOAL

Increase user retention and promote habitual usage by redesigning the app’s user interface, while effectively making the ordering process as clear as it can be, for all users involved.

OUTCOMe

Hi-fidelity application mockups that solve the app’s most glaring usability issues while attracting new users.

LENGTH OF PROJECT

3 months

ROLE

UI/UX Intern

Research

For the research component of this project, it was important to explore the current landscape of the nightlife industry, as well as any gaps that may exist in the overall customer experience. By effectively identifying the ideal target demographic, the more I could understand how to alleviate their pains and create a more rewarding customer experience.

RESEARCH GOALS

Identify specific demographic of users who frequent bars and nightclubs
Uncover key pain points in the overall customer experience when making orders (whether it be food or drink)
Research user motivations for using ordering applications and reference against pain points in the customer experience

Secondary Research

Market Research

To begin, I conducted extensive market research on alcohol consumerism trends, technology in the service industry, the popularity of food ordering applications, and millennial reliance on technology to justify a three prong answer as to why people are likely to use this application and in what context. My conclusion, from my secondary research alone, is that with a steadily increasing market of on-premise liquor sales, a clear growth trajectory in terms of online food and drink ordering, and a large demographic of millennials (22-38) who regularly drink at bars and nightclubs, there is much room left in the service industry for technological growth and sufficient demand. In addition, there are still many ways in which the ordering process in bars and restaurants can be more closely integrated with technology as premiumization becomes a major trend in 2019.

Competitive Analysis

I then analyzed Skipiit’s most direct competitors in a comparison table below, and created provisional personas based off the data to further identify consumer needs and differentiate the needs of different user groups within the same demographic. The competitive analysis examined what Skipiit’s most direct competition is doing and what changes the company can make that will set it apart from its competition in a significant way to attract customers and leverage its position to potential sponsors. Reviews from the app store were also taken into consideration.

My competitive analysis produced the following insights:

Users want to use an app to order drinks but often find the menu layouts confusing and unclear
Users are unclear where they should pick up their drinks after ordering
Users most value the convenience of ordering and paying through an app, the ability to look through a menu, and lastly, skip the line.

Provisional Personas

From the competitive analysis, I was able to create provisional personas to further organize pain points and identify specific, or potentially overlapping, goals between different subgroups of users within the same demographic.

Primary Research

Qualitative Interviews

Empathizing is a crucial step in the design process, and in this case, the app has two subsets of users to consider: the bartenders using the app to serve drinks (the producers), and the users who use the app to order them (the consumers). While most of my research centered around the consumers, it is essential to survey bartenders in order to hear their pains, work to solve as many of them in-app as possible, and identify where the overlap with consumer pain points may be.

Some unique perspectives bartenders bring are:

Specific workflow pains when it comes to taking orders from guests (helpful when it comes to redesigning the UI for the producer side of the app)
Specific drink combinations and details that impact the drink ordering process that could potentially be overlooked by someone without industry knowledge
Ways in which the app itself inhibits their workflow
Ways the app could improve in order for bartenders to incentivize usage of the app

With my interviews, I followed a Four List Format (Pains, Pleasures, Context, Behaviors), framing an open-ended question around each without directly leading the participant. Here are specific quotes from the bartenders I surveyed:

“It’s frustrating when customers don’t understand the menu, or there is a lack of proper communication between server and customer.”

“Customers will order one drink, and then decide to order one more or something else after I have already begun to prepare the first order. They don’t understand this is something that is generally frowned upon, and really annoying.”

“Sometimes customers will ask me to “surprise them”, or say,”Make me something good,” because they can’t make their own decision or even narrow down a spirit or flavor they like, but as a bartender, I don’t know what their taste palette or tolerance is like, or what they would actually like.”

Interview Findings – Common Problems

String Ordering – Most bartenders indicated they were most frustrated when customers “string ordered” i.e. when customers order one drink at a time versus ordering methodically and purposefully, with similar drinks grouped together.
Customer Indecision – Another pain point bartenders complained of was when customers could not decide what drinks they would like, the quantity they would like, or not being ready to order. Bartenders in high volume establishments have limited time, so every moment spent with a customer at the bar who doesn’t know what they want = equals money lost. In turn, they are less likely to make the drink in a timely manner, may move onto the next patron, and may be less likely to incentivize usage of the app.
Lack of Customer Knowledge – When customers do not know what they want, cannot identify a liquor they like, cannot specify what they are looking for, or try to ask for a “surprise”.
Order Accuracy and Lack of Customer Specificity – Bartenders also noted that many customers do not know the difference between ordering a top shelf liquor and a house liquor, and often become upset if given the most inexpensive kind– a result of a lack of communication and specificity during the ordering process.
Accessibility of Menu – Lastly, not having an available or accessible menu for someone to look at also contributes to confusion and indecision.

Usability Test

After having surveyed the bartenders, it was important to conduct a usability test with the current released version of the app to identify why first time users had not turned into habitual users, and address any issues that may have arose during the assigned task (i.e. ordering a drink). Below were my test specifications.

Scenario: You are hanging out with your friends on U Street and you see a huge crowd of people at the bar. Your friend tells you about an app they’re using called Skipiit that allows you to enter your credit card details and order a drink without having to physically order or wait in line. Instead of fighting the huge crowd at the bar, you would like to use Skipiit to order a beverage instead.

Task

1. Sign up for an account and select which establishment you would like to order from.

2. Order your drink of choice and add a tip.

Test Subjects: Three participants between 22-38

Procedure: The usability test was conducted on an iOS device, participants were asked to speak aloud as they performed the test, and were encouraged to make comments as they went through the assigned tasks while keeping exploration of the overall app to a minimum.

I videotaped this test in order to compile the recurring problems into one video so that they could be played back for future reference.

Usability Test Conclusions

Overall users felt it was a useful and self-explanatory app idea. However, users also felt the aesthetics were boring and outdated, many had difficulty signing up due to the verification email not sending, there were many in-app glitches, complaints about too much text, and that it wasn’t ideal for someone to use while intoxicated. Many users also commented that the menu was confusing and disorganized, and they were unable to fully customize their drink order. While the users were able to accomplish the tasks, it was not without difficulty, with one user even commenting,”There was an obstacle in every step.”

Final Persona

For the final persona, I combined the qualitative research, as well as the market research, I had conducted to form Nick’s persona. Nick is a recent college graduate who works as a consultant in Washington, DC, and enjoys being seen at the trendiest bars and nightclubs in the city. He is the life of the party and can often be found drinking with friends on the weekend. His biggest frustration is having to wait for drinks, search for his wallet while intoxicated, and compete for the bartender’s attention. His highest priorities are to spend as much time partying, interacting with friends, and having fun as possible.

Ideate

During the ideation stage, my priorities were to generate innovative ideas, identify necessary features for the initial MVP, and disrupt our typical assumptions when it comes to ordering drinks at a bar in order to fill any gaps that may presently exist in the market.

STEP 1: CLEARLY IDENTIFY GOALS

Technical Goals

Produce engaging and modern hi-fidelity prototypes that adhere to modern iOS Human Interface Guidelines
Create a linear ordering process to ensure all customization options remain available through the app as they would in person while allowing the user to accomplish the intended task (ordering a drink)
Make menus easily accessible and clear to the user
Identify usability roadblocks unrelated to the app’s design and provide suggestions to developers for improvement

STEP 2: BRAINSTORM

Below I created a task flow based on the task in the usability scenario. I incorporated the various ways in which a person could customize their drink as I felt this was something missing in the app’s original task flow. Lack of customization ultimately led to a poor menu design that a) lacked specificity, b) was ambiguous, c) did not incorporate every single drink option that could be ordered, and d) inhibited bartender flow when it came to complex drink orders.

STEP 3: IDENTIFY MVP FEATURES

Based on business goals, user goals, and technical/usability goals, I created a spreadsheet that outlined necessary features for the initial MVP, features that would be nice to incorporate, and future features that would help improve the application’s overall customer experience, start to finish. The spreadsheet can be viewed HERE.

Information Architecture

Prior to sketching out initial prototype ideas, I create a site map for the app. I felt that having a bird’s eye view of every single piece of information in the app would help when it came to creating app components, establishing an hierarchy of information, and ensuring page layouts remained consistent. As a designer, I feel that any UI should be designed based on the content rather than the other way around in order to promote the app’s longevity.

LOW FIDELITY WIREFRAMES

After establishing a clear hierarchy of information, I began to brainstorm ways in which blocks of information could be visually conveyed by sketching my initial ideas out on paper. These are my initial, low-fidelity wireframes in their barest form.

COMPONENT BRAINSTORMING

Prior to rendering my ideas digitally, I try to brainstorm as many individual component ideas as possible. By doing so, it forces me to think about the content spatially rather than as just a list or another linear option, resulting in more creative solutions. Instead of a bullet list, for example, I would think about doing a drop-down or pop up. The possibilities are endless.

COMPONENT ITERATION

Below I sketched out the component ideas I had for the app’s main navigation. After I narrowed down the options, I went on to digitally render my ideas. I ultimately decided on keeping it as a sticky menu without labels since text headers would be at the top of every page. I also wanted a selected indicator I could potentially animate later on as a micro-interaction.

DISRUPTED ASSUMPTION ALERT: Initially I was leaning towards the hover line above the symbol, but after sending my initial ideas to a few friends in the target demographic, 4 out of 5 respondents mentioned that they found the overline unintuitive, and preferred the underline or dot. This came as a surprise, and served as an important lesson that the choices we make as designers may not always be readily accepted by the intended users.

Design

MEDIUM FIDELITY WIREFRAMES

I tend to treat my initial sketching process as my beginning wireframe, and then build medium fidelity wireframes based on my sketched concepts. To do so helps me spatially organize page content, establish hierarchy, prioritize functionality, and actually begin planning my designs on a grid. It also forces me to be realistic about how much information I can include on any given page.

As a designer, I believe that language is as important to the user experience as the visuals of the user interface, so I try to incorporate phrases, terms, and actual language that I plan on using in the final prototype. Not only does it help me imagine the app actually in use, but it also forces me to justify my design decisions as I go. I am able to see if there are more straightforward and accessible ways to convey a concept and am able to reduce redundancy between selectors. It was also important to me to keep the terminology as close to real life as possible. Bearing in mind that this is not only a consumer oriented application, I wanted to ensure that when the user is away from their phone and they are at a bar ordering drinks as normal, they understand what it means when the bartender asks them,”Would you like to open a tab?” This is to ensure optimal communication between both the producer (bartender) and the consumer (customer) in every circumstance, whether it be real or virtual. Because communication was such a hindrance in the quantitative interviews I conducted with bartenders, I really wanted to stress that the language we, as designers, choose to use is important and we have certain responsibilities to the people that we serve to ensure their digital experience does not negatively affect their real life experience, and vice versa.

INTERACTION DESIGN

During my medium-fidelity wireframing process, I try to plan my micro-interactions as much as possible so I can get a basic flow for how each interaction within the application works. This also helps when I go on to animate my hi-fidelity prototype later on.

In addition, planning where each interaction leads also allows me to see where the application must automatically jump to a new page when a logic operand is complete or where a ‘back’ button is not necessary, such as the “Progress” pages that only appear once a person has ordered, and once a drink order has been fulfilled by the bartender. These screens then automatically close once the boolean operand is marked as complete, and jump the user back to the menu screen so they may continue to order more drinks.

VISUAL RESEARCH

I put my visual research last so my wireframes are not influenced by superficial design decisions. Once the medium fidelity wireframes are complete, I am then able to focus on creating a cohesive and beautiful interface. What I hoped to gain by creating an inspiration board was inspiration from other dark UI’s in order to narrow down what color palette, out of the pre-existing ideas I had, to use for Skipiit.

COLOR ITERATIONS

Before I settled on a definite color palette, I wanted to demo the initial dark UI ideas I had as well as their compatibility with the neon blue button color that was a nonnegotiable accent color with the client. Given the fact that the basic page layouts had already been pre-determined by the medium fidelity wireframes, the next step was to figure out which color scheme would work best and where my ideas deviated from expectations.

Round 1.0 (Initial Ideas)

My initial design had a black background with dark grey tones (center screen), but I decided to experiment with a purple and a blue tinted background. I ended up feeling that the blue tinted background was a better fit as I felt that the black background lacked youthfulness and warmth. In addition, 4/4 respondents preferred the blue background as well.

ROUND 2.0 (REFINEMENT)

After settling on a dark theme with blue undertones to further compliment the neon turquoise accent color after my initial iteration test, I added a gradient because the dark blue with the neon accents felt a bit extreme on the eyes. I wanted a visual experience that was subtle and enjoyable, especially when being used at night. However, I also wanted it to feel like a luxury experience, with minimally jarring colors.

GREYSCALE CHECK

While I was almost certain I would be going with the gradient dark blue background, I wanted to see how each option would look in greyscale before making a final decision. Accessibility is something that is important to me as a designer (about 4.5% of the entire population is colorblind), and I wanted to ensure that the hierarchy of information was not lost when color was introduced. In addition, I wanted to ensure the gradient background did not impact the visibility of the login fields. I was particularly surprised to see that once I changed the colors of the social connect buttons, it actually improved visibility in grayscale, versus the semi-gradient blue color I opted for the initial Facebook button.

Color Palette

A nonnegotiable parameter as set by the client, I had little room to flex in terms of picking the accent color. Most of the colors I chose focused around the neon turquoise shade, including the background color and separating containers.

TYPOGRAPHY

I decided to go with Lato because I wanted the app to feel as clean, uncluttered, and non-distracting as possible. When users are going out to have a fun time with friends, one would make an assumption that their night is probably filled with enough distractions that, when they are intoxicated and using the app to order, the text options should be as clear and concise as possible. The CEO also commented in his initial interview that he would like the feel of the app to be,”Simple, simple, simple.” Lato was a nice intermediary between simplicity and modernity.

FINAL DESIGN

Analysis

BEFORE AND AFTER

In the images below, both the before and after screens are shown side by side. On the left are Skipiit’s original designs, and on the right are the after versions.

DRINK ORDERING FLOW

One of the most common complaints from the usability test was that the app contained too much text, and that it was confusing to use, especially when intoxicated. Start to finish, it was important to keep the ordering sequence as simple as possible, with clear text directions at every step, while still giving users the freedom to fully customize their drink orders. I wanted there to be no ambiguity when the user went to complete their task (ordering a drink).

I also wanted the ordering process to mimic real life as closely as possible, which included adding drinks to the user’s pre-existing tab. The user then either a) chooses to close the tab themselves, or b) the app does it automatically when the closing time of the bar is reached. This encourages the user to keep purchasing drinks throughout the night because they do not have to waste time re-opening a tab, while ensuring bartenders are tipped out properly for forgotten tabs, much in the same way that open tabs are dealt with at the end of the night at bars in real life.

UNEXPECTED CHALLENGES

The one major challenge I faced when it came to creating a truly self guided user experience was that the number of steps (i.e. button taps) within the app needed to be increased in order to enhance clarity. However, instead of spending three minutes searching one page for a simple direction, the user is guided through the process within a matter of seconds. My goal was to reallocate the amount of time spent searching for cues to the next step, to making each step of the process as easy and fun as it could be for the user. The three step process was something I chose to consciously abandon in order to craft a more fulfilling user experience.

final thoughts

While there is still more that can be done in terms of further research, future features, and implementation of the design, I feel as though I have done a solid job at redefining the app’s visual identity to adhere to modern iOS human interface guidelines while addressing the app’s most glaring usability problems. Lastly, I also feel that I worked within bounds to ethically promote product sales through psychoanalysis of user motivations while ordering drinks at a bar, in a way that benefits the consumer experience and producer profits.

Next Steps...

Some items I could see myself tackling in the future for this project are…

ANIMATION

I would like to have had the time to animate my design using InVision so stakeholders could interact with and view the effectiveness of the app’s redesign, while exploring micro-interactions within the app. Now that the basic structure of the app has been designed, as I a designer, I am now free to work on enhancing each digital interaction within the app rather than focusing more broadly on the app’s entire interface.

a/B TESTING

The research never really ends with project, and my designs can only benefit through future A/B testing and validation. A/B testing can also assist in uncovering features users would like to see in the future, as well as provide numerical points of data that can then be referenced in order to improve the app’s usability.

TABLET UI

Since this project focused primarily on the consumer UI, I would like more time to redesign the producer UI in order for it to be a more enjoyable experience for the bartenders using the app. The bartenders also use tablets whereas the consumers only see a mobile UI, so it would be a welcome challenge to explore the freedoms and restrictions that come with a tablet optimized application.

FUTURE FEATURES

Some future features I would also like to incorporate are:

Venmo Integration
Drink recommendation feature through a personalized questionnaire
Search feature
Uber integration
ID-Verification
In-app blog with nightlife recommendations in every major city