←
Final Design
Initial Research
Insights and Problems
✨ The solutions ✨
Test and Iterations
Hand-offs and Data Tracking
Learnings and Reflections
Next: TalentTraceHome
☰
Product Design Internship 2023
Launching a universal audio diary tool for clinical studies
As the solo designer within Georgia CTSA's AppHatchery team, I spearheaded the end-to-end design of Fabla, an application that reinvents traditional diary-keeping. Fabla was a collaborative effort with top psychologists and researchers from the Departments of Spiritual Health and Preventive Medicine at Emory University.
TIMELINE
May 2023 - Current
Role
Strategy, Research,  
Design
COLLABORATORS
1 Project Manager
5 Developers
TOOLS
Figma, Rive, Figjam
PROJECT LINK
Apple AppStore ↗
Google Play Store ↗
Outcome
All the data is collected through a 2-week pilot study that involve 200+ users in US universities and will be used to inform design iterations in the future.
189%
Richer Data Collected Compared to Qualtrics
98%
Satisfaction Rate Among Users
71%
Overall Diary Submission Rate
Want to skim through this case study? I got you covered.
Here's a 1 min TL;DR version.
Quick overview
In charge of Front-end coding.
Contributed to Concept Development, UX Design.
Quick overview
In charge of Front-end coding.
Contributed to Concept Development, UX Design.
Quick overview
In charge of Front-end coding.
Contributed to Concept Development, UX Design.
Quick overview
In charge of Front-end coding.
Contributed to Concept Development, UX Design.
Final Application Designs & Solutions
Guided onboarding with the virtual assistant
🤔 Problem:

The traditional face-to-face onboarding approach was inefficient and led to participants forgetting key study details due to the time gap between onboarding and study start.

✨ Solution:

Implemented a virtual assistant-led onboarding, streamlining study procedures and setups. Fabla also offers guided troubleshooting and direct communication with researchers, ensuring continuous access to study information for users.
Dynamic Diary Taking Process
🤔 Problem:

In our study, the use of end-of-day diaries was found to cause memory-related challenges and biases. This led to a significant issue where participants frequently reported minimal data.


✨ Solution:

We introduced a dynamic diary-taking process, enabling users to access and respond to prompts anytime via home screen, widgets and more. This flexible, user-driven approach allows for spontaneous, ongoing diary entries.
Diary History and Personalized Reminders
🤔 Issue:
‍
Users frequently forgot to make diary entries, leading to gaps in data and compromising the study's validity. Additionally, they were averse to frequent notification disruptions.

✨ Solution:
‍
I streamlined the solution by integrating a diary history feature as a passive reminder for users to track past and upcoming entries. Additionally, I designed a customizable reminder system that aligns with individual schedules, offering specific-time or smart reminders triggered only upon a missed entry.
Exploring Fabla
Fabla's User Flow
My journey with Fabla began with a deep dive into its background. Engaging in detailed discussions with the product managers and clients, I gained insights into its history and initial design choices. Additionally, I navigated Fabla, conducting a heuristic evaluation. These steps were instrumental in developing a comprehensive understanding of the current user flow.
Aligning with Stakeholder Expectations
Building upon my understanding of Fabla's user flow, I conducted evaluative research with 5 key stakeholders. I recruited 1 product manager, 2 clients, and 2 devs. Their insights were crucial in shaping a holistic view of stakeholder expectations and requirements for the project.
Researchers
- Studies vary in dynamics; participants may record audio diaries with varying regularity.
- Design must be adaptable for various question types, not limited to audio prompts.
PM & Developers
- Time is a critical factor; our foremost goal is to develop an MVP within two months for the upcoming pilot study.
Design Evaluation Insights
Based on the usability test and follow-up interviews, these were the most pressing issues that needed to be addressed.
01
Discoverability
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
02
Who are the target audience we were building for?
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
03
Who are the target audience we were building for?
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
01
Discoverability
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
02
Who are the target audience
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
Usability & Utility Test
Evaluating Fabla's current experience
Having gained insights from various stakeholders, I moved on to the usability tests to delve into the users' experience with Fabla. I recuited 5 users through UserInterview. All of these 5 users have previous experience with participating a study. I observed them as they navigated Fabla, followed by guiding them to discover specific features. Below are some of the key questions I posed during this process.
1. Is the study sign-up process seamless?
2. What is a sidenote?
3. Can you complete a diary entry?
4. What's most important to you in diary entries?
5. Can you view the study plan & progress?
6. Can you view your compensation?
7. Confident in meeting audio diary requirements?
8. What drives your continued study participation?
9. What could remind you to make diary entries?
Usability Results & Findings
The results showed a glaring issue. With only 50% of the tasks being completed successfully, I knew Fabla was difficult to understand and navigate without external help.
Task
User 1
User 2
User 3
User 4
User 5
Complete onboarding
✓
✓
✓
✓
✓
Set reminders
✓
✓
✓
✓
✓
Sidenotes useful?
×
×
×
×
×
Direct through questions
×
×
×
×
×
Track progress
✓
×
✓
×
×
Incoming diaries?
×
×
✓
×
✓
Check history
✓
✓
✓
✓
✓
Major Findings & Uncovered Insights
User Control & Freedom
All the users disliked the rigid, linear process for diary entries (notetaking, choosing a recording method, confirmation, and submission), often uncertain about notetaking and recording choices without seeing the prompts.
Error Prevention & Recovery
Users highlighted past frustrations with app failures during voice recording or non-compliant diary entries, leading to lost study benefits.
Avoid Forgetiveness
A common issue was forgetting to complete diaries, especially during busy times or inconvenient moments. Dismissed reminders often led to forgotten entries. But users often dislike frequent reminders - balancing reminder effectiveness with user preferences for frequency is crucial.
Keep Users Engaged
Users are primarily motivated by bonuses or personal interests. Some aim for rewards, while others record personal journeys or connect with topics relevant to their fields.
01
Discoverability
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
02
Who are the target audience we were building for?
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
03
Who are the target audience we were building for?
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
How can we encourage study participants to record audio diaries with flexibility, ease, confidence, and engagement?
01
Discoverability
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
02
Who are the target audience we were building for?
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
03
Who are the target audience we were building for?
Our primary target audience comprises new managers who are keen on honing their soft skills to navigate their managerial roles. These individuals seek to identify and bridge their skill gaps, gauge the efficacy of their practices, and adeptly handle various work scenarios, such as conflicts and disagreements among team members.
Ideation: Targetting Quantity over Quality
Enhance flexibility, ease, and engagement
In my research for this project, I identified several issues but focused on the primary ones that directly address the core problem. This prioritization ensures that my subsequent design decisions are firmly rooted in user research and effectively target the identified challenges.
Issue
Solution
Notes
User Control & Freedom
Dynamic user flow
The dynamic user flow should allow flexibility, enabling users to view, start, or leave any prompt effortlessly.
Cut off sidenotes
As all the users didn't think it's useful but adding steps to complete the diary.
Error Prevention & Recovery
Monitor voice and recover tips
Improve system status visibility, helping users promptly identify and rectify errors.
Researcher's notes
A way to communicate to users what researchers expect.
Avoid Forgetiveness
Smart reminders
Explore a behavior-driven reminder system, calibrated to prompt users only when necessary.
Snooze
Snooze feature for reminders to address the issue of dismissed alerts leading to forgotten entries.
Widgets
Passive reminder widgets - providing users with subtle, advance prompts to better prepare for diary entries
Keep Users Engaged
Give meaning to users’ work
Highlight Fabla's unique position as a valuable tool for community contribution.
Provide users with a sense of ownership
Position diary entries as a personal collection, appealing to users motivated by personal interest.
Solution 1 - Streamlined Diary Submissions
Dynamic User Flow
Redesigned to display all prompts on the home screen, the new process allows users to familiarize themselves with the content and start recording directly from their chosen prompt, enhancing clarity and ease of use.
1. Dynamic Prompt Cards
All prompts are readily visible, complete with tags indicating their type and estimated completion time. This feature allows users to thoroughly prepare before engaging with the content.
2. Audio & Text Response
Fabla accommodates both audio and text responses, empowering users to choose the format that aligns with their comfort level or the nature of the question.
Solution 2 - Avoid Forgetiveness
Proactive Reminders - Minimal Interruption
Addressing the challenge of reminder frequency, I designed a notification system that aligns with each user's schedule. This system strategically sends reminders at moments when users are most likely to forget, minimizing disruptions for those who regularly maintain their diary entries.
I also Integrated #1. a snooze option for diary reminders, catering to users who might overlook initial prompts. Additionally, implemented #2. a strategic backup pop-up for diary submissions, offering choices for notification preferences including messages and emails.
1. Snooze Reminders
Users can snooze reminders, choosing from preset intervals or setting a custom time.
2. Notification Re-Engagement
Missed responses trigger a pop-up, reminding users to enable notifications on the system level or add more ways to receive reminders.
Passive Reminders - Calm Design
I implemented passive reminders, such as widget and calendar, providing subtle prompts without being intrusive.
1. Widgets & Tutorial
Home and Lock Screen widgets provide subtle, non-intrusive reminders and enable preview of prompts.

A tutorial facilitates the effortless setup of widgets, ensuring accessibility for all users.
2. Weekly Progress Tracking
A weekly calendar displays the number of diary entries to be completed and the remaining days, aiding users in managing short-term goals.
Solution 3 - Error Prevention & Recovery
Audio Monitor and Researcher's Notes
A proactive voice monitoring system alerts users to recording issues, ensuring quality submissions. 'Researcher's notes' provide guidance to keep responses focused and relevant.
1. Conversational Error Hints
A weekly calendar displays the number of diary entries to be completed and the remaining days, aiding users in managing short-term goals.
2. Tips For Recovering From Errors
Error visualizations, coupled with actionable tips, ensure users can quickly recover from potential errors.
3. Global Guidance & Detailed Researcher's Notes
Fabla allows researchers to set directions before diaries, including submission deadlines, optimal recording settings, etc.

On specific diary questions, researcher's notes offer detailed guidance, ensuring users’ responses align closely with study objectives.
Solution 4 - Keep Users Engaged
Gamification Mechanism
To elevate user engagement, I employed 3 gamification tactics: 1. Give meanings to users' work. 2. Show users’ accomplishments. 3. Provide users with a sense of ownership.
1. Celebrate Milestones
Fabla celebrates key intervals with a special popup to honor users contributions.
2. Diary & Compensation
Participants can track their complete diary journey, including detailed compensation information.
3. Accessible Diary History
Users can personalize diary names, enhancing their sense of ownership and connection to their entries.

A dedicated history tab allows for easy retrieval of past entries, facilitating reflection and navigation of the diary journey.
Mid Point Result
Clickable Prototypes
I developed clickable prototypes reflecting feedback from user tests. These prototypes showcase three key flows: #1. signing up for the study, #2. taking and submitting diaries, and #3. tracking progress and compensation.
Sign Up & Onboarding
Take & Submit diaries
Progress & Compensation
Test Agian
Another Round of Usability Results
I conducted a second round of testing to validate the overall user experience and confirm the effectiveness of recent design modifications. This phase was also crucial for prioritizing design changes from a user-centered perspective, helping to determine the most impactful features to include in the MVP. Key findings are as follows.
Task
User 1
User 2
User 3
User 4
User 5
Complete onboarding
✓
✓
✓
✓
✓
Set reminders
✓
✓
✓
✓
✓
Incoming diaries?
✓
✓
×
✓
✓
Direct through questions
✓
✓
×
✓
✓
Quit & continue
✓
✓
✓
✓
✓
Track progress
✓
✓
✓
✓
✓
Check history
✓
✓
✓
✓
✓
Animations of the Avatar
Refined Avatar Interactions
I enhanced the avatar with expressive facial animations, tailored to reflect different system statuses and respond to user voice inputs. This dynamic interaction particularly aids in error scenarios, offering users intuitive and empathetic feedback.
Animation Examples - Supplemental Information & System State
The avatar animations are designed to serve dual purposes. During onboarding, they provide essential tips, seamlessly guiding users through steps. In recording interfaces, these animations are pivotal in conveying system states, like recording status or voice detection issues, thereby improving user comprehension. All the avatar animations were designed and built in Rive.
1. Provide Tips
2. Indicate System State
One-hand Usage
Issue: The Layout Wasn't Suitable for One-hand Usage
1. Slider accessibility for one-hand operation
User testing revealed that the horizontal sliders in the original layout were not conducive to one-handed use, causing thumb strain during interaction.
2. Questions and continue button are too far away
The distance between the slider and the 'continue' button necessitated extensive thumb movement, impacting usability for one-handed operation.
Solutions: Vertical Slider v.s. Flipping Cards
In addressing one-hand usability, I developed two concepts: vertical sliders and flipping card interaction. Following discussions with the development team, we chose to implement vertical sliders initially, with plans to explore flipping card interaction in the next phase.
Verical Slider
✓ Vertical sliders align with natural thumb movement for one-handed use.
✓ Offers practicality and ease of implementation with modifiable components.
Flipping Cards
✓ Flipping cards enrich user experience, reducing thumb movement for navigation.
× More complex than sliders, but provides engaging and intuitive content interaction.
Interactive Tips & Walkthroughs
Issue: Overwheling Information on the 'Recording Complete' Page
1. Excessive information
The 'Recording Complete' screen, displayed post-audio diary entry, primarily highlights the CTA for proceeding to the next question. The option to add multiple responses, though present, fails to engage users effectively.
2. Utility of Researcher's Note
The researcher's note, initially designed to guide new users, loses its relevance with repeated use. As users become accustomed to the product and study process, this element becomes redundant.
Solution: Interactive tips and walkthroughs
To mitigate information overload on the screen, I redesigned the components to be interactive, displaying them only upon user request. This approach maintains a clean interface, while automatically presenting all information to new users for initial guidance.
Interactive Walkthroughs
Implemented avatars guide users through key functionalities. This approach highlights essential features.
Interactive Tips
Transformed 'Researcher’s Notes' into overlay tips, reducing screen clutter by displaying information on demand.
End Result
Polished Mockups For Team Discussion & Development
I developed comprehensive mockups to foster collaborative team discussions and guide the development process.
1. Sign Up & Onboarding
2. Take & Submit diaries
3. Progress & Compensation
Collaborative Branding Workshop
Name & Logo Brainstorm
In our participatory design session, I led clients, project managers, and developers in a dynamic brainstorming activity focused on creating the logo and app name. This strategy was instrumental in fostering a sense of ownership among all stakeholders, ensuring their diverse insights were integral to the design process.

We decided 'Fabla,' a name that resonated with everyone and reflected our passion to encourage talk and share. I also designed a logo that visually encapsulated this aspiration, effectively symbolizing our vision.
Hand-offs to Development
Strategic Design Evaluation and Roadmapping
In a collaborative session with project managers and the development team, I presented each design concept, detailing the rationale behind my design decisions. We collectively evaluated the priority of each feature, considering both their impact and technical feasibility.

This collaborative approach enabled us to construct a development roadmap and define the MVP, ensuring a strategic and focused development process.
Mood Board & Visual Style Guide
As the sole designer on the team, I spearheaded the development of a consistent visual style guide. Collaborating with team members, I optimized the color scheme.

We chose blue as the primary color, symbolizing trust, calmness, and stability. We integrated orange accents, a color embodying energy, enthusiasm, and excitement - aims to invigorate users, fostering engagement and activity within the app.
Researcher's Portal
Post-client meetings, I identified the need for a real-time data monitoring tool. Responding to this requirement, I initiated the design of a researcher portal.

Given the time constraints, I opted for Retool, valuing its feasibility and efficiency. This choice allowed me to tailor the portal's features to seamlessly align with Retool's capabilities.
Data Tracking & Analysis
Data Tracking & Success Metrics
Employing Pendo for data tracking and analysis, my role was pivotal in establishing success metrics and analyzing user behaviors. I also identified key data elements for collection. The primary goals we want to achieve:
1. Identify successful users (response rates & time) and analyze which features contribute to their success
2. Examine the ways users interact with various features
3. For extended studies, ensure the consistency of response rates and the quality
Here are the metrics to evaluate current design:
1. Achieve 65% users submit 65% of diaries.
2. Achieve 65% diaries are over 3 minutes
3. Participants do not answer questions carelessly
Data Summary
Collaborating with Emory University's research team, we successfully recruited 108 participants for a pilot study. Below are the key success metrics I analyzed from this initiative.
2955.5
Minutes Audio Diaries Collected
650
Audio Diaries Submitted
220
Participants Recruited
189%
Richer Data Collected Compared to Qualtrics
98%
Satisfaction Rate Among Users
71%
Overall Diary Submission Rate
Learnings and Reflections
Optimizing for Multiple Stakeholders
In this project, I tackled the complex task of satisfying both researchers and participants. The goal was to maintain scientific accuracy while ensuring the user interface was easy to use. This challenge highlighted a key conflict: participants wanted a quick and simple recording process, but researchers needed detailed data. To address this, I developed strategies to motivate accurate participant recordings without complicating the user experience. This careful balancing act was crucial for preserving the integrity of the research.
Cultivating Precision in Design
In the realm of UX design, precision is not just a preference, it's a necessity. It's essential to specify these details explicitly in your designs. Leaving them to developers' interpretation can lead to a disconnect between your design vision and the final product. By providing exact values, you remove any guesswork, ensuring a smoother development process and fidelity to your design. Remember, our role as designers is to provide clear, unambiguous directions. Don't make your devs designers unless they want it.
Thanks for visiting!
Interested in the stories behind my designs? Feel free to reach out for more details!
LinkedIn ↗