Beaba
Bringing Beaba’s Mission to Mobile:
An Interactive Tool for Cancer Education
Beaba is an organization in Brazil that uses technology to demystify cancer for children and parents. My role was to lead the integration of Beabook, Beaba's physical cancer guide containing 200+ terms related to cancer, into a mobile app to help patients and families feel more informed and empowered during their cancer journeys. My team's app is projected to benefit 32,000+ pediatric cancer patients worldwide.
Product Designer
4 product designers,
1 design manager, 1 psychologist, 1 PM
5 weeks
Oct - Nov 2023
Figma, FigJam, Miro
OVERVIEW —————————————————————————————————————————————–
MY ROLE
THE TEAM
TOOLS
TIMELINE
The current physical, dictionary-like format of the book poses major limitations for engagement, especially for children. If users aren’t engaged with the content, their capacity to learn from it will be constrained. Physical book distribution is also limited.
THE PROBLEM ——————————————————————————————————————————–––––
So, how might we integrate Beabook into a mobile app that is both engaging and informative?
TARGET USERS AND USER GOALS
We solved this problem through two major components:
Interactive Book Experience
Gamification and Personalization
Transforming static book pages into dynamic, interactive experiences with every flip, making learning terms more memorable and effective for kids.
OUR SOLUTION ——————————————————————————————————————————–––––
INTERACTIVE BOOK EXPERIENCE
Key design decision: Initially, our prototype didn’t have indicators (e.g. “click me"), as we assumed these interactions would be intuitive. However, usability testing revealed otherwise - users often didn't know there was an interaction on the page or how to do it - so I added clear interaction cues. To minimize disruptions, these indicators only appear when the user first views the page.
Why? From user research, I learned that kids are motivated to learn by rewards and love customization, socialization, and competition in games.
How are rewards earned?
Account feature that allows users to customize their character, earn rewards, and share achievements and reading progress with friends to foster a positive collaborative learning experience.
GAMIFICATION AND PERSONALIZATION
DESIGN PROCESS ——————————————————————————————————————————–––––
EXPANDING ON A FEW KEY DESIGN DECISIONS
PARENT AND CHILD USER INTERVIEWS
PAGE FLIP INTERACTION
FUNCTION CATEGORIZATION AND ORGANIZATION
I interviewed a total of 7 users: 5 children (ages 5-11), 2 parents. The goal of the interviews was to understand how kids learn from and enjoy interactive media and how parents like to educate their children about health, especially while discussing sensitive topics.
Building on insights from my interviews, I conducted a competitive analysis of five competitors, focusing on key aspects of rewards and customization, collaboration, gamification, and information balance.
My competitive analysis 1. inspired engagement strategies for our app, including rewards, streaks, reading progress, reminders, and interactive social elements, 2. helped us start ideation for navigation components (what are the affordances of an online book? How do we keep younger users in mind?), and 3. motivated our final book organization (e.g. searchable index, filter by topic).
I developed a set of personas to better empathize with our multiple user groups and systematically capture users’ goals, frustrations, and backgrounds. This process helped identify and distinguish key use cases shown in my storyboards, ensuring our final designs addressed specific user scenarios.
Based on research insights, I conducted two rounds of paper sketching, focusing on gamification elements, book organization, and navigation. Through ideating, I learned how important it is to share (visual) ideas with the team early and often, as it helps identify misalignments before progressing further.
Next, we created wireframes and low-fidelity prototypes to define and test how we wanted the navigation, app features, and flow to look and feel.
I tested our lo-fi prototype with 7 users. My method was to first observe each user go through the app flow while having them narrate their thoughts. Then, I asked each user a series of questions regarding their experience. We came together as a team after testing and developed the following key insights that we then we took into the final design.
I wanted the page flipping to mimic flipping pages in a physical book but needed to make the motion intuitive for kids and adults across cultures - because although Beaba is based in Brazil, they distribute their products to patients worldwide.
I wanted to find the best way to categorize information and separate book functions vs. app functions: where should each go? From user research, I knew functions like table of contents, save function, and share function were essential to a book. The final design is a save and share button on the page as the book functions and a navigation bar for broader app functions.
AFFINITY MAPPING
KEY FINDINGS
COMPETITIVE ANALYSIS
PERSONAS AND STORYBOARDS
WIREFRAMING AND LO-FI PROTOTYPING
USABILITY TESTING
IDEATION
ROUND 1: BOOK EXPERIENCE
ROUND 2: APP FLOW, NAVIGATION, FEATURES
DESIGN PROCESS ——————————————————————————————————————————–––––
FINAL DESIGN: HIGH-FIDELITY PROTOTYPES
IMPACT —————————————————————————————————————–––––————––––––
WHAT I LEARNED —————————————————————————————————————–––––————––––––
The learning that sticks with me most is the importance of positive cross-functional collaboration. I’m grateful to have worked with an incredible team at Beaba, who provided us with precise and thoughtful feedback during every phase and challenged us to think outside the box. As the Beaba team consisted of cross-functional members, I gained a deeper appreciation for the value of interdisciplinary collaboration. For example, from the design team, we got great feedback on UX/UI elements such as increasing intuitiveness, reducing cognitive burdens, and matching mental models. Meanwhile, input from psychologists allowed us to better understand how our designs affect users mentally and emotionally. Being exposed to these diverse perspectives allowed us to examine my design decisions from different angles, attaining the depth and breadth necessary to understand the holistic impact of our design, ultimately resulting in more robust, sustainable solutions.
ALSO…
85% increase in learning engagement | 32,000+ patients will benefit | 20% increase in donations to fund future initiatives
Conduct interviews and testing with a more representative population - given time and resource constraints, it was difficult to get in touch with cancer patients, so we interviewed parents and children who did not have cancer.
Include another round of usability testing after designing the first hi-fi prototype - did we address the concerns from earlier testing?
Thanks to my amazing team :)
IF I HAD MORE TIME…
