Digitales

A storytelling app for future storytellers

Product Research & Design

A digital playground to help children to learn the structure of storytelling.

Albert Einstein said it best. 'If you want your children to be smart, tell them stories. If you want them to be brilliant, tell them more stories.' Digitales is a creative outlet for children (aged 6–7 years old) to unlock their imagination and turn wacky ideas into brilliant stories through facilitated story structures while having fun.

A digital playground to help children to learn the structure of storytelling.

Albert Einstein said it best. 'If you want your children to be smart, tell them stories. If you want them to be brilliant, tell them more stories.' Digitales is a creative outlet for children (aged 6–7 years old) to unlock their imagination and turn wacky ideas into brilliant stories through facilitated story structures while having fun.

About the project

Timeline

Sep - Dec 2020
(4 Months)

Team

Joyce Xiao

Product Designer
& Scrum Master

Binyu Xu

Product Designer

Iris Zeng

Product Designer

Inda Macias

Project Manager
& Video Editor

Jasmine Wong

Developer

Sanket Redekar

Developer

My Contribution

UX Research
Concept Development
Interaction Design
Visual Design
Usability Testing
Prototyping
Photo by Markus Spiske on Unsplash

Heading

Heading

A digital playground to help children to learn the structure of storytelling.

Albert Einstein said it best. 'If you want your children to be smart, tell them stories. If you want them to be brilliant, tell them more stories.' Digitales is a creative outlet for children (aged 6–7 years old) to unlock their imagination and turn wacky ideas into brilliant stories through facilitated story structures while having fun.

about the project

Timeline

Sep - Dec 2020

Client

Team

Joyce Xiao
Product Designer
Mary Wilson
Product Designer
Lan Wang
Technical Designer
Chenjie Whatley
2D Concept Artist
Ulisses D'Ávila
Game Developer

My Contribution

UX Research
Concept Development
Interaction Design
Interface Design
Usability Testing
Prototyping

About the project

Timeline

Sep - Dec 2020

Client

Team

Joyce Xiao
Product Designer
Mary Wilson
Product Designer
Lan Wang
Technical Designer
Chenjie Whatley
2D Concept Artist
Ulisses D'Ávila
Game Developer

My Contribution

UX Research
Concept Development
Interaction Design
Interface Design
Usability Testing
Prototyping

Don't feel like reading? Watch our video.

Problem

Young learners are no longer engaged with the traditional learning methods.

Storytelling is a cognitive development tool that help “elicit children's thoughts, identify their distortions, and help them to more accurately make sense of their world”(Friedberg, 1994, p. 216). Through research, we found that most traditional learning methods have failed to adapt to the widespread uptake of virtual learning.

OPPORTUNITY

How might we facilitate socially driven creative digital storytelling, through multimedia, to foster latent learning?

Solution

A storytelling app that enables children to turn collected words into objects and use them to create their own stories.

Catch words in your space

Children can collect DigiPix by scanning real-world text using the camera. We created this fun scavenger hunt experience for children to search and collect texts in their space,

Infuse fun into learning

Children can use the texts they collected and incorporate them into their stories as virtual items. They can unleash their imagination and bring their wildest ideas to life while expanding their vocabulary and learning proper story structure without realizing it.

Complete quest to earn rare DigiPix & DigiGIFs

Children can use these DigiPix and DigiGIFs to their collection and use them in their stories. This gamified reward system encourage children to explore and try out different aspects of the app.

Complete quest to earn rare DigiPix & DigiGIFs

Children can use these DigiPix and DigiGIFs to their collection and use them in their stories. This gamified reward system encourage children to explore and try out different aspects of the app.

Collaborate learning through co-authoring of stories

A story is comprised of 3 segments: beginning, middle, and end. Learners not only can kick start their own story but also add a new story segment to someone else's story.

Design Process

Okay, but how did you get to the solution?

design approach image

1. Discover

Find out how children engage with stories

01

Discover

Find out how children engage with stories

02

DEFINE

Find the missing gaps of storytelling experience

03

design

Ideate & test a storytelling learning app

04

deliver

Prototype an engaging & fun experience

expert interview

Interviews with education experts revealed 3 insights on how children learn.

Given the age-related ethical research guidelines, the team was unable to reach out to any children. Alternatively, we conducted interviews with 8 subject matter experts to understand the learning process of children.

Key Findings

1

Most 6–7-year-olds are already reading and sharing stories. Therefore, it is important to provide a progressive learning experience to achieve a strong understanding of authoring their own stories.

2

The educators emphasized children should lead their own educational experience rather than instructed in a controlling way so learners feeling a sense of ownership.

3

Dr.Shinas mentioned that word-image visualization can help to provide a digital latent learning experience for children that utilizes progressive learning.

user analysis

Children at 6-8-year old are learning how to read and like to engage with peers.

 Expanding vocabulary skills, allowing for expression of interests, thoughts and feelings
 Read and write simple words, sentences and texts
 Use language skills as a means of socialization
 Enjoy the challenges of games & puzzles
 Show more independence at reading and writing
 Begin to enjoy dramatic play and assume different roles
 Appeal to bright colours

01

Discover

Find out how children engage with stories

02

DEFINE

Find the missing gaps of a storytelling experience

03

design

Ideate & test a storytelling learning app

04

deliver

Prototype an engaging & fun experience

2. Define

Find the missing gaps of the storytelling experience

product positioning map

Identify the missing gap in the market

With the idea of crafting a creative storytelling experience in mind. The team researched existing products with storytelling elements in the market.

Design opportunities

1

How might we help young learners tell a story without writing any actual words?

2

How might we gamify the learning experience to achieve latent learning?

3

How might we craft a collaborative learning experience for young learners?

PICKING THE DEVICE

Creating a mobile game experience

From conducting statistical research, we decided to design on mobile to reach a greater number of target users.

Why did you design on mobile?

According to MediaSmarts, nearly 49% of students in Grade 4, some are as young as 8 years-old, have access to their own phone or someone else’s phone on a regular basis (MediaSmarts & Brisson-Boivin, 2018).

This statistic helped arrive at the decision to design on mobile so younger children can play the game using their parent’s phone, whereas older children can use their own phone to play under the monitor of parental controls.

Why did you design on mobile?

According to MediaSmarts, nearly 49% of students in Grade 4, some are as young as 8 years-old, have access to their own phone or someone else’s phone on a regular basis (MediaSmarts & Brisson-Boivin, 2018).

This statistic helped arrive at the decision to design on mobile so younger children can play the game using their parent’s phone, whereas older children can use their own phone to play under the monitor of parental controls.

DESIGN PRINCIPLES

Guide and make better design decisions

Child-Friendly Interface

The simple interface design guides children with clear and specific bite-size instructions to helps prevent errors and reduce cognitive load.

Give user the agency

We want to make children the “protagonist” and give the ability to make decisions within the game.

Collaborate with others

Enabling learners to engage in their surroundings and giving them space to collaborate with and learn from their peers.

Reward to engage learning

Receiving rewards motivates users to engage with the app while learning.

Child-Friendly Interface

The simple interface design guides children with clear and specific bite-size instructions to helps prevent errors and reduce cognitive load.

Give user the agency

We want to make children the “protagonist” and give the ability to make decisions within the game.

Collaborate with others

Enabling learners to engage in their surroundings and giving them space to collaborate with and learn from their peers.

Reward to engage learning

Receiving rewards motivates users to continue playing while learning.

01

Discover

Find out how children engage with stories

02

DEFINE

Find the missing gaps of storytelling experience

03

design

Ideate & test the storytelling learning app

04

deliver

Prototype an engaging & fun experience

3. Design

Ideate & test the storytelling learning app

ideation

Through the worst possible idea and brain-sketching exercises, the team came up with 3 key concepts for the app.

1. Tell a story without writing any actual words

"A picture is worth a thousand words". We want to encourage children to tell creative stories using images and child-friendly GIFs. By telling stories through multimedia, learners can develop skills in critical thinking, writing, research, and boost creativity.

2. Gamify the learning experience to achieve latent learning

Children come across new vocabulary in their daily life. Often, they are highly unlikely to look up words that they don’t understand. So, we built a word-image visualization feature powered by the Optical Character Recognition technology to help them learn new words in their space by simply scanning using a smartphone.

3. Craft a collaborative learning experience for children

Children can depict a creative story through co-authoring with their peers. We are inspired by an improvisation technique “Yes, and…” that encourages acceptance of the contributions added by others and builds on the previous story. They can play with peers to create a story with the structure: beginning, middle, and end.

1. Tell a story without writing any actual words

"A picture is worth a thousand words". We want to encourage children to tell creative stories using images and child-friendly GIFs. By telling stories through multimedia, learners can develop skills in critical thinking, writing, research, and boost creativity.

2. Gamify the learning experience to achieve latent learning

Children come across new vocabulary in their daily life. Often, they are highly unlikely to look up words that they don’t understand. So, we built a word-image visualization feature powered by the Optical Character Recognition technology to help them learn new words in their space by simply scanning using a smartphone.

3. Craft a collaborative learning experience for children

Children can depict a creative story through co-authoring with their peers. We are inspired by an improvisation technique “Yes, and…” that encourages acceptance of the contributions added by others and builds on the previous story. They can play with peers to create a story with the structure: beginning, middle, and end.

1. Tell a story without writing any actual words

"A picture is worth a thousand words". We want to encourage children to tell creative stories using images and child-friendly GIFs. By telling stories through multimedia, learners can develop skills in critical thinking, writing, research, and boost creativity.

2. Gamify the learning experience to achieve latent learning

Children come across new vocabulary in their daily life. Often, they are highly unlikely to look up words that they don’t understand. So, we built a word-image visualization feature powered by the Optical Character Recognition technology to help them learn new words in their space by simply scanning using a smartphone.

3. Craft a collaborative learning experience for children

Children can depict a creative story through co-authoring with their peers. We are inspired by an improvisation technique “Yes, and…” that encourages acceptance of the contributions added by others and builds on the previous story. They can play with peers to create a story with the structure: beginning, middle, and end.

User task flows

Ideate & construct critical task flows

  1. First time user experience vs returning user experience
  2. Parent user vs child user entry points
  3. Explore a story vs create a story
Download

SITEMAP

Making information clear and organized

Download

user testing & validation

Validate design decisions and synthesize actionable changes

We conducted both moderated and unmoderated usability testing with a total of 19 participants including educators, EdTech experts, and our fellow grad students. Both types of test were key to collecting both unbiased and constructive feedback which validated design decisions, features, and overall user flow.

Confusing navigation bar

1

Problem

The team witnessed respondents struggled to understand each item in the navigation bar. They commented the use of icons and the meaning of the item were not intuitive and representative.

2

Solution

We redesigned a set of icons that better represents the meaning of each item on the navigation bar.

Children Privacy & Safety

Problem

EdTech experts are concerned regarding allowing children to upload multimedia items might risk their privacy and safety and violating intellectual property in the online community.

Solution

We pivoted to remove the ability to upload multimedia items and decided to provide a child-friendly GIF library called DigiGIFS, alongside DigiPix.

Solution

We added parental controls, guest names, and avatar displays for any information that would be featured on the online community to protect the privacy and safety of young users.

Prompts of story element are confusing

Problem

During the user testing, most respondents had trouble understanding the purpose of selecting questions, upload items and picking a story template.

Solution

We decided to redesign the user flow of creating story and streamline the process to make it simpler and clearer. We also created a modal that provides further instructions to help children to learn more about storytelling.

01

Discover

Find out how children engage with stories

02

DEFINE

Find the missing gaps of storytelling experience

03

design

Ideate & test a storytelling learning app

04

deliver

Prototype an engaging & fun experience

4. Deliver

Prototype an engaging experience

HOw does it work?

Mapping out a user scenario of how a typical user discovers and engages with the app.

introducing...

Digitales, a storytelling app for future storytellers

More on larger browser.

Thanks for stopping by. 🙌

You are reading on a small browser or on mobile browser. For the full case study, please visit it on a larger browser. 💻

future development

If I have more time, what would I work on? 

Creating a dictionary for DigiPix items

In the final prototype, there is the ability to view fun facts about DigiPix items. However, by providing definitions for each Collection item, Digitales would be more EdTech friendly and schools would be more inclined to implement the application.

Advanced levels

Providing different levels which enabled complex storytelling structures would expand the targeted age range. For this, they would also need to incorporate a more complex rating system so users could get tailored feedback.

Trading Collection items with peers

To further incentivize gameplay, giving users the ability to trade their DigiPix collection would increase user interaction. This will require privacy considerations if the trading goes beyond their friendship circle. 

closing thoughts

What I learnt in this project

I am honoured to be working on this challenging yet meaningful project and be a part of this amazing team. Thinking back to the start of the project, I felt directionless because there are so many great offerings in many directions. Being able to dial down on a specific idea and test one idea at a time had led me and the team out of the seemingly puzzling maze. Lastly, I’m content with the direction we are heading toward Digitales and fascinated by the potential for this game.

BEHIND THE SCENEs

Our process

Thanks for reading ❤️

If you’d like to hear more about my experience or chat about design, feel free to shoot me an email. ☕

Next Project

Next Project
BC Tech Ecosystem Visualization
Microsoft
An interactive data visualization platform that tell the story of the evolution of BC tech space.
research
Data Visualization
Interaction Design
prototyping

Next Project

Dangle

An e-commerce ad network that connecting brands with eCommerce stores to promote products