Rede - Case Study
Rede is a digital product that empowers children in their educational journey by being their personalized 1-on-1 tutor, enabled by AI technology, helping them improve their reading skills.
Project Overview
My Role. Lead UX Designer
Designed For. Mobile, iOS
Tools. Figma, D-id, ElevenLabs, Mid Journey, ChatGPT
View Prototype Video
Design Process
I used the Double Diamond and the Design Thinking approaches as frameworks to guide my process. It helped me define the right problem. By utilizing a user-centric method, I made sure to put the user at the center of every choice I made.
Project Timeline
Here you can view what I've been working on over the course of 10 weeks.
Secondary Research
Is reading an important factor in a child's development and future outcome?
While researching I found out that when children can't read, learning feels out of reach. Below you can see the percentage of graders scoring below basic reading level in 2019.
So, we must ask ourselves, what happens when children become illiterate adults?
A child who can't read will struggle to:
. write
. do maths
. learn coding
. build critical
. thinking skills
A child who can't read will struggle with everything else!
Children can't be digitally literate if they're not literate!
A child who can't read will struggle to:
. write
. do maths
. learn coding
. build critical thinking skills
A child who can't read will struggle to:
write
do maths
learn coding
build critical thinking skills
A child who can't read will struggle with everything else!
Children can't be digitally literate if they're not literate!
While researching, I discovered that students doing 1-on-1 tutoring are above 98% of all students who study in a class with 30 students per teacher. This data could be explored in my Primary Research, while interviewing parents.
Research Value
As someone who designs user experiences, diving into user research is a real eye-opener. It helped me understand what users want and allowed me to make a design that truly fixes their issues. In my situation, I was curious if families use tutoring, what educational challenges they face — especially with reading, and how parents assist their kids in getting past these hurdles.
Conducting User Interviews to gain additional insights
For the interviews in this case study, I talked to 5 parents who have children in school, are passionate about education, and are always looking to help their children in their educational journey. I asked open-ended questions regarding their children’s education and struggles.
Here you can see four examples of the 20 questions I asked them:
-
Do you believe any specific resources or support systems would greatly benefit children facing literacy and educational difficulties?
-
What are some effective strategies or approaches that can help motivate and engage students in their literacy learning or learning overall?
-
How do you see the role of extracurricular activities in complementing your child's literacy and academic growth?
-
Can you share any successful interventions or initiatives that have positively impacted your child's educational experiences with education and literacy?
Synthesizing Data
I gathered all the interview data using an affinity diagram, grouping data by similarities, allowing me to see different themes and their insights. I created four themes with insights. These served as a guide for the design solution and helped me shape the proto-persona.
Themes
Via secondary research, I discovered that the majority of tutoring students perform in the top 2% compared to their conventionally educated peers, demonstrating the potential to elevate an average student to excellence and a struggling one to average. The same ideas were the most prevalent in my interview data. Therefore, I decided to continue with the theme Personalization 1-1 Parent & Tutor Attention.
How Might We...
Based on these findings, I've crafted a focused question to serve as the cornerstone for my project's direction.
In the brand development process, I began by identifying core brand values. From there, I expanded on a list of adjectives that encapsulated the essence I wanted the app to convey. Subsequently, I curated a collection of images that visually articulated the desired look and feel for the app.
Moodboard Ideation
Moodboard Ideation
Moodboard Ideation
In the brand development process, I began by identifying core brand values. From there, I expanded on a list of adjectives that encapsulated the essence I wanted the app to convey. Subsequently, I curated a collection of images that visually articulated the desired look and feel for the app.
Moodboard V1
The initial version of my moodboard featured lighter shades like tangerine, turquoise, and yellow. While aesthetically pleasing, this color scheme did not pass accessibility testing. Lighter colors often fail to provide sufficient contrast, making text and interactive elements difficult to discern for people with vision impairments or in less-than-ideal lighting conditions. As accessibility is a critical component of user-centered design, I decided against using the initial palette. Instead, I opted for the contrasting and universally readable combination of blue and yellow.
Moodboard V2
The contrast between blue and yellow not only enhances readability and usability but also taps into established principles of color theory. Blue is often associated with qualities like trustworthiness and reliability, while yellow is linked to optimism and attention-grabbing. In the color wheel, these colors are complementary, meaning they sit opposite each other, which naturally creates a high level of contrast and balance in visual experiences. This complementary relationship maximizes readability and draws the viewer's attention to important elements. Given their psychological and aesthetic properties, blue and yellow were carefully chosen as my primary colors to provide a balanced and effective visual experience.
User Stories & Epics
Keeping my user persona's challenges and objectives in focus, I started developing user stories and epics to pinpoint features that would benefit the user.
As I craft these user stories, I am adopting the perspective of Noah, the User Persona. By considering his pain points, motivations, and goals, I am formulating tasks that he can achieve within a prospective digital product. One of his desires is to have a personalized learning environment for his children.
Afterward, I organized all the user stories into distinct Epics, which group together user stories sharing common themes. Below you can see a a sample of user stories.
High-Fidelity Wireframes
After finalizing the brand identity and color scheme, I integrated high-fidelity design components into the prototype. This process required meticulous attention to diverse elements like color, fonts, icons, photos, illustrations, layout design, spacing, and interactive states. This attention to detail allowed me to achieve a cohesive and sophisticated visual embodiment of the brand across the prototype.
The Value of a Persona
In UX design, a user persona serves as a detailed, semi-fictional representation of a target user, helping designers empathize with users' needs, goals, and pain points, thereby enabling more focused and effective design solutions.
Creating a persona was crucial because it enabled me to empathize with the user, comprehend their requirements, and helped me to craft solutions that genuinely address those concerns.
Mid-Fidelity Wireframes
After finalizing the solution sketches, I transformed the screens into mid-fidelity grayscale wireframes. I leveraged my UI inspiration board for ideas.
User Testing & Mid-Fidelity Wireframes
I conducted user testing with 5 participants, 2 times. The participants were all parents with children in school. The feedback was summarized into a prioritization matrix. This helped me to make data-driven decisions, ensuring that resources are allocated effectively, and I am working on the most impactful aspects of the product.
The initial wireframes were testes 2 times, which allowed me to have 3 iterated versions of the wireframes.
The Persona
The persona I created is Noah, a father of 2 children, and was based on the insights gained during the user interviews. Below you can see a summary of the persona's goals and frustrations.
Typography Exploration
In designing a reading app for children, the choice of typefaces was a particularly critical consideration. My research revealed that approximately 1 in 5 children who face reading challenges have some form of dyslexia. Initially, I considered using specialized typefaces designed for dyslexic readers, believing they might make the reading process easier. However, upon delving deeper into the subject, I discovered that such fonts have not conclusively been shown to improve reading for dyslexic children.
This led me to choose Quodlibet Serif and Sans, as each letter in these typefaces is distinct, reducing the likelihood of confusion for young readers. These fonts offer clarity and ease of reading, essential qualities for any educational application aimed at children.
Additionally, I came across Google's recently released Typeface Borel, a handwriting font specifically designed for primary school settings. Launched in July 2023 and crafted by Rosalie Wagner, this font could serve as a valuable addition to the app, further enhancing its educational impact and accessibility.
The design of Borel was initiated following an extensive analysis of research on readability, dyslexia, and the learning process of reading and writing. Throughout the design journey, professionals in the fields of speech therapy and education were involved and their valuable insights were taken into account.
Every individual letter underwent a meticulous study to ensure a seamless, fluid, and uninterrupted writing experience.
Typography
In designing a reading app for children, the choice of typefaces was a particularly critical consideration. My research revealed that approximately 1 in 5 children who face reading challenges have some form of dyslexia. Initially, I considered using specialized typefaces designed for dyslexic readers, believing they might make the reading process easier. However, upon delving deeper into the subject, I discovered that such fonts have not conclusively been shown to improve reading for dyslexic children.
This led me to choose Quodlibet Serif and Sans, as each letter in these typefaces is distinct, reducing the likelihood of confusion for young readers. These fonts offer clarity and ease of reading, essential qualities for any educational application aimed at children.
Additionally, I came across Google's recently released Typeface Borel, a handwriting font specifically designed for primary school settings. Launched in July 2023 and crafted by Rosalie Wagner, this font could serve as a valuable addition to the app, further enhancing its educational impact and accessibility.
The design of Borel was initiated following an extensive analysis of research on readability, dyslexia, and the learning process of reading and writing. Throughout the design journey, professionals in the fields of speech therapy and education were involved and their valuable insights were taken into account.
Every individual letter underwent a meticulous study to ensure a seamless, fluid, and uninterrupted writing experience.
Brand Values
As part of the brand development I started to think of words that would describe the app.
Experience Mapping
Examining the existing task flow without the digital solution from Rede allowed me to pinpoint crucial moments in the experience where the user is most vulnerable.
Moodboard V1
The initial version of my moodboard featured lighter shades like tangerine, turquoise, and yellow. While aesthetically pleasing, this color scheme did not pass accessibility testing. Lighter colors often fail to provide sufficient contrast, making text and interactive elements difficult to discern for people with vision impairments or in less-than-ideal lighting conditions. As accessibility is a critical component of user-centered design, I decided against using the initial palette. Instead, I opted for the contrasting and universally readable combination of blue and yellow.
Core Epic: Interactive Reading
Has significant potential to make a better learning experience for the user's children.
Why? It directly addresses Persona's need for providing an enjoyable and effective way to support their children's learning and foster a love for reading.
Moodboard V2
The contrast between blue and yellow not only enhances readability and usability but also taps into established principles of color theory. Blue is often associated with qualities like trustworthiness and reliability, while yellow is linked to optimism and attention-grabbing. In the color wheel, these colors are complementary, meaning they sit opposite each other, which naturally creates a high level of contrast and balance in visual experiences. This complementary relationship maximizes readability and draws the viewer's attention to important elements. Given their psychological and aesthetic properties, blue and yellow were carefully chosen as my primary colors to provide a balanced and effective visual experience.
Moodboard V2
The contrast between blue and yellow not only enhances readability and usability but also taps into established principles of color theory. Blue is often associated with qualities like trustworthiness and reliability, while yellow is linked to optimism and attention-grabbing. In the color wheel, these colors are complementary, meaning they sit opposite each other, which naturally creates a high level of contrast and balance in visual experiences. This complementary relationship maximizes readability and draws the viewer's attention to important elements. Given their psychological and aesthetic properties, blue and yellow were carefully chosen as my primary colors to provide a balanced and effective visual experience.
Task Flow
The task flow proved to be an invaluable tool for user interface design, serving as a roadmap for the project's overall scope and helped me maintain focus while crafting various screens. The main task flow will take the user through an Interactive Reading Lesson and will finalize on the report screen.
Color Palette
Brand Name Exploration
This is an application for children so I decided to go with “Rede”, which is a playful name that also includes acronyms for 3 key value words: Reading, Education, and Exploration.
Wordmark Exploration
While exploring options for the app's wordmark, I ultimately chose to use the typeface, Borel. This decision was motivated by Borel's readability and educational focus, specifically designed for primary school settings. Its aesthetic and functional qualities aligned perfectly with the app's mission, offering a cohesive and visually appealing brand identity.
App Icon
To align with the app being focused on reading, I created the Logo with the same typeface as the Wordmark and made it look like a book with a blue bookmark.
Sketching
I have gathered a collection of UI elements to help me build an app that would offer an engaging learning through reading experience.
I started with rough drawings to explore different design ideas and concepts for my screens. Referencing my UI Inspiration board, I sketched 4 versions for each screen.
Following the completion of the exploratory sketches, I carefully chose the most favorable elements from each screen and integrated them into a cohesive solution sketch flow.
Collor Palette
Brand Name Exploration
This is an application for children so I decided to go with “Rede”, which is a playful name that also includes acronyms for 3 key value words: Reading, Education, and Exploration.
Wordmark Exploration
While exploring options for the app's wordmark, I ultimately chose to use the typeface, Borel. This decision was motivated by Borel's readability and educational focus, specifically designed for primary school settings. Its aesthetic and functional qualities aligned perfectly with the app's mission, offering a cohesive and visually appealing brand identity.
App Icon
To align with the app being focused on reading, I created the Logo with the same typeface as the Wordmark and made it look like a book with a blue bookmark.
Atomic Design System
I employed the Atomic Design system in the development of the app, breaking down the interface into its most basic elements and then building up to more complex components. This modular approach streamlined the design process, made it more manageable, and ensured consistency and reusability across different parts of the application.
Utilizing the Atomic Design system also lays a foundation for future development, as it establishes a modular and organized framework. This makes it easier for anyone who joins the project later to understand the design logic and efficiently implement updates or additions.
Main Features of the App
AI and live tutoring
This app uniquely brings the main character of each selected book to life, transforming them into a real-time tutor and guide for the child. Once a book is chosen, the primary character accompanies the young reader throughout the experience, offering a deeply immersive and personalized learning journey. This feature not only enhances engagement but also provides children with a relatable guide, making reading a more interactive and enriching experience.
Accessibility Exploration
Ensuring extensive accessibility was a critical aspect of my app's development process, particularly given its educational focus. One feature I concentrated on was text highlighting, as this can significantly aid in comprehension and engagement. I delved into Google's well-researched highlighting methods, which are backed by extensive studies, to inform my own approach. Adopting such rigorously tested methods enabled me to design a feature that is both effective and accessible, enhancing the user experience for a broader audience.
Behind the Scenes
In this diagram, you can see what happens behind the scenes, and how this live AI tutor is going to come to life.
1. Only by putting user needs at the center of our design, we can create successful solutions that meet their needs.
2. Take the feedback and be flexible with changes.
3. Be prepared to constantly iterate, the design process is never finished.
Key Learnings
Other Devices
Looking ahead, I plan to extend the app's availability to tablets and desktop platforms. While the desktop version would offer the largest screen compared to smartphones and tablets, it's the tablet version that holds the most promise. Being lightweight enough to be portable, yet featuring a screen substantially larger than the phone screen, the tablet version would deliver an optimal balance. This would make the reading experience more enjoyable and immersive, offering the best of both worlds in terms of portability and screen real estate.
Next Steps
1.Conduct User Testing with children: Gather real-world data on app usability and engagement from the target audience.
2.Transition from Task Flow to System Flow: Evolve the existing task flow into a comprehensive system flow to better understand user journeys.
3.Develop & Test Minimum Viable Product (MVP): Create a streamlined version of the app incorporating essential features and test for functionality and user acceptance.
4.Launch Pilot Version: Roll out a beta version of the app to a selected group of users for further testing and real-world feedback.
5.Analyze Pilot Feedback & Iterate: Collect data and user feedback from the pilot, then refine the app accordingly before a broader release.
Credits & Bibliography
Illustrations: ‘Learning Changes Everything’ Campaigns, Data Driven Design
Bibliography links:
Augmented Reality (AR) Tutoring Sessions
In a future iteration of the app, consider incorporating Augmented Reality (AR) to bring the main characters of the books into the child's physical environment. The characters could serve as "live" tutors and guides, appearing on the child's desk or beside them as they read, (providing real-time help with pronunciation, vocabulary, and comprehension.) This interactive experience would deepen the child's connection to reading and learning, turning it into an immersive multi-dimensional activity that extends beyond the digital screen.
Future Thinking
Credits & Bibliography
Illustrations: ‘Learning Changes Everything’ Campaigns, Data Driven Design
Bibliography links: