Heading 2
Redesign the UX/UI for a vape product that connects to a mobile app, enhancing the brand's aesthetics and enabling users to easily utilize its features to reduce bounce rates and increase user engagement.
Yara
2024
Role
UI/UX designer
Services
Website design, iOS app design
Collaborators
Software Developer, Digital Marketer
Problem
Based on an analysis of 300+ user reviews, 90% of users were unaware of the multi-step device pairing process, often mistakenly concluding that the app was non-functional. This indicates a critical usability issue in the onboarding and device connection flow, leading to user frustration and potential abandonment.
User Research
Understanding the Problem and Customer
To uncover the key user experience challenges impacting app performance, we began by conducting usability testing with 8 existing users. Our goal was to understand user behavior and sentiment during the device connection process. By observing and recording each session, we were able to identify pain points, confusion, and drop-off moments in real-time.
User Interview Highlight
Users expressed frustration with the complexity and multiple steps of the pairing process.
01. Complicated Setup
Users were confused by the transition from four tabs on the app's opening screen to three tabs after the "connecting page," especially since the feature names changed.
02. Inconsistent Tab Layout
Users are unaware of the swipe gesture for deleting a device, and there is no option to rename the device.
03. Unclear App Instructions
HMW
Based on our user research insights, we refined our scope by framing key "How Might We" (HMW) questions. One of the primary questions was: How might we make the pairing process more intuitive for first-time users?
Ideation 1
Streamlining Device Pairing
To address the complexity of the current setup, we simplified the device pairing process by replacing the multi-step website visit with a streamlined “one-step click” button, allowing users to initiate and complete the connection directly within the app.
Ideation 2
Progressive Disclosure
To create a more cohesive and intuitive layout, we redesigned the tab menu into a linear flow that reveals essential features only after a successful Bluetooth connection. This approach removes inactive options upfront, reducing confusion and guiding users step by step through the setup process.
Ideation 3
Name-Your-Device Feature
To address user confusion when multiple devices are detected, we introduced a “Name the Device” feature. This allows users to assign custom names to their devices with a user profile, improving clarity during setup and reducing the chances of pairing errors.
Design A Solution
Due to the tight project timeline, I initiated usability testing immediately after completing the mid-fidelity designs to accelerate the handoff process. While finalizing the style guide, I simultaneously iterated on the design based on user feedback from the testing sessions.
Usability Testing Insights
3 Major Improvements
Following ideation, where we translated insights into wireframes and prototypes, I conducted usability testing. This phase enabled me to gather feedback on the redesigned elements.
Add a "Save" Button
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 can easily finalize changes. Make sure users are fully prepared to move to the next step after clicking "Save" on the keyboard.
Simplify Features and User Decisions
Challenge: Users are confused by the screenlight toggle and the brightness annotation since 0 brightness means the screenlight is off.
Solution:To simplify user choice, remove the screenlight toggle option and combine it with the brightness feature for a more streamlined experience. Display the color selection (party mode) only after the user clicks the toggle, ensuring a clear and focused interaction.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, making it more prominent on the map for better clarity. Add text and icon indicators to emphasize the sound-on features, ensuring users can easily recognize and interact with them.
Outcome
Evaluated Progress by Comparing Data
Following the redesign, Yara saw a 30% increase in positive App Store reviews. Within just one month, daily download rates reached 23,000 across both iOS and Android platforms—reflecting a significant boost in user engagement and app visibility.
30% UP
App store reviews
203.1K
Brand website visit in one month
23K
Average daily iOS app downloads
4X
Download rate in Android store
