Beaba
Background
Beaba is an institution in Brazil that aims to demystify cancer for children, helping patients and families feel empowered and informed during their cancer journeys. The goal of the project was to design an interactive mobile app for Beabook, a book defining 200+ terms related to cancer.
Role
UI/UX Designer
Timeline
Jan - March 2023
Skills
Mobile Design
Visual Design
UI UX Design
UX Research
Team
Beaba team
3 designers
Tools
Figma
Miro
Role
UX Designer
Timeline
Jan - March 2023
Team
Beaba
3 designers
Tools
Figma
Skills
Mobile Design
Interaction Design
Game Design
Prototyping
User Research
Context
What is Beabook?
Beabook is an information guide with 200+ cancer related terms. The book is distributed to children and adolescents undergoing cancer treatment to educate them about their diagnosis, symptoms, and treatment.
Context
What is Beabook?
Beabook is an information guide with 200+ cancer related terms. The book is distributed to children and adolescents undergoing cancer treatment to educate them about their diagnosis, symptoms, and treatment.
Context
What is Beabook?
Beabook is an information guide with 200+ cancer related terms. The book is distributed to children and adolescents undergoing cancer treatment to educate them about their diagnosis, symptoms, and treatment.
Context
What is Beabook?
Beabook is an information guide with 200+ cancer related terms. The book is distributed to children and adolescents undergoing cancer treatment to educate them about their diagnosis, symptoms, and treatment.
Problem
The physical Beabook presents several challenges that limit its reach and effectiveness.
Distribution is limited, creating barriers for families who may not have easy access to these materials.
Lacks interactive features to effectively engage younger audiences and cater to their individual needs.
Problem
The physical Beabook presents several challenges that limit its reach and effectiveness.
Distribution is limited, creating barriers for families who may not have easy access to these materials.
Lacks interactive features to effectively engage younger audiences and cater to their individual needs.
Problem
The physical Beabook presents several challenges that limit its reach and effectiveness.
Distribution is limited, creating barriers for families who may not have easy access to these materials.
Lacks interactive features to effectively engage younger audiences and cater to their individual needs.
Problem
The physical Beabook presents several challenges that limit its reach and effectiveness.
Distribution is limited, creating barriers for families who may not have easy access to these materials.
Lacks interactive features to effectively engage younger audiences and cater to their individual needs.
Solution
Transforming static pages into dynamic interactions to create engaging learning material
Designed interactive visuals to simplify complex terms, creating an immersive learning experience to enhance understanding and retention.
Solution
Transforming static pages into dynamic interactions to create engaging learning material
Designed interactive visuals to simplify complex terms, creating an immersive learning experience to enhance understanding and retention.
Solution
Transforming static pages into dynamic interactions to create engaging learning material
Designed interactive visuals to simplify complex terms, creating an immersive learning experience to enhance understanding and retention.
Solution
Transforming static pages into dynamic interactions to create engaging learning material
Designed interactive visuals to simplify complex terms, creating an immersive learning experience to enhance understanding and retention.
Gamification & personalization to make learning fun
Designed features for adolescents to customize characters, earn rewards based on reading progress, and share reading progress with friends, incentivizing engagement with educational material and fostering collaboration with others.
Gamification & personalization to make learning fun
Designed features for adolescents to customize characters, earn rewards based on reading progress, and share reading progress with friends, incentivizing engagement with educational material and fostering collaboration with others.
Gamification & personalization to make learning fun
Designed features for adolescents to customize characters, earn rewards based on reading progress, and share reading progress with friends, incentivizing engagement with educational material and fostering collaboration with others.
Gamification & personalization to make learning fun
Designed features for adolescents to customize characters, earn rewards based on reading progress, and share reading progress with friends, incentivizing engagement with educational material and fostering collaboration with others.
Core Book Functions
I designed core functions of a traditional book such as a table of content and bookmark page while also adding digital experiences that a traditional book would not offer such as searching for terms, saving terms, or adjusting settings.
Core Book Functions
I designed core functions of a traditional book such as a table of content and bookmark page while also adding digital experiences that a traditional book would not offer such as searching for terms, saving terms, or adjusting settings.
Core Book Functions
I designed core functions of a traditional book such as a table of content and bookmark page while also adding digital experiences that a traditional book would not offer such as searching for terms, saving terms, or adjusting settings.
Core Book Functions
I designed core functions of a traditional book such as a table of content and bookmark page while also adding digital experiences that a traditional book would not offer such as searching for terms, saving terms, or adjusting settings.
Swipe Function
Page-flipping that mimics turning the pages of a real book
Table of Contents
Search bar and filters to help users navigate through the book
Bookmarks
Last viewed & saved terms for more personalization
Settings
Parental controls for sensitive topics and ensuring flexibility for future accessibility updates
Onboarding
Introduce users to the app and its game feature and page flip functions
Impact
Impact
Established design system and app foundations
Designed the foundational structure of Beaba app for more than 50,000 pediatric patients
Projected to increase learning engagement by 86% compared to Beabook from user testing
Qualitative interviews indicated all users found the new platform appealing, engaging, and useful
physical book into interactive mobile app for Android
My Role
My Responsibilities
I was mainly the UX/UI designer on the team. I ideated the overall user flow for the wireframes and prototypes. I was also in charge of visuals and creating a design system that was cohesive to Beaba's brand. I worked together with my team to design specific game interactions and everyone worked together to perform research including user interviews, persona creation, and sketches.
My Role
My Responsibilities
I was mainly the UX/UI designer on the team. I ideated the overall user flow for the wireframes and prototypes. I was also in charge of visuals and creating a design system that was cohesive to Beaba's brand. I worked together with my team to design specific game interactions and everyone worked together to perform research including user interviews, persona creation, and sketches.
My Role
My Responsibilities
I was mainly the UX/UI designer on the team. I ideated the overall user flow for the wireframes and prototypes. I was also in charge of visuals and creating a design system that was cohesive to Beaba's brand. I worked together with my team to design specific game interactions and everyone worked together to perform research including user interviews, persona creation, and sketches.
Research
Understanding our users and use cases
I collaborated with Beaba to learn about business goals and the purpose of Beaba for our target users.
Research
Understanding our users and use cases
I collaborated with Beaba to learn about business goals and the purpose of Beaba for our target users.
Research
Understanding our users and use cases
I collaborated with Beaba to learn about business goals and the purpose of Beaba for our target users.
Research
Understanding our users and use cases
I collaborated with Beaba to learn about business goals and the purpose of Beaba for our target users.
Understanding how children learn with digital devices
Our team interviewed 2 parents and 5 children (ages 5-11) to understand how interactive media supports learning.
Understanding how children learn with digital devices
Our team interviewed 2 parents and 5 children (ages 5-11) to understand how interactive media supports learning.
Understanding how children learn with digital devices
Our team interviewed 2 parents and 5 children (ages 5-11) to understand how interactive media supports learning.
Understanding how children learn with digital devices
Our team interviewed 2 parents and 5 children (ages 5-11) to understand how interactive media supports learning.
Analyzing competitors and learning interactive game elements
I explored how platforms present information, use interactivity, and engage young users in sensitive or educational content.
Analyzing competitors and learning interactive game elements
I explored how platforms present information, use interactivity, and engage young users in sensitive or educational content.
Analyzing competitors and learning interactive game elements
I explored how platforms present information, use interactivity, and engage young users in sensitive or educational content.
Analyzing competitors and learning interactive game elements
I explored how platforms present information, use interactivity, and engage young users in sensitive or educational content.
Ideation
Mapping the flow
I designed a UX flow to visualize feature prioritizations and gain alignment with our stakeholders' ideas.
Ideation
Mapping the flow
I designed a UX flow to visualize feature prioritizations and gain alignment with our stakeholders' ideas.
Ideation
Mapping the flow
I designed a UX flow to visualize feature prioritizations and gain alignment with our stakeholders' ideas.
Ideation
Mapping the flow
I designed a UX flow to visualize feature prioritizations and gain alignment with our stakeholders' ideas.
Design Iterations
Validating decisions through user testing
Our team went through many iterations based on user testing and communicating with the Beaba team. We incorporated a mix of feedback from our users and Beaba.
Design Iterations
Validating decisions through user testing
Our team went through many iterations based on user testing and communicating with the Beaba team. We incorporated a mix of feedback from our users and Beaba.
Design Iterations
Validating decisions through user testing
Our team went through many iterations based on user testing and communicating with the Beaba team. We incorporated a mix of feedback from our users and Beaba.
Design Iterations
Validating decisions through user testing
Our team went through many iterations based on user testing and communicating with the Beaba team. We incorporated a mix of feedback from our users and Beaba.
1. Establishing Basic Book & Page Functions
Goal: Create a realistic page-flipping experience to create enjoyable learning experience for adolescents.
Challenge: Users struggled to understand how to move to next page, impacting learning flow.
Considerations: What kind of motion and gesture is easy for anyone (kids, adults, people located in multiple countries) to understand?
2. Gamifying the Information & Encouraging Learning
From research, I learned each user group had unique needs, leading us with the goal to design solutions that would gamify information and empower learning.
Challenges: We needed to consider the emotional and physical state of our young users. A challenging game could cause exhaustion and frustration. Complex reward systems and penalties may add extra stress.
Considerations: Most users would be using the app in hospitals. How would we use captivating graphics and simple interactions to generate excitement and interest?
After many rounds of brainstorming, user testing, communicating with Beaba...
I worked with my team to create an interactive encyclopedia to help users read and understand terms visually. We designed interactions for 10 of Beaba's 200+ terms as a proof of concept.
Example pages
From research, children love customization so I designed a reward and customization system with my team to encourage book exploration and reading. This includes surprise item pop-ups, reading achievements, and reading progress.
Character Customization
Character Customization
Reading Achievements
Reading Achievements
Takeaways
What I learned
It's important to consider the culture of the users you're designing for. I learned that user experiences vary across cultures. For example, in Portuguese, "table of contents" is referred to as an "index." When I initially presented the "table of contents" to Beaba, the team was confused by the terminology.
I also learned the importance of being passionate about the problem over the design and HAVE FUN. If everyone’s having fun then everyone stays motivated even during the challenging moments. For example, we had a meeting at 7am with Beaba (to meet Brazil time zone) and everyone was tired but we were still very excited to share our progress because we just really enjoyed exploring the problem space!
Takeaways
What I learned
It's important to consider the culture of the users you're designing for. I learned that user experiences vary across cultures. For example, in Portuguese, "table of contents" is referred to as an "index." When I initially presented the "table of contents" to Beaba, the team was confused by the terminology.
I also learned the importance of being passionate about the problem over the design and HAVE FUN. If everyone’s having fun then everyone stays motivated even during the challenging moments. For example, we had a meeting at 7am with Beaba (to meet Brazil time zone) and everyone was tired but we were still very excited to share our progress because we just really enjoyed exploring the problem space!
Takeaways
What I learned
It's important to consider the culture of the users you're designing for. I learned that user experiences vary across cultures. For example, in Portuguese, "table of contents" is referred to as an "index." When I initially presented the "table of contents" to Beaba, the team was confused by the terminology.
I also learned the importance of being passionate about the problem over the design and HAVE FUN. If everyone’s having fun then everyone stays motivated even during the challenging moments. For example, we had a meeting at 7am with Beaba (to meet Brazil time zone) and everyone was tired but we were still very excited to share our progress because we just really enjoyed exploring the problem space!
Takeaways
What I learned
It's important to consider the culture of the users you're designing for. I learned that user experiences vary across cultures. For example, in Portuguese, "table of contents" is referred to as an "index." When I initially presented the "table of contents" to Beaba, the team was confused by the terminology.
I also learned the importance of being passionate about the problem over the design and HAVE FUN. If everyone’s having fun then everyone stays motivated even during the challenging moments. For example, we had a meeting at 7am with Beaba (to meet Brazil time zone) and everyone was tired but we were still very excited to share our progress because we just really enjoyed exploring the problem space!
What I would do differently
With more time, I wish we could have conducted user testing with pediatric patients but this would lead to regulations and paperwork. Instead, we conducted user testing with kids just to learn their thoughts on the interactions.
I would have liked to worked on the branding and scalability of the designs. One of the tradeoffs to meet our deadline was that we focused more on the gamification, interactions, and organization of the app rather than the branding and making design components.
What I would do differently
With more time, I wish we could have conducted user testing with pediatric patients but this would lead to regulations and paperwork. Instead, we conducted user testing with kids just to learn their thoughts on the interactions.
I would have liked to worked on the branding and scalability of the designs. One of the tradeoffs to meet our deadline was that we focused more on the gamification, interactions, and organization of the app rather than the branding and making design components.
What I would do differently
With more time, I wish we could have conducted user testing with pediatric patients but this would lead to regulations and paperwork. Instead, we conducted user testing with kids just to learn their thoughts on the interactions.
I would have liked to worked on the branding and scalability of the designs. One of the tradeoffs to meet our deadline was that we focused more on the gamification, interactions, and organization of the app rather than the branding and making design components.
What I would do differently
With more time, I wish we could have conducted user testing with pediatric patients but this would lead to regulations and paperwork. Instead, we conducted user testing with kids just to learn their thoughts on the interactions.
I would have liked to worked on the branding and scalability of the designs. One of the tradeoffs to meet our deadline was that we focused more on the gamification, interactions, and organization of the app rather than the branding and making design components.
Thank you for reading <3
Explore my other projects
Thank you for reading <3
Explore my other projects
Thank you for reading <3
Explore my other projects
Thank you for reading <3
