Lyze: the Smarter Breathalyzer for data-driven choices
People not knowing their BAC has a potential for dangerous activities such as drinking with driving. My team of two set out to create a simple to use breathalyzer prototype with an app geared towards using data to educate and leave room for good choices.
Me — UI/UX iOS Designer
Partner — 3D Prototyping, UI Crit
See it in action
This is a short product video that describes all the basic functions of our product. The design has been updated since filming. Check out my process below.
Pre-Research
Drinking And Driving Is On The Rise
There are 29 drunk driving related deaths a day (CDC 2018).
College alcohol related deaths are on the rise (NIAAA 2018) and if students knew the data behind their drunken night, they may be able to call for help before it is too late.
Breathalyzers are Bulky
Many breathalyzers on the market cost $45-300. These costs are high for users in the 21-30 range (our target users).
Their large nature make it hard to fit in someones pocket or purse. It overtly displays the users BAC making it awkward to use in public.
Sketching, Paper Prototype, Testing
SKETCHING – My partner and I began with sketching what a small breathalyzer might look like, including dimensions and call-outs. We included illustrations showing BAC visualizations and messaging.
PROTOTYPING – I then created a cardboard prototype of the breathalyzer to show its small size. After, I sketched four screens (two shown above) for the user to test along with the cardboard prototype.
TESTING – Using three different testers, I evaluated what worked and what did not with both the mobile application and the breathalyzer prototypes. We did this in order to invest less time in changes down the line, which is especially difficult with 3D printing.
Feedback From User Tests
“It’s so tiny I could throw it in my purse or jeans. ”
— User Three, 22, Female
“How do I know when it’s [Lyze] done? And do I charge it?”
— User One, 22, Female
“Yes, I would want someone to great notified if my BAC was toxic”
— User Two, 21, Male
“I really don’t know what a high BAC means over time.”
— User Four, 21, Female
Using the feedback from user tests, I created the wireframes above on Figma. This allowed me to quickly input color and mockup different styles of graphs. After three iterations, from all card style to graphs that failed to initially showcase BAC level consistently, I settled on the high fidelity mockups you see below. Dark mode and light mode were used to allow users different levels of contrast for highest level of accessibility.
Reflecting on some of the UI designs, I felt the experience could be improved.
I focused on the learning aspect, moving from list to swipe-able cards gave way to a more interactive experience. This ideally leads to longer learning and incentive to continue with this as you master the facts. Next, I worked on integrating a social aspect to the data-collected — mostly as a safety precaution.
OLD Learning Screen —> a simple list didn’t allow for longer term learning
NEW Learning Screen —> opens the path for a delightful way to learn
NEW People Screen —> a larger group of friends, pulled from contacts with Lyze
NEW People Screen —> Reaching someone is as easy as tapping
We presented this project in front of a group of our peers and professors. After we received this feedback:
"I was very impressed by the thoughtfulness and detail you put into your project. Every aspect shows that you were carefully considering how the prototypes would deliver on answering design questions and further developing your work. Excellent in all aspects and once of the best I've seen (ever). Can I use this as an example for future students?" - Professor Brock Craft, HCDE