AeviceMD
Healthcare
App Design
2024
UI/UX Designer
Redesigning AeviceMD’s Onboarding Experience to Reduce Setup Friction
Project Info
Starting with the onboarding journey
AeviceMD is a remote auscultation medical device that assists patients with lung conditions and healthcare professionals to manage and monitor respiratory health for early detection of abnormalities.
In Q1 2024, the design team conducted a human factors study to assess how lay users navigated the AeviceMD mobile application, particularly the onboarding process. Through this study, the team identified key pain points that made the experience challenging for users: powering the device, connecting it to the app, and troubleshooting setup issues. My role as the UI/UX designer was to refine the onboarding flow, ensuring that these friction points were addressed with intuitive design solutions.
Pain Point 1
Wait, it is not battery powered?
Why Users Assume it Was
Most users expected the device to be battery-powered, unaware that it required an external power source. This assumption likely stemmed from its compact form factor, as well as a tendency to skim over the instructional materials provided in the packaging. The UI itself also failed to make this requirement clear enough, leaving users confused when the device did not turn on.
How We Made it Obvious
While we could not redesign the hardware or force users to read the manual, we could enhance the UI to make this step unmistakable. Instead of a static image, we introduced an animation showing a USB cable being plugged into the device, immediately drawing attention to this crucial step. I explored multiple animation styles including 3D renders, photos, and vectors, before settling on a vector animation that best matched the brand’s overall aesthetic.
A Small Improvement that Improved Engagement
This solution also inspired a new addition to the onboarding experience: animations for the device’s light indicators. The indicator changes colours depending on the device’s state: flashing purple when connecting, solid purple when searching, and solid green when connected. By incorporating visual feedback animations into the onboarding flow, we provided users with real-time confirmation that the device was functioning as expected, reducing uncertainty and frustration.
Pain Point 2
Finding the QR code, easier said than done
Why Users Struggled to Connect
Once powered on, users needed to scan a QR code located underneath the device to pair it with the app. However, its obscure placement, combined with users’ tendency to skim through instructions, caused many to struggle with this step. Compounding the issue, the UI presented users with multiple options: ensuring their phone was connected to a 2.4GHz network, scanning the QR code, or manually entering a UID, without explaining where to find the UID code. This overload of information led to confusion and hesitation.
How We Streamlined the Process
To make the experience more intuitive, I broke the instructions into separate screens, guiding users through each step one at a time. The first screen ensured they connected to the correct network before proceeding to the QR code scanning step. By reducing the cognitive load and presenting only relevant information at each stage, we made the onboarding process smoother and more user-friendly.
Pain Point 3
Troubleshooting that actually helps
Why the Self-Diagnosis Feature Isn’t Working
If users encountered issues during setup, they were presented with a generic troubleshooting screen that was not tailored to their specific problem. This “one-size-fits-all” approach left them frustrated, unsure what went wrong, and in many cases, abandoning the setup altogether. The lack of clear guidance created an unnecessary barrier, making it difficult for users to resolve issues on their own.
How we Made Troubleshooting More Effective
Collaborating with the software team, we mapped out the most common issues users faced: no matching device detected, pairing failures, incorrect WiFi frequency, and connection errors. Instead of a single generic screen, we introduced a more dynamic self-diagnosis flow, offering step-by-step solutions based on the specific problem encountered. And if all else failed, users were seamlessly redirected to the help centre, ensuring they were never left without a path forward.
Reflect
Designing for both iOS and Android
This project deepened my understanding of platform-specific design. iOS and Android systems differ in their behaviours, settings, and UI frameworks. For example, on iOS, the "Nearby Devices" setting is enabled by default, while Android users must manually activate it. Google’s Material Design and Apple’s Human Interface Guidelines also have distinct iconographies and pop-up modal behaviours. Additionally, the black bezel notch in certain Apple devices affects screen real estate, requiring UI adjustments to prevent element overlap. These differences reinforced the importance of platform-aware design.
Missed Opportunity to Clarify the Process to Connect to the Device
While the redesigned onboarding flow improved many pain points, there was still room for further refinement. The QR code’s location was clearly stated in the UX copy, but the UID code was not. Since both are placed underneath the device, users whose cameras were not working, or who preferred manual entry, might struggle to locate the UID. Additionally, "UID" is a technical acronym that lay users may not immediately understand, unlike "QR code". A clearer UI prompt could have prevented confusion and improved user experience.