2024
Role
UI/UX designer
Services
Website design
iOS app design
Collaborators
Software Developer
Digital Marketer
Yara
Imagine you bought a vape with cool features for connecting to your phone and customizing the device, but it takes forever to figure out how to use the app. Yara devices need an easier way to help users connect via Bluetooth and navigate the app.
Problem
For our customers, it wasn't just about buying a disposable vape; it became a roadblock leading to frustration, limited choices, and a disconnected experience. The prominence of the "connect to Bluetooth" feature in the app was affecting our key business metrics—high bounce rates and low conversions.
Solution
Our goal is to reduce the learning curve for the market's first vape product that connects to Bluetooth, enhance the brand's aesthetics, and enable users to easily utilize its features to drive tangible business success.
User Research
The first step was to identify the underlying user experience challenges that were affecting our app's performance. We aimed to analyze user behavior and sentiments to pinpoint the specific pain points that led to user frustration.
We utilized a range of user research methods, such as user interviews, usability testing, field studies, and consumer feedback, to grasp users' motivations, pain points, and expectations.
Users expressed frustration with the intrusive nature of the pairing process. To connect the device with the app, users had to navigate to the home page, enter a website, and click the "launch web app" button. 90% of users were unaware of this lengthy process and assumed the app couldn't be connected.
Ununited layout tab buttons
When users first open the app without successfully pairing the device, they see four tabs indicating different features. However, after navigating through the actual "connecting page", they encounter three tags with different names, which can lead to confusion.
Lack of visual indication and dynamism
Through user testing and consumer feedback, users attempted to change devices but found no way other than returning to the home page and reconnecting again. Most users were unaware of the delete option, which required swiping left to remove the current device. Additionally, users commented that the dull black and blue colors lacked vibrancy.
Designing A Solution
How might we simplify the Bluetooth connection process to enable users to easily access and use their device's features?
At the end of the discovery phase, we held a meeting with stakeholders using "How Might We" questions to frame our insights as opportunities and to innovate on the problems identified during user research. The meeting involved key stakeholders, including developers, marketers, and myself.
Ideating
We explored various design iterations by creating wireframes to visualize the redesigned layout, focusing on addressing the specific issues uncovered from user research and collecting early feedback.
Simplify the connection process by replacing the website visit with a "one-step click" button to minimize cognitive load.
Revamp the tab menu into a linear process that displays essential features after Bluetooth connection, removing inactive options to reduce bounce rates.
Implement a "name the device" feature to enhance usability when multiple devices are detected nearby, allowing users to customize names for improved satisfaction.
Usability testing insights
Following ideation, where we translated insights into wireframes and prototypes, our team took a crucial step forward by conducting usability testing. This phase enabled us to gather feedback on the redesigned elements.
Challenge: Users often stop after typing their name, unsure of how to proceed to the next step. They sometimes accidentally click the "Go" button on the keyboard before they are ready to name the device.
Solution: Add a "Save" button next to the device name to confirm the action, ensuring users are fully prepared to move to the next step after clicking "Go" on the keyboard.
Make toggle feature clearer
Challenge: Users are confused by the screenlight toggle and the brightness annotation since 0 brightness means the screenlight is off. One user said, “Does screen light mean to change the color? Or choose the color of my vape?”
Solution: To simplify the choice, delete the screenlight toggle option. Instead, display the color selection (party mode) after the user clicks the toggle.
Enhancing visibility of sound-on toggle
Challenge: Users often overlook the sound-on toggle because it's positioned at the edge of the map, and they don't understand the feature without actively trying it.
Solution: Increase the visibility of the toggle background color, make it more prominent on the map by boldening its appearance, and add text and icon indications to highlight the sound on features.
Challenge and Limitations
Navigate compliance guidelines
Developers face a complex landscape of guidelines to ensure compliance, especially with Apple's stringent policy against vape-related apps and limited alternative marketplaces available in the EU. Despite the strict purchasing process for users, the app must be positioned as a Bluetooth connection tool for the device, and UX language must adhere to health regulations.
Timeline limitations
Given the tight timeline from redesign to market release, we had only two weeks from user research to complete user testing, including collaboration with developers for internal technical changes. After design completion, we downloaded the app from a specific link rather than from the Apple Store for usability testing. We visited different shops, conducted large-scale surveys among approximately 300 internal employees, and performed 8 user tests with our existing users.
Outcome
We transitioned from a complex 6-step process—"Scan QR code from device, download the app, visit the website from the app, launch the web app, activate the device, connect with the device"—to a streamlined connecting process with onboard instructions. This change significantly improved the overall user interface and experience, enhancing user engagement in several ways:
Reduced clutter and improved the linear connecting experience.
Introduced an onboarding process to ensure users can easily understand other features.
Reflections & Future Considerations
The recent app redesign has significantly improved user satisfaction and business performance, with a 34% surge in our app store rating.
However, coordinating between iOS, Android, and web app development teams remains time-consuming, highlighting the need for more efficient collaboration methods. A clear delivery agenda is crucial since not all developers are fluent in Figma or understand UX language. For the next step, leveraging data analytics tools will allow us to monitor user interactions effectively, using data-driven insights to inform iterative design decisions and identify areas for improvement in user behavior, engagement patterns, and conversion rates.
