CAVIA - APP DESIGN
CASE STUDY
CAVIA will be a mobile application that supports the Code Blue Campaign by transforming how institutions engage with the communities they serve, ensuring that every voice that needs to be heard is included, valued, and reflected in the decisions that impact them.
My Role
UX DESIGNER
Timeline
3 Week Sprint
Tools
Adobe XD, Adobe Illustrator
The Problem
To design a mobile application that enables individual audio self-recording, allowing users to orally record answers to open-ended questions.
Project Goals
1. Have a simple, intuitive design that is easy to explain to users who aren’t tech-savvy.
2. Audio-based design rather than text-based for users with low levels of literacy.
3. Allow users to navigate through the app at their own pace.
Research & Discovery
Client Interviews
From our discussions with the client, we learned that the app would serve as a bridge between community organizations and global institutions. It needed to function both for community leaders (“volunteers”) and for individual participants (“interviewees”) who may have never used a mobile app before.
Key insights included:
App must run offline and upload data when Wi-Fi is available.
Interface should rely on icons, audio cues, and color instead of written text.
The tone should be participatory and empowering — not institutional.
Data collection should maintain anonymity and consent throughout.
Comparative Analysis
We reviewed applications like SenseMaker and other humanitarian data-collection tools. Most relied on text and required literacy. Few were designed with emotional sensitivity for trauma survivors. This confirmed our need to focus on voice-first design and safe guided interaction.
Personas
To ground our design in empathy, we developed two core personas:
User Journey Maps
The journeys of both personas revealed emotional highs and lows that guided our interface flow.
Primary Persona User Journey
Mapping these emotions helped us structure the app around clear guidance, minimal cognitive load, and positive closure moments.
Secondary Persona User Journey
Design Process
Low-Fidelity Sketches
We began with hand-drawn wireframes to quickly visualize the structure and flow. Login, demo video, consent, recording, and upload are the screens we started designing. The intent was to simplify every step, using large buttons, clear color contrasts, and linear navigation.
Mid-Fidelity Wireframes
These digital grayscale prototypes allowed us to test hierarchy and flow without distraction. Our design decisions focused on:
Replacing text with iconography and audio cues.
Introducing a progress bar to give users a sense of control.
Ensuring all navigation relied on simple gestures and familiar patterns (play, record, stop)
Final Design
With the help of our UI designer were finished our app design, and here are the 3 changes we made.
With the help of our UI designer were finished our app design, and here are the 3 changes we made.
1. A dark mode design was used to conserve battery as this app would be used in 3rd world countries.
2. Specific iconography and audio-playback will be used to enable users with low to no literacy to be able to navigate the app.
3. Micro-interactions were used to provide users with feedback while adding a level of accessibility.