DrinkWatch app mockups.

DrinkWatch.

Second year entrepreneurship course. Focused on problem identification, solution development, UI design and business model. The goal was to tackle one of UN's 17 global goals, but with a narrower scope.

Collaborators.

Max Chung
Kaemon Daver
Wang Yui Chan
Victoria Xi

The Project.

This Business and Entrepreneurship group project aimed to develop a business idea addressing one of the UN's 17 global goals, in which we focused on Vancouver's road safety issue: impaired driving. Research revealed that a BAC over 0.04 g/dl significantly increases accident risk. However, factors like drink alcohol concentration, user's sex, weight, and food intake can complicate this standard.

Tools Used.

Figma
Photoshop

My Role.

As the sole visual designer in the group, I was tasked with developing an app mockup that could bring the group’s proposed solution to life. We collectively did research into the problem and developed a theoretical solution and business plan. My primary role in the group as the product designer was to carefully craft a product that could address these concerns efficiently with a strong focus on customer-centric user experience design.

The Process

An overview of the project as a whole.

Process breakdown, from problem identification to team reflection.
       Interface design section is highlighted as this is what this process
       analysis focuses on.

Ideation

Focused on quick usability.

User interviews highlighted the need for quick usability during social outings, so when working on wireframes, I prioritized swift access to essential features—BAC%, sobriety timer, and drink logging—to minimize phone usage.

Initial wireframes with a focus on quick app usage. Home screen
    has a timer as well as a percentage, while additional features are
    all within one click/swipe away.

Initial wireframes with a focus on quick app usage. Home screen has a timer as well as a percentage, while additional features are all within one click/swipe away.

Iterations

Using colour to enhance UX.

Low-fidelity mock-ups explored visual design elements, emphasizing color coding to achieve the team’s end goal. A quick round of user testing validated the effectiveness of clear and purposeful colors for quicker app navigation, which brought about my decision of the “traffic light” colour palette.

3 variations of the interface, ranging from a highly functional
      interface with low visual appeal, to a more expressive use of colour,
      which was almost arbitrary.

3 variations of the interface, ranging from a highly functional interface with low visual appeal, to a more expressive but almost arbitrary use of colour.

Convergence

Combining elements into a final visual style.

Combining the use of colour of my most functional mock-up with some of the visual elements of the more expressive designs allowed for a highly effective interface while still being visually balanced. Choosing the font pairing was the final touch. Using a bold condensed gothic alongside a modern display sans made the design pop, setting a clear hierarchy between visual elements.

Final graphic with a mockup of the different coloured screens on 3
       separate iPhones, as well as the SmartWatch mockup.
SmartWatch mockups showcasing timer screen, BAC percentage screen and quick add screen

The Challenge

Applying user feedback into a different UI.

After a second round of user interviews, the need for a smartwatch option emerged for quicker access without relying on a phone. Adapting the interface for a smaller screen posed a challenge, but effective use of color and a prominent timer aided in communicating necessary information. When it came to user input, simplifying drink logging was addressed with a quick add feature, enabling easy logging from a list of recent drinks with just one touch.

Reflection

What could've been different.

Constructive feedback from the teaching team centered on liability and accuracy concerns. To address these, future iterations would emphasize the app's role as a tracking tool rather than a definitive measure of sobriety. Secondly, potentially incorporating cognitive tasks or game-like activities could enhance accuracy by assessing user reaction times.

Appendix

Some mockups of the final product.

Final mockups of the whole app. Showing not only home screen,
             but also drink input, account settings, all 3 colour screens and
             smartwatch app.