HeroImage.png

Unravel

Motivating early adolescents to read through an interconnected community 

PRODUCT DESIGN, UI/UX, WEB DESIGN

The Problem

Kids become increasingly less motivated to read as they grow older. By the time they have reached early adolescence (age 10–14), many begin to actively resist reading. They often avoid reading when it is time-consuming, they have to stay focused for a long time, the book is uninteresting, or they are struggling with certain reading skills. There is further the issue of searching for a suitable book or waiting weeks for a favourite read to be available at the local library.

ROLES

Research, UI/UX, 
Prototyping, Visual Design, Web Design, Motion Design

TOOLS USED

Figma, Illustrator, After Effects, InDesign

TIMELINE

Oct — Dec 2020
(3 months)

TEAM

DESIGN CHALLENGE

How might we motivate early adolescents to engage in reading while consistently improving their reading skills? 

The Solution

Unravel is an eBook app that aims to motivate early adolescents to read by offering a large selection of their favourite books and an interconnected community. 
Through a fully tailored digital library, kids can see what their friends are reading, independently progress their reading skills, and always find reads they will love. 

Marketing Website

The Unravel website promotes the app to parents and entices them to download the app for their kids. It clearly captures Unravel's values and key features.  

Key Features

Personalized Library

The Unravel library is tailored to what each kid likes to read, so kids can always find reads that best fit their taste. Through the initial onboarding process and the use of AI technology over time, every kid will have their own unique library.

Custom Recommendations 

Kids can automatically generate recommendations based on what they read before, what they want to read now and how long of a read it should be. This simplifies the process and reduces the time it takes to find their next favourite read.

Assistive Reading Technology 

With Unravel, kids will have the assistive tools and technology they need to improve their skills at their fingertips. From audio read aloud to integrated dictionaries, kids can independently progress to higher reading levels.

Reading Buddies

Unravel creates a shared reading experience by  allowing kids to see what their friends are reading and any lists featured on their virtual book shelves. They can also compete with friends for the highest streaks and rankings on the monthly leaderboard. 

Customizable Avatars

Kids can earn gems for the time they spend reading and use them to unlock outfits, gear or items for their avatar. This will let them create their own unique profile character, safely representing them in the virtual space.

THE DESIGN PROCESS

Reshaping Existing Products

The goal of this project was to take a classmate's product concept and transform it in a way which adds value. After engaging in a short design sprint as a class, I had selected Rivia, a reading app for kids prototyped for Android. I then conducted a full heuristic evaluation before deciding on targeting a slightly older age range, as well as switching to a larger tablet interface for a better reading experience. 

Designed by Thano Sipsis

Framing The Problem

Studies show that kids become less motivated to read as they grow older. By the time they are in middle school, many actively resist engaging in reading. Some of the reasons kids refuse to read include: finding books boring, not being able to get immersed into the book, feeling overwhelmed by long pages of text, choosing books beyond their difficulty level, and struggling with certain reading skills.

📌 Most kids begin to actively resist engaging in reading during middle school. As such, the target users will be early adolescents (age 10-14).

Understanding The User

Realizing that early adolescents were the least motivated to read, I surveyed 13 early adolescents to understand the real pain points and frustrations they might be facing. I wanted to know what motivates them to read, what discourages them from reading, and what kind of reading challenges they were facing.

Key Insights

 

POSITIVES 

Kids enjoy the escapism of reading, being able to talk about it with their friends, and gaining new vocabulary.

NEGATIVES

Kids do not enjoy when reading is time-consuming or books are uninteresting.

 

CHALLENGES 

Kids struggle in staying focused for a long time and being motivated to read. 

MOTIVATIONS

What will motivate kids to read more often is if they could find books that interest them right away. 

Priority Feature Requirements 

  • Automatic reading recommendations based on difficulty level or interest

  • Being able to connect with friends by seeing what they are reading

  • Reading streaks, tracked progress and achievements

  • Reward system with customizable profile avatars

  • Options for audio read aloud, defining words and adjusting display of text

Information Architecture & User Flows 

With my app features defined, I created a system map to represent the hierarchical structure within the navigation. I then constructed user flows to understand how the user would interact with the product while performing various tasks.

Wireframes

After doing initial sketches, I created mid-fidelity wireframes and utilized them in a 'crazy eights' exercise with my peers. This is a collaborative design sprint which allowed us to quickly generate various solutions that could improve each other's designs. Afterwards, I continued to iterate before starting the visual design. 

Visual Design 

Conducting visual research, I created a few mood boards to capture possible directions I could take for the look and feel of the app. Then designing at high-fidelity, I did some preference tests with my peers before the final iterations.

Style Guide 

Unravel’s identity mark is a logotype set in Mermaid Bold. I further chose Lato as the primary typeface family because of its clean sans-serif nature, various weights, and rounded details which provide a sense of warmth. The brand colour palette consists of black for primary usage, and white or seagreen for secondary usage.  

Prototype

Key Takeways & Next Steps 

This project gave me the opportunity to design for a target audience outside of my age range, as well as utilize micro-interactions and more advanced animations for the first time. Overall, I learned how to collaborate in remote settings, work within time constraints, and further my knowledge of new UX methodologies. 

If I were to revisit this project, I would continue developing the buddies experience of the app and refine the marketing website. I would also create my own custom navigation icons and illustrations to have a fully cohesive visual style.