Storio

A storytelling app that fosters connection and engagement across generations.

Team

UX Designer (my role)

Visual Designer (my role)

UX Researcher

Project Manager

Design Hackathon

Project type

4 Days

Timeline

Figma

Adobe Photoshop

Figjam

Pen & paper


Figma

Adobe Photoshop

Figjam

Pen & paper


Tools Used

Concept creation

What problem are we solving here?

What problem are we solving here?

Modern nuclear families and diaspora leave many children feeling isolated due to distance from their home, culture and larger family units and communities. This situation is exacerbated for children from disadvantaged backgrounds, who often lack involved parental figures, who struggle to dedicate quality time, particularly during bedtime storytelling. leaving them without the crucial support and engagement needed for an emotionally and culturally enriching upbringing.

Modern nuclear families and diaspora leave many children feeling isolated due to distance from their home, culture and larger family units and communities. This situation is exacerbated for children from disadvantaged backgrounds, who often lack involved parental figures, who struggle to dedicate quality time, particularly during bedtime storytelling. leaving them without the crucial support and engagement needed for an emotionally and culturally enriching upbringing.

How did I approach this?

Quick Peek at the Solution

01

Designing specifically for our young listeners, it's crucial to recognize that our approach is rooted in creating an engaging, educational, and safe environment.

02

A feature, the "DreamScape Mode," specifically designed to enhance the bedtime experience. This mode employs a combination of gentle storytelling, designed to help user relax and unwind before sleep.

03

Given our focus on a diverse user demographic that spans from young children to individuals over 50, ensuring accessibility through larger UI elements and bright colors and images was crucial to accommodate.

Empathise

Problem Statement

Modern nuclear families leave many children feeling culturally isolated due to distance from their home, culture and community.

Why we should address this?

Why we should address this?

01

Children with a strong sense of cultural identity tend to have higher self-esteem and better mental health. Understanding and connecting with their cultural heritage can provide a sense of belonging and stability, which is essential for their overall psychological development and well-being.

Children with a strong sense of cultural identity tend to have higher self-esteem and better mental health. Understanding and connecting with their cultural heritage can provide a sense of belonging and stability, which is essential for their overall psychological development and well-being.

02

Culturally aware children are more likely to grow into empathetic adults with a deep understanding of diversity and multiculturalism. This awareness fosters social cohesion and tolerance, contributing to more inclusive societies where differences are respected and valued.

Culturally aware children are more likely to grow into empathetic adults with a deep understanding of diversity and multiculturalism. This awareness fosters social cohesion and tolerance, contributing to more inclusive societies where differences are respected and valued.

03

In a rapidly globalizing world, there's a risk of cultural homogenization and loss of diversity. Encouraging children to connect with their cultural roots helps in the preservation of unique traditions, languages, and practices, ensuring that rich cultural heritages are passed down to future generations.

In a rapidly globalizing world, there's a risk of cultural homogenization and loss of diversity. Encouraging children to connect with their cultural roots helps in the preservation of unique traditions, languages, and practices, ensuring that rich cultural heritages are passed down to future generations.

User demographic: Fostering connections between the two demographics enriches cultural continuity and mutual understanding.

User demographic: Fostering connections between the two demographics enriches cultural continuity and mutual understanding.

Age Range: 50 years and older


Interests: Sharing life experiences, cultural heritage, teaching and mentoring younger generations


Geography: Global


Background: Includes retirees, grandparents, educators, authors, and anyone with stories to share; a rich tapestry of life experiences and wisdom

Age Range: 50 years and older


Interests: Sharing life experiences, cultural heritage, teaching and mentoring younger generations


Geography: Global


Background: Includes retirees, grandparents, educators, authors, and anyone with stories to share; a rich tapestry of life experiences and wisdom

Age Range: 50 years and older


Interests: Sharing life experiences, cultural heritage, teaching and mentoring younger generations


Geography: Global


Background: Includes retirees, grandparents, educators, authors, and anyone with stories to share; a rich tapestry of life experiences and wisdom

Age Range: 4 to 12 years old, catering to early learners and pre-teens with content segmented by age appropriateness


Interests: Stories that spark imagination and curiosity


Family Structure: Lives in various family setups, from nuclear families to extended families or in non-traditional households. May have limited access to live storytelling traditions at home.

Age Range: 4 to 12 years old, catering to early learners and pre-teens with content segmented by age appropriateness


Interests: Stories that spark imagination and curiosity


Family Structure: Lives in various family setups, from nuclear families to extended families or in non-traditional households. May have limited access to live storytelling traditions at home.

User persona: Young learners with a thirst for cultural stories and mythical tales, the personas underline the importance of curating a rich, engaging content library that sparks their imagination and connects them with their cultural heritage and the diverse cultures around the world.

User persona: Young learners with a thirst for cultural stories and mythical tales, the personas underline the importance of curating a rich, engaging content library that sparks their imagination and connects them with their cultural heritage and the diverse cultures around the world.

User persona: Older Adults eager to share their wealth of knowledge and stories, personas highlighted the need for an accessible platform where older generations can contribute content, bridging the generational gap.

User persona: Older Adults eager to share their wealth of knowledge and stories, personas highlighted the need for an accessible platform where older generations can contribute content, bridging the generational gap.

Define

Exploratory Questions: The initiative aims to boost psychological well-being, strengthen social cohesion, and safeguard cultural heritage, reflecting a comprehensive approach to nurturing individual and communal identity.

Exploratory Questions: The initiative aims to boost psychological well-being, strengthen social cohesion, and safeguard cultural heritage, reflecting a comprehensive approach to nurturing individual and communal identity

Exploratory Questions: The initiative aims to boost psychological well-being, strengthen social cohesion, and safeguard cultural heritage, reflecting a comprehensive approach to nurturing individual and communal identity.

01

How can Storio construct a digital platform that expertly merges educational material and entertainment, tailored to suit the varying interests and developmental needs of children during bed time, aligning with our aim to support cultural identity and self-esteem enhancement?

How can Storio construct a digital platform that expertly merges educational material and entertainment, tailored to suit the varying interests and developmental needs of children during bed time, aligning with our aim to support cultural identity and self-esteem enhancement?

02

What approaches can Storio take to improve parental control and security measures, addressing content suitability and digital safety concerns, to build parental confidence and encourage their approval of the app for their children's use, in line with our objective of promoting psychological well-being?

What approaches can Storio take to improve parental control and security measures, addressing content suitability and digital safety concerns, to build parental confidence and encourage their approval of the app for their children's use, in line with our objective of promoting psychological well-being?

03

Which tactics can Storio implement to personalize the app experience for distinct age demographics, ensuring it remains user-friendly, captivating, and educationally beneficial for each child, thereby supporting our goals of enhancing social cohesion and preserving cultural heritage?

Which tactics can Storio implement to personalize the app experience for distinct age demographics, ensuring it remains user-friendly, captivating, and educationally beneficial for each child, thereby supporting our goals of enhancing social cohesion and preserving cultural heritage?

Comparative Analysis: Analyze competitors and similar solutions to identify gaps and opportunities.

Comparative Analysis: Analyze competitors and similar solutions to identify gaps and opportunities

Comparative Analysis: Analyze competitors and similar solutions to identify gaps and opportunities.

Feature List Development: Outlining the features that will address the users' needs and problems.

Feature List Development: Outlining the features that will address the users' needs and problems

Feature List Development: Outlining the features that will address the users' needs and problems.

Kids profile Interface

Culture and Language Relevant stories

Culture and Language Relevant stories

Personalized Recommendations & Collections

Personalized Recommendation & Collections

Voice assistance  & language inclusivity

Voice assistance  & language inclusivity

Interactive elements and animations to make it fun

Interactive elements and animations to make it fun

Kids friendly voice search and type search to

Kids friendly voice search and type search to

Parental screen time control

Parental screen time control

Security-Parental Controls and protection of user data

Security-Parental Controls and protection of user data

Content Discovery- Search functionality and curated playlists

Content Discovery- Search functionality and curated playlists

Offline Listening-Downloading podcasts and watching saved episodes

Offline Listening-Downloading podcasts and watching saved episodes

Older adults profile Interface

Playback Controls- Play, pause, skip forward as well as speed adjustments

Playback Controls- Play, pause, skip forward as well as speed adjustments

User walkthrough for easy understanding

User walkthrough for easy understanding

Larger UI components for accessibility

Larger UI components for accessibility

Voice assistance  & language inclusivity

Voice assistance  & language inclusivity

AI generated thumbnail & tags

AI generated thumbnail & tags

Easy to record, edit & publish feature for content creators

Easy to record, edit & publish feature for content creators

Ideate

Product Definition: Conceptualized on what kind of product will solve the identified problems

Product Definition: Conceptualized on what kind of product will solve the identified problems

01

An engaging storytelling platform that bridges generations, encouraging the sharing of wisdom, stories, and values. This not only entertains but educates, fostering meaningful connections and instilling essential life lessons.

An engaging storytelling platform that bridges generations, encouraging the sharing of wisdom, stories, and values. This not only entertains but educates, fostering meaningful connections and instilling essential life lessons.

02

A platform designed to captivate both children and the older generation, offering content that is both

engaging and culturally relevant.

A platform designed to captivate both children and the older generation, offering content that is both engaging and culturally relevant.

A platform designed to captivate both children and the older generation, offering content that is both

engaging and culturally relevant.

03

A platform that prioritizes accessibility with an easy-to-use interface comprehensible to both children and storytellers. This ensures a seamless experience for users of all ages, encouraging regular interaction with app.

A platform that prioritizes accessibility with an easy-to-use interface comprehensible to both children and storytellers. This ensures a seamless experience for users of all ages, encouraging regular interaction with app.

Heuristic Evaluation: Evaluated the existing solutions or concepts based on usability principles to inspire new ideas

Heuristic Evaluation: Evaluated the existing solutions or concepts based on usability principles to inspire new ideas

Heuristics

How its applicable for Kids

Match Between the System and the Real World

Match Between the

System and the Real World

The design should speak the users' language. As, children tend to focus more on visuals, we focused on having few but attention grabbing visuals.

Recognition Rather than Recall

Recognition Rather than Recall

Minimize the user's memory load by making elements, actions, and options recognizable.

Aesthetic and Minimalist Design

Aesthetic and

Minimalist Design

Interfaces should not contain information that is irrelevant or rarely needed. We introduced a horizontal view to make it more immersive.

Heuristics

How its applicable for Story tellers

Visibility of System Status

Visibility of System Status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

User Control and Freedom

User Control and Freedom

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action.

Minimize Cognitive Load

Minimize Cognitive Load

Present information in digestible chunks and avoid overwhelming seniors with too much content or too many options on screen at once.

User Journey Mapping (User Flow): Mapped out potential solution and how users would navigate Storio to achieve their goals

User Journey Mapping (User Flow): Mapped out potential solution and how users would navigate Storio to achieve their goals

Prototype

Wireframing: Sketched the basic layout and structure of Storio.

Wireframing: Sketched the basic layout and structure of Storio

Wireframing: Sketched the basic layout and structure of Storio.

  • Part 1: Kids profile

  • Part 2: Kids story interface

  • Part 3: Story teller profile

  • Part 1: Kids profile

  • Part 2: Kids story interface

  • Part 3: Story teller profile

Changes after low-fidelity Prototype

Changes after low-fidelity Prototype

01

Streamlined Onboarding: By removing the initial user role selection screen, we've streamlined the onboarding process, focusing on parents as primary users. This decision simplifies the start experience, making it more intuitive and efficient.

Streamlined Onboarding

By removing the initial user role selection screen, we've streamlined the onboarding process, focusing on parents as primary users. This decision simplifies the start experience, making it more intuitive and efficient.

02

Unrestricted Story Discovery: Eliminating the story category selection enhances discovery by removing limitations on story variety. This approach broadens user exploration, offering a richer, more diverse storytelling experience.

Unrestricted Story Discovery: Eliminating the story category selection enhances discovery by removing limitations on story variety.

This approach broadens user exploration, offering a richer, more diverse storytelling experience.

Unrestricted Story Discovery

Eliminating the story category selection enhances discovery by removing limitations on story variety. This approach broadens user exploration, offering a richer, more diverse storytelling experience.

03

AI-Driven Personalization: Introducing AI to generate thumbnails and descriptions significantly enriches user interaction, offering tailored, visually appealing story previews. This leverages technology to improve content relevance and engagement, showcasing our commitment to innovative, user-centric design.

AI-Driven Personalization

Introducing AI to generate thumbnails and descriptions significantly enriches user interaction, offering tailored, visually appealing story previews. This leverages technology to improve content relevance and engagement, showcasing our commitment to innovative, user-centric design.

Design Components and System: Established the visual language and UI elements for Storio.

Design Components and System: Established the visual language and UI elements for Storio.

UI Components

Label

Helper text

Label

Content

Helper text

Label

Helper text

Search

123 Ad

Title

Label

Label

􀆉

􀆊

June 2023

􀆊

sun

mon

tue

wed

thu

fri

sat

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Story title

Hindi

Mythology

4 Years and younger

Short stories with simple language, and easy to understand.

Color palette

#7B2CBF

#7B2CBF

Gray 900

Gray 900

Gray 800

Gray 800

Gray 600

Gray 600

Gray 400

Gray 400

Text & Font type

Intoducing Storio: where stories comes to life

Intoducing Storio: where stories comes to life

01

Understanding the importance of user comfort, we've integrated a Landscape Mode. This feature caters to the natural way children interact with tablets and screens, ensuring a more comfortable viewing experience.

Understanding the importance of user comfort, we've integrated a Landscape Mode. This feature caters to the natural way children interact with tablets and screens, ensuring a more comfortable viewing experience.

02

Recognizing the importance of voice in the modern digital experience, especially for kids who may not yet be fluent readers, we offer Voice and Type Search capabilities.

Recognizing the importance of voice in the modern digital experience, especially for kids who may not yet be fluent readers, we offer Voice and Type Search capabilities.

03

A child's favorite stories are always just a tap away, thanks to the “Favorites” Section. This personal space within the app encourages repeated engagement with the stories they love.

A child's favorite stories are always just a tap away, thanks to the “Favorites” Section. This personal space within the app encourages repeated engagement with the stories they love.

01

We've made recording, editing, and publishing stories remarkably straightforward. With just a few taps, storytellers can capture their narratives, refine them with intuitive editing tools.

We've made recording, editing, and publishing stories remarkably straightforward. With just a few taps, storytellers can capture their narratives, refine them with intuitive editing tools.

02

AI-Generated Thumbnails add a visual touch to each story, capturing the essence of the narrative through automatically generated, visually appealing images.

AI-Generated Thumbnails add a visual touch to each story, capturing the essence of the narrative through automatically generated, visually appealing images.

03

We've developed a comprehensive User Walkthrough. This feature is designed for easy understanding, gently guiding new users through our platform's functionalities and features.

We've developed a comprehensive User Walkthrough. This feature is designed for easy understanding, gently guiding new users through our platform's functionalities and features.

Learnings

Here’s what we learned

Here’s what we learned

Strength in Diversity: Working together, we discovered that diverse perspectives and expertise within our team lead to more innovative solutions and stronger outcomes, highlighting the power of collaboration.

Strength in Diversity: Working together, we discovered that diverse perspectives and expertise within our team lead to more innovative solutions and stronger outcomes, highlighting the power of collaboration.

Flexibility and adaptability : The project taught us the importance of being flexible and adaptable in our design process, allowing us to effectively respond to feedback and unforeseen challenges

Flexibility and adaptability : The project taught us the importance of being flexible and adaptable in our design process, allowing us to effectively respond to feedback and unforeseen challenges

The Importance of User-Centric Design: We learned that focusing on the needs and experiences of the user is key to creating successful and impactful products, underscoring the value of empathy in design.

The Importance of User-Centric Design: We learned that focusing on the needs and experiences of the user is key to creating successful and impactful products, underscoring the value of empathy in design.


Shivangi Khandelwal

shivangik1599@gmail.com

Made with love © 2023 Shivangi Khandelwal


Shivangi Khandelwal

shivangik1599@gmail.com

Made with love © 2023 Shivangi Khandelwal


Shivangi Khandelwal

shivangik1599@gmail.com

Made with love © 2023 Shivangi Khandelwal


Shivangi Khandelwal

shivangik1599@gmail.com

Made with love © 2023 Shivangi Khandelwal