Mobile Design
I was tasked with translating a complex web-first research portal into a mobile app. The goal was to support participants in completing video-based interviews, demographic surveys, and onboarding flows on smaller screens.
Key challenges:
• Hardware-specific constraints on UI: Considering microphone and camera placement and how they impact audio and video quality in relation to research needs.
• How can this interface avoid overwhelming troubleshooting?: Designing troubleshooting flows for camera/mic issues
• Too much info, not enough space: Supporting long, structured interview questions while keeping the live video feed usable
My process:
• Collaborated with the principal investigator to prioritize research requirements.
• Ensured clear onboarding for video and audio setup by limiting error prevention pop-ups to one in a prominent spot.
• Created new mobile-specific elements in line with the existing design system.
• Balanced simplicity with the research complexity by moving questions into a scrollable section and removing the background during video feeds, since multiple border margins reduced usable space.
Outcome
Delivered a mobile-second design that balanced the need for simplicity with the complexity of the research tasks.
Original
Adapted Mobile
The mobile design included many detailed decisions that shaped the final product.
Interested in the process? Let’s chat! :D
