StoryBear

Client Project • UI UX Design • Prototyping

Optimized StoryBear's product and crafted an efficient UX strategy, tailored for time-poor parents

Type of Project

Team

My Role

Length of Project

Tools Used

Platform

Deliverables

Client Project

Four UX Designers • Alif Jani, Reginald Goh, Samantha Tan

Research, Wireframing, Usability Testing, UI Design, Prototyping

Three weeks

Figma, Illustrator, Zoom

Mobile and Desktop Website

High fidelity prototype for a Shopify compatible website

Key features: Landing Page, Uses cases, Product page and purchase flow

IDENTIFYING THE PROBLEM

Promoting to StoryBear as a versatile and long-term solution for child’s reading and development

Our task was to develop a UX strategy for StoryBear, an electronic pen and sticker product aimed at fostering child-parent connections through recorded readings. The strategy should encompass insights from interviews with time-poor parents, usability testing, and prototyping. Additionally, identify market segments and enhance the current marketing strategy.

From synthesizing the findings from our interviews, we came up with a problem statement

Parents need an alternative to screen time that adapts to their child’s different development stages so that the child is entertained and engaged while parents are busy with work.

THE SOLUTION

02

01

Scrolling Landing page split into 5 sections

Hero image + Call to action • How it works • Use cases • Supporting Data • Customer Reviews

In order to cater to busy parents, we opted to design our website's landing page with essential information prominently displayed. This enables parents to access dedicated pages for each section when they have more time available.

Suggesting alternative Use Cases

The versatile use case library enables users to explore practical applications of StoryBear, age-filterable for tailored activities helping to enhance engagement and conversion rates with relevant information

IDENTIFYING THE GAPS

We created a diagram to visually depict the various gaps we identified within different aspects of the brief. We noted down what our client wanted as well as the current information we had about our consumers. We pinpointed Chameleon Reader as our primary competitor for conducting a competitive analysis. Tonies and Osmo were our best-in-class examples for comparative analysis.   

We were looking specifically at how they informed customers about product knowledge, purchase flows, and customer support for refunds and returns.  

How parents purchase products for their children

After conducting our initial research, we wanted to hear from parents how they viewed the importance of reading to their child’s development, how screen time factored into their child’s daily routine, how often they purchased toys for education, their budget for toys and the platform they purchase toys on as well as who decides the toy to purchase and play with. 

We conducted user interviews with 11 parents, 6 local and 5 expatriate parents. However, our findings showed similar trends that allowed them to be grouped together instead of being separated. 

We were interested in the initial impressions parents had of the product, gauge their comprehension of the current instructions, and gather any feedback they might have.

We created an affinity map to synthesize insights from the data points gathered. From this, we developed personas to develop our problem statement and create a viable solution.

Parents value a toy’s longevity and educational value

  • Parents are aware that reading benefits a child’s development but don’t understand the exact benefits.

  • Method of shopping: Online on phones

  • General consensus for the child to have the “least amount of screen time”.

  • Prefer to defer to the child’s autonomy in picking toys and activities to do to keep them interested in learning.

We recognized the significance of incorporating alternative use scenarios, as they served as a crucial selling point for parents when rationalizing their investment in a higher-priced toy. These alternative uses encompassed demonstrating how the toy could adapt to different purposes as the child matured and highlighting its versatility beyond just reading.

From the points we synthesized from our user interviews and contextual inquiry, we created our persona.

CRAFTING THE SOLUTION

Based on insights gleaned from user interviews and contextual inquiries, we were able to redefine the previous gaps as "building a community base through use cases" and finding solutions to bridge the gap in product understanding to enable remote sales without the need for physical interaction with the product.

Next, we did a feature and content prioritization table to synthesize content identified by our users & our client’s needs to prioritize which features we needed for the minimum viable product.

The site will be predominantly for mobile devices and optimised for Shopify

Landing Page:

  • Explains how the product works

  • Emphasizes longevity

  • Showcases use cases

  • Concise to browse for busy parents

  • Highlight the educational value of the product for children

Purchasing:

  • Technical information about the product

  • Checking out process optimised for shopify

DESIGN - MID FIDELITY

We believed that a single scroll-down page showcasing all these elements would provide the most effective and efficient presentation of our product, catering to our target audience of busy parents.

After identifying our minimum viable product, we started looking at different UI to design the best visualization of the different features of the landing page. Our sources of inspiration were our best-in-class examples, Tonies and Osmo.

After creating the different sections of the landing page, we moved to creating the flow and content for purchasing and use cases.

TESTING AND ITERATIONS

MAIN ITERATIONS - 01

Reiterations for the Landing Page - Instructions feature

Insight: Using a video instead of a gif would easier to understand

We had feedback from our users who felt that having a video would give more of a human touch and convey the message faster than a GIF. They preferred not having to wait for the animation of the gif to appear.

Our solution to this was to come up with three different methods of conveying information, a gif, video, and an interative demo and comparing them. Each of them served a different purpose and we wanted one that best suited our client and target customers.

From this graph, we determined that a video would be the best suited for our needs and created a comprehensive video storyboard that included shot arrangements, concise descriptions for each shot, and corresponding voiceover scripts to assist them in visualizing the flow of the video.

We also created an interactive demo that we tested with our users. Many of them said that it was a really interesting concept and they would be keen on exploring it if they had more time and not the main mode of conveying information.

Interactive Demo

MAIN ITERATIONS - 02

Insight: The current purchase is confusing and has redundant steps

Simplifying the purchase flow

We made it one-step process from landing page to product page to reduce any confusion. We felt the idea of selling separate products was better suited to be explored in the future.

Reiterations for the Landing Page - Longevity and Use Cases

Insight: Parents were interested in use cases but found the current layout confusing

Parents suggested new use cases and were interested and felt more convinced to purchase the pen. However, they weren’t sure what the purpose of the gif was.

Merging the sections for clarity

We put together the "Longevity" and "Use Case" points into a single section and sorted the use cases by age group. This section includes both "Toddlers" or "1 - 3 yrs" to give more comprehensive information.

MAIN ITERATIONS - 03

Reiterations for the Landing Page - Purchase

Users felt that the term "Quick add" was uncommon. They also mentioned price-consciousness when presented with bundle versus individual prices. Additionally, including multiple categories caused confusion.

MAIN ITERATIONS - 03

Reiterations for the Use Cases Page

Insight: The current layout feels unorganised and lacks consistency

Users feedbacked that the landing page use cases and the dedicated page use cases did not feel connected.

Conventional naming

In analysing our card sort findings, we aimed to pinpoint how parents categorize activities—be it by age groups or the names of those age categories. Our decisions centered on adopting the most commonly favored categories.

This prototype features a home page with clickable links to other fully fleshed-out sections

Please click on the image to view a clickable prototype.

NEXT STEPS

REFLFECTIONS

We chose to focus on a mobile-friendly desktop version because it was the most suitable option for our MVP given our tight timeline. If we had more time, we would also develop a dedicated desktop version.

This marked my fifth and concluding project during my time at General Assembly's boot camp, and it represented my inaugural client-focused UX project. It proved to be an invaluable learning experience in effectively aligning my client's requirements with the needs of the target audience to craft the most viable product. What made this endeavor particularly enriching was the expertise my teammates brought from their prior research experiences, which greatly informed our research strategy.

I would like to thank my facilitators at General Assembly, Thaian and Shadiq for their mentorship and guidance, my teammates for their hard work, collaboration, and commitment, as well as StoryBear for entrusting us with the opportunity to work on this project, allowing us to apply our skills and knowledge to a real-world scenario.