13 Million Views and Beyond: A UX Case Study on Improving User Engagement with Storytelling and Writing Resources on StoryboxHub

13M+ VIEWS STRONG

Re-inventing StoryBoxHub to inspire the next generation of storytellers

Story Box Library faced the challenge of scaling its impact with outdated platform & infrastructure. Despite launching a promising new product, Story Tools, growth was hindered by infrastructure limitations and a suboptimal user experience.

Role

Sr. Product Designer via Everest Engineering;
Requirements gathering, Research, Product Management, Wireframing, Prototyping, Handing off designs & Support, Accessibility

Duration

May - Jul 2024
3 months,
Full-time

Design Goals  🎯

Design Story Tools & integrate it with StoryBox Library

Ideate, research & design & then Integrate Story Tools with StoryBox Hub

Optimise key pages for engagement and conversion.

Re-design key pages like Landing, product & pricing pages to boost conversion & expand user base

Revamp to perfectly align with the brand's essence

It was time to give a brand refresh with new brand assets and illustrations, to capture the brand’s values

Focus on Accessibility & Inclusive content

Adhere to accessibility guidelines, especially optimizing for screen readers and show light on inclusive content of StoryBox Library

Team

Internal ( Everest Team )

Product Manager,
Lead Software Developer + 3 Developers
Accessibility + Agile Coach
Design Mentor

StoryBoxTeam

Founder/CEO,
Digital Product Owner,
Sr. Directors x2,
Graphic Designer, Illustrator

Why the team loved working with me...
The team heavily appreciated my constant feedback collection and iteration without hesitation that drove the development.
Make engineers your biggest design advocates and good friends, hehe.

Design Story Tools & integrate it with
StoryBox Library

Gathering
requirements
I collaborated with one of the directors at StoryBox Hub who is also a teacher. She had a vision if the product and explained the context that helped me finetune a solution.
Competitive analysis
or, Inspiration?
The previous version of Story Tools was created using a tool caled ClickView which was not catering the needs for all students and teachers.
Wireframes derived from these conversations...
I put together a quick wireframe that was bits and pieces of screenshots and design elements to convery the placement of elements with my extended team. This helped us come up with iterations.

"I am not a tech person, I am a teacher who wants my students to get the Best experience and navigate things around. I dont know the background, I understand the functionality and want my students to have the best experience."
‍
Peta Hicks, StoryBox Hub

Ton of discussions and iterations later, the high fidelity wireframe!
After consulting with the engineering team on the feasibility of different features and balancing what the user would require,
"We like the Story Tools video page so much that we would want users to still see a preview so they understand
‍what a value addition it would be and would drive more sales."
‍
- Nicole Browne, CEO of StoryBox Hub
When the user is not yet subscribed, show Preview mode.
This is the preview mode when the user is not yet part of any pricing plan that enables Story Tools

Optimise key pages for Engagement
& Conversion.

Page 1, SUBSCRIPTIONS

Subscriptions: Wireframes from given piles of data
I put together a quick wireframe that was bits and pieces of screenshots and design elements to convery the placement of elements with my extended team. This helped us come up with iterations.
Establish a brand identity
The graphic designer passed on colours, fonts and illustrations. I had to now come up with a brand identity for StoryBox Hub.

Brand values: Playful, Childlike, Educational

Here are some explorations...

Final evolved design for Subscription page
After consulting with the engineering team on the feasibility of different features and balancing what the user would require,
Accomodate all User groups
Made sure we have customized screens for each user group ranging from Schools, Families, Librarians, etc.

Page 2, Landing Page

What do we like, what do we don't...
The Business Analyst and I conducted a workshop to understand what elements of the current design are working and what are not. We also had some similar websites to seek inspiration from the stakeholders.
Existing Website: storybox.com.au
Similar website #1
‍clickview.com
Similar website #2
‍3plearning.com
Things that work
Things that don't work
Concerns/Questions
Put together a wireframe for further ideas & discovery
Having all the information placed out in a wireframe helped us ideate and decide what are the different sections we want part of the landing page.

Wireframe with block elements to quickly iterate

UI design as visualised by Graphic designer

Special attention to the newly introduced 'Story Tools'
The page has a special call out to the key products, so users are driven to these pages and understand what works better for them
Inforgraphic to show the org's scaled impact and earn trust
Taking key statistics, I came up with this inforgraphic to show the impact created by StoryBox

Landing Page, then and now...

OLD HOME PAGE
New Design!

Ongoing Project, Contact me to know more.

gayathrikasilingam@gmail.com