Cheers

BACKGROUND

The Challenge 🎯

My client is seeking assistance in bringing their startup idea into fruition. The goal of this project is to visualize their idea through designing a POS (Point-of-Sale) system, demonstrating the solution through an interactive prototype, and ending with a pitch to the investors for funding.

DESIGN PROCESS

Research & Define

🔸 Stakeholders interview

🔸 Secondary research

🔸 Requirement analysis

🔸 Use cases & user flow

Stakeholders Interview 📝

As a team of two, my teammate and I set up meetings with our client to establish the direction of the desired product they would like to see. During our discussion, we determined the following design goals for the product:

1. Client emphasized on ONLY designing the user's interface portion of the application.
2. The solution MUST visualize the streamling of drink purchase and social share aspects.
3. Client stated extensive user and marketing research has been conducted on their end, and would like us to EXCLUSIVELY utilize their data in our design solution.
4. Design the POS system based on the user flow diagram provided by our client, per their understanding of the functionality and business process between bars and users.

Secondary Research 🔍

My partner and I decided to conduct secondary research to back up our ideation direction. We compared several popular food and drinks POS applications, such as Doordash, Ritual, Starbucks and McDonald's to gain a better understanding of the user flow, pros and cons of its design elements and the overall structure of a POS system (focusing on the user's end of experience).

Requirement Analysis 🧐

While reviewing the requirements, we noticed some discrepancies and disconnect through our research of other POS systems:

1. The user flow chart provided by our client has no connection with the system's integration between users and enterprise-end on receiving and processing orders.
2. Certain experience flows require additional research, such as real time driver's license verification and other legal obligations with alcohol purchases (ex: only purchase for self).
3. Our client's research data shows the lack of communication and interaction between the customers and bartender, despite the intention of making a seamless purchase experience. Concerns are raised on the users' motivation in using the product due to the lack of interaction with the bartenders.
4. Despite our client requesting only designing the user end's interface, many of the mapping logic and functional design ties closely with the enterprise interface.

We presented the discrepancies to our client, and consulted with clarification in mind on the end goal of this project. Unfortunately our client was insistent on their research data of using Square as the payment portal, and requiring my teammate and I to solely focus on the UI and UX aspect of the interface design. Since our client was adamant on a specific solution, we concluded with a mutual agreement on the final deliverable based on the client's requirement, and moved on to the definition stage.

User stories & User flow 📈

We drafted user stories to define what the product's target customers would do while interacting with the system.

Once the user stories were established, we moved on to build a refined user flow on the customers' perspective when they use Cheers.

Ideate

🔸 Experience breakdown

🔸 Concept Sketches

🔸 Low Fidelity Wireframes

Experience Breakdown 🥊

My partner and I split our work based on specific experience. I was tasked to design the following:

1. Discovery dashboard (Home)
2. Product details (Summary)
3. Bar selection (Interactive map)
4. Referrals
5. Social share - Facebook

Concept Sketches

I often start my ideation process in my handy sketchbook. I find sketching out the solutions helps organize my ideas better, and I can erase or cross-out anything if I change my mind.

Low Fidelity Wireframes

Once I have solidified the art direction of my design, I translated the sketches into low fidelity wireframes in Figma. I kept the design visually simple with minimalistic style when I presented the solution to the client.

Prototype

🔸 Branding, Logo & typography

🔸 High Fidelity Prototype

Branding, logo & typography

High Fidelity Prototype

Once my client approved the design direction of the skeleton structure from the wireframes, I dove into constructing the hi-fi version of the product solution. I also spent some time conducting secondary research on the different types of bars and spirits, brands, and cocktail recipes to solidify the authenticity of an actual alcoholic beverage POS system.

Discovery Dashboard

Design solution in numerical order:

1

Visible location in top section, indicating the user's current location.

2

Discovery search will take users to specific type of alcohol for drink order selection.

3

Ad banners for special promotions and member referrals.

4

Ad banners for partnerships and sponsored spirit brands with cocktail suggestions. Users can order curated cocktail directly from the banner.

5

Recent orders section, where the user can see the list of recent orders, and quick add the previously customized order to checkout.

6

Bar shelf consists of the user's favorite drinks saved in the system. Option to quick order is available.

7

Bars nearby indicating the bar type, ratings, pricing and distance from the user's current location.

Product details (drink summary)

Design solution in numerical order:

1

After careful consideration, I opted for a modal screen pop up for the drink summary screen. Users would feel the ease of control switching between this screen and menus or discovery dashboard.

2

Includes the drink photo, name, and ingredient breakdown and pricing of the beverage.

3

User can choose their option of spirit for customization. The hot icon indicates the sponsored brands for promotional purposes.

4

User can further customize their drink by removing ingredients they don't want. Since most cocktail recipes have a standard list of ingredients, I went with only removal options to minimize the overwhelming fatigue of customizing the specific amount of ingredients they want in a drink.

5

User can adjust and update the quantity of drinks they want.

6

Once user finishes customizing the order, they can proceed and search for a bar that sells this drink.

Bar search and selection (with interactive map)

Design solution in numerical order:

1

User can search for bars by entering desired address. The user's current location will always be defaulted.

2

An interactive map that can be zoomed in and expanded for display clarity. User can click on the corresponding number related to the search results to check a specific bar listing.

3

User can choose their option of spirit for customization. The hot icon indicates the sponsored brands for promotional purposes.

4

Search results based on entered location address, with details of the name and photo of the bar, price level, ratings, distance from the user etc.

Bar search and selection (with interactive map zoomed in)

Design solution in numerical order:

1

An interactive map that users can zoom in and out to view the exact location of the bars from the search results. When the user clicks on a specific number, it will display the corresponding bar in the minimized search result screens in the bottom.

2

User has the option to slide up and maximize the sub screen in order to view details of other bars from the search results.

3

Search results based on entered location address, with details of the name and photo of the bar, price level, ratings, distance from the user etc.

Referrals

Design solution in numerical order:

1

User can copy link to share via email address and various social media platforms. I included Facebook and Instagram as the most popular option for sharing due to customizable posts.

2

Earning tabs to indicate the points user has accumulated through social shares and confirmed referral invitations.

3

Frequently asked questions section to clarify the referral program and point system.

Social share - Facebook

Design solution from top to bottom order:

1

The image of the drink that the user shares through social media can be customized in the app's settings. It can be selected based on the last drink order or favorite drink.

Presentation & Next Step

Presentation 🖥️

We presented our final solution in stakeholder meeting with our client and their business advisor. With the budget and time constraints, they were impressed with the design solution, and praised the features for looking stunning like an actual product.

View the full clickable prototype (including screens my teammate designed) in the link below:

Next Steps ➡️

• If this project is successfully funded, additional designs will be ideated for the Cheers' user and enterprise end interface.
• Usability test will be conducted to determine if the design solution is working as intended.
• A preference quiz will be designed and implemented during the onboarding process to enhance customizable experience for end-users for curated spirits suggestions.

What I've learned...

Takeaway 🤔

• Designing a POS system is complicated → especially when the many of the process flows involve with a tremendous amount of consideration with the integration between the users and enterprise end interface.
• To further improve user experience, I would design a special request text field in the Drink Summary screen for users to communicate the specifics of drink customization.
• During stakeholder meetings, I disagreed with the client on some of their provided research data and findings → unfortunately due to project requirements, my design partner and I could not conduct additional user research to verify whether we are solving the correct problem for users. This experience has taught me to be more flexible and understanding often we design an experience for the stakeholders more so than the users.
• Working with my partner has been challenging, as we have different design styles. I've learned the importance of effective communication with my teammate on unifying our design, tackling design challenges and hand-offs.

Check out my other case studies

©️ Kuma Design 2021