Experiential Design - Task 2: Experience Design Project Proposal

In this week tutorial, we started a new scene, which allows user to scan an image and view a mini AR room. When they click on the mini room, the room will scale up and become a huge room. In the room, user can click on some button to create interaction.

Task 2: Experience Design Project Proposal

After the consultation session, I decided to go with AR Storybook, as I feel more confident in developing this concept. Also, I felt it very useful for helping foster curiosity and comprehension of kids, making the storybook enjoyable and educational.

My aims for this app is:

Child-friendly
Enjoyable

The target audience of this app typically includes:

Young children (ages 3-8)
Parents / Caregivers
Educators

Then I started to find some storybook online specifically for early learners from Storyberries. The story I have chosen is Luna Altoona and the Toothache Potion. The app will share the book's title.

Fig 0.1. Luna Altoona and the Toothache Potion

Written by: Prarthana Gururaj

Illustrated by: Faishal Aziz

Published by: Storyberries

Resource Link: https://www.storyberries.com/halloween-stories-for-kids-luna-altoona-and-the-toothache-potion-bedtime-stories/

A. User Persona

We were required to complete 3 user personas. This will help us understand users' needs, preferences, and pain points, which guides app features, design decisions, and overall functionality. I build my user persona based on my target audience, which is parent, early learner, and educator.

Fig 1.1. User Persona #1

Fig 1.2. User Persona #2

Fig 1.3. User Persona #3

B. User Journey Map

For the user journey map, I selected Emma Chen, a 5-year-old child, as my primary user persona because the storybook app’s target audience is young children. Using Emma’s perspective allows me to focus on creating an app that’s engaging, educational, and intuitive for early learners. This choice will help ensure that the app’s design, navigation, and interactivity cater well to children, making it easy and enjoyable for them to use.

Fig 2.1. User Journey Map - Emma Chen

In the user journey map, each action Emma takes within the app will be broken down into touch points, pain points, and gain points:

Touch Points: These represent each interaction Emma has with the app. They detail where and how she interacts, such as tapping the screen to select a story or swiping to turn pages. Each touch point highlights key moments in her journey with the app.
Pain Points: Pain points are any challenges Emma might face at each touch point. For instance, if she finds it hard to tap smaller icons, or if navigation is unclear, these would be recorded as pain points. Identifying these allows for improvement in design and usability.
Gain Points: Gain points describe the positive outcomes or benefits Emma experiences, like moments of joy or ease. For example, if she enjoys the interactive animations or finds it easy to select a story, these would be recorded as gain points. These insights help emphasize which features are effective and enhance user satisfaction.

For each pain points, I came out with solutions to resolve the challanges user encountered.

Fig 2.2. Pain Points and Solutions

The forgiving touch controls may be:

1. Invisible collider box that is larger than the exact button, so even if Emma doesn’t tap exactly on an object, it still registers.

2. Areas with no interaction could be designated as “neutral zones,” where taps don’t interfere with the experience, for instance when Emma touch on the background elements, the story will not reset, exit, or proceed.

3. If Emma taps on a non-interactive area, the app could gently indicate where to tap by using soft-animation or subtle glow around the target.

C. User Emphathy Map

This empathy map can guide design decisions to ensure the app is intuitive, engaging, and forgiving for young users like Emma. By focusing on her thoughts, emotions, and behaviors, I can refine the app to create an enjoyable, child-friendly experience.

Fig 2.3. Emphathy Map - Emma Chen

D. User Flow

Fig 3.1. User Flow Chart

This user task flow visually maps out the steps a user takes to complete a specific task in an app, helping to clarify the user journey and ensure smooth navigation. It helps me to understand how users interact with the app, streamline processes, and create more intuitive interfaces. The boxes, each marked with different colors, are designed to represent the various buttons within the app.

E. Visualisation

Since this app is primarily based on a storybook, I’ve decided not to include a mood board in the design process. Typically, a mood board is useful for setting the visual tone and atmosphere for a project, but in this case, the app’s design and aesthetic will closely follow the storybook’s established style and themes.

Colour Palette

Fig 4.1. Colour Palette

These colors evoke mystery and enchantment, drawing users into a whimsical world where anything is possible. The darker tones provide a rich backdrop that allows characters and glowing potion effects to stand out, capturing attention and enhancing visual engagement. Additionally, these hues are often associated with calm and imagination, offering a comforting yet intriguing environment ideal for young readers exploring a story filled with magic and discovery.

Typography

Fig 4.2. Original Font

The original font features a playful, cartoonish style with a sans-serif design, giving it a friendly and approachable feel. To maintain a consistent aesthetic, I plan to use a similar font for the app. This choice will ensure the overall look stays cohesive, while also enhancing the app's lighthearted and fun tone, making it appealing to young users.

Next, I began searching for suitable fonts on DaFont and came across Hangyaboly. This font closely resembles the original one used in the book.

Fig 4.3. Hangyaboly

Fig 4.4. Hangyaboly Glyphs

Fig 4.5. Comparision Between Original Font and Hangyaboly

For the topic, I’ve chosen Freak Art, a font with bold, serif characteristics that give off a distinct fantasy feel. This font is perfect for the witch in the AR storybook, as its dramatic, strong presence evokes a sense of mystique and adventure. The serif design adds an air of elegance and sophistication, aligning well with the magical and enchanting themes of the story.

Fig 4.6. Font Mock Up

Fig 4.7. Freak Art Glyphs

Buttons

The buttons that will be used in the app are:

1. Start

2. Rewards (Home)

3. Rewards

4. "Nice to meet you!"

5. Screenshot

6. Exit

I will be designing the buttons myself using Adobe Illustrator.

Fig 4.8. Designing buttons in Adobe Illustrator

Final Button Designs

Fig 4.9. Final Button Designs

Topic Design

For the title design, I wanted to make it visually engaging and unique by creatively transforming certain letters into thematic illustrations. My idea is to replace specific letters with icons that reflect elements of the story, such as transforming one of the letters into a cat or a tooth, which are central to the storyline. Additionally, I’ve modified the "o" in the word "potion" to resemble a potion bottle, adding a fun and magical element that ties directly to the theme.

Fig 4.10. Transforming "o" to potion bottle

Title Design Attempt #1

The initial design featured a landscape-oriented layout. However, after placing it on the Home Screen, I realized it didn’t fit well within the vertical orientation of a phone screen without needing significant scaling down. As a result, I decided to adjust and replace the text to better suit the display.

Fig 4.11. Title Design Attempt #1

Fig 4.12. Adjusted Title

Final Title Design

Fig 4.13. Final Title Design

F. Sketches

In the Luna Altoona and the Toothache Potion AR storybook, the goal is to immerse the user by allowing them to become the main character, Luna. On certain pages, users will interact with magical objects like the potion, the cauldron, and animals, bringing the story to life through engaging AR effects.

Not all pages will feature AR, as the interaction depends on the context of the story. For example, some pages may focus on the narrative without needing any AR elements, while others will include interactive moments where users can actively participate, like mixing the potion or playing with the animals.

The label (exp: p2, p4, p6) at the top right corner of each boxes indicates the page number of the book.

Fig 5.1. Sketches P1-P10

Fig 5.2. Sketches P11-P20

G. Mock Up

Fig 6.1. Mock Up in Figma

The mock up is build in Figma. This section will include the screen visual reference of:

Home
Meet the Characters
Story - 1 page
End of Story
Rewards

1. Home

First I downloaded a picture of castle from FreePik as the background of the Home Screen.

Fig 6.2. Castle from FreePik

To create a strong contrast for the title, I lower the brightness of the background. Then, I added the start button and rewards button in the home page.

Fig 6.3. Lowered Brightness vs Original Brightness

The castle background to transport users into Luna's enchanting world right from the start. The title is prominently displayed to draw attention to the adventure. There are two buttons, Start and Rewards. The Start button is larger to emphasise its primary function, and the Rewards button is slightly smaller for users to view earned rewards.

Fig 6.4. Home

2. Meet the Characters

Due to the limitation of fonts in Figma, I am using Irish Grover as temporary replacement. After the user click on the Start button, the app will introduces the characters visually first. The button positioned at the bottom of the screen adds a friendly and welcoming touch.

Fig 6.5. Meet the Characters

3. Story

In this section, I will be using page 4 as example. Before starting up, users will receive a simple instruction to ensure the camera can effectively scan the users' surroundings.

Fig 6.6. Instruction Reference

When users point their camera at the image target, a 3D effect will pops out from the target. While exploring the story, there will be a collectible elements like chocolate or toothbrush in the story to enhance user engagement.

Fig 6.7. Story - Page 4

4. End of Story

Once users finish reading the book, they have the opportunity to scan the image on the final page to unlock and redeem a unique badge. This badge will be added to the Rewards section, where users can view and collect badges from various books. Each book in the series offers a distinct badge, encouraging readers to explore and collect from different stories, adding a fun and rewarding element to their reading journey.

Fig 6.8. End of Story

5. Rewards

Users can view their collected rewards by clicking either the icon located at the bottom left of the screen or the designated button on the home page. This will bring them to a rewards section designed as a wooden shelf, where each reward they’ve earned is displayed. The shelf acts as a showcase, giving users a sense of accomplishment and progress as they view their achievements.

Fig 6.9. Rewards

To provide a clearer understanding of the app’s functionality and design, I created a walkthrough video of the mockup.

Fig 6.10. Walkthrough Video

Final Task 2: Experience Design Project Proposal

Experience Design Project Proposal - Slides

Fig 7.1. Experience Design Project Proposal - Slides

Experience Design Project Proposal - Presentation Video

Fig 7.2. Experience Design Project Proposal - Presentation Video

REFLECTION

Experience

Conducting user research through personas, journey maps, and empathy maps gave me a solid foundation to understand my audience's needs and motivations. Starting with sketches and transitioning to Figma allowed me to refine and visualize my ideas effectively, resulting in a more user-centered design process.

Observations

I observed that children especially enjoy earning badges and collectibles, which helps create a sense of achievement and encourages repeated app use. Mapping out the user journey showed how rewarding users after story completion would deepen their connection to the app, making the experience more meaningful and enjoyable.

Findings

This task underscored how essential user research is in guiding design decisions that resonate with the target audience. I found that adding a reward system based on user insights was key to making the app more engaging. User research tools, like empathy maps, gave me a clearer view of users' emotional needs, helping me create a more immersive, interactive design. This process taught me that thorough research leads to design choices that not only serve functionality but also enhance user satisfaction and loyalty.

Search This Blog

Tan Zhao Yi (0363285)

Experiential Design - Task 2: Experience Design Project Proposal

Comments

Post a Comment