One World Tales
Group Project - Team of 3
Role: UI UX Lead Designer
User/Audience: Parents & Children
Duration: 3 Week Sprint
Tools & Methods: Figma, ChatGPT, Microsoft Designer
Designing the Unknown: Building a Website Without a Roadmap
🛠️ What Our Client Needed
We’re working with One World Tales, a brand all about creating amazing, personalized children’s books that celebrate culture and diversity. Their goal? To build a responsive, engaging e-commerce website that connects with families worldwide.
Here’s the deal — their products do more than just tell stories. They:
-
Spark curiosity about different cultures
-
Encourage kids to grow into caring, globally minded people
-
Stand as symbols of inclusivity in today’s diverse world
🚧 The Challenge for Us
-
They didn’t have an existing website or clear product style yet, which meant we were designing something brand new — with very little to reference.
-
We had to build a whole interface that felt authentic to their mission, while being user-friendly and easy to navigate.
-
Without a prior blueprint, our team had to get creative and adaptable, figuring out how best to bring their vision to life — even when the path wasn’t fully clear.
✅ Features to Emulate:
-
Librio
-
Clean, user-friendly site layout
-
Intuitive customization flow
-
Seamless navigation between book preview and edit modes
-
-
My Heart Books
-
Inclusive customization options for children with special needs and disabilities
-
Emotional storytelling approach that resonated with niche audiences
-
⚠️ Features to Avoid / Improve:
-
Overly long customization processes that caused user fatigue
-
Lack of visual feedback or previews during customization steps
-
Confusing UI elements (e.g., unclear buttons or options) in some platforms
🧠 Pros & Cons Summary
Pros
Set a clear benchmark for user-friendly customization flows
Gave us inspiration for inclusive, emotionally resonant design
Helped us identify key differentiators early in the research process
Cons
Some competitors still struggled with accessibility and UX clarity
Many sites lacked mobile optimization
Few competitors had strong storytelling during onboarding
The Competition
To get familiar with the market, our team explored how other companies approached the custom book industry. We focused on identifying features that stood out — both positively and negatively — and applied those insights to shape our interview questions and early concepts.
🗣️ User Interviews & Insights
During our research and interviews, several key user preferences emerged that shaped our design decisions:
-
Shipping was a major concern for many users — they wanted clear info and options upfront.
-
Users favored a streamlined checkout process to avoid frustration and drop-offs.
-
We also explored whether to prioritize desktop or mobile design first.
📱 Why Mobile-First?
Our research showed a slight preference for shopping on mobile devices — especially since our client planned targeted ads on Instagram and Facebook. This insight helped us:
-
Focus on mobile-first design to ensure an intuitive experience on smaller screens.
-
Keep the site responsive and fully functional for desktop users as well.
Our Persona
The Problem Statement
Priyanka wants a fast, fun, and meaningful way to buy a gift online with her kids — an experience that includes them in the process and helps them connect with their Indian heritage.
At the same time, One World Tales needs a platform that drives engagement and builds customer loyalty by offering personalized, culturally rich shopping experiences tailored to a diverse audience.
A User Flow
We created a user flow to map out how users would navigate the site, customize their book, and complete a purchase. This helped us ensure a smooth, intuitive journey from landing page to checkout.
🔍 What We Noticed:
-
Navigation issues were common on competitor sites — users often got confused or stuck during the customization process.
-
Steps felt disjointed, and some flows lacked clear visual guidance or hierarchy.
✅ What We Did Differently:
-
Designed a linear, guided flow that walked users step-by-step through customization.
-
Included progress indicators to show how far along they were.
-
Simplified navigation with clearly labeled buttons and minimized backtracking.
-
Prioritized a mobile-friendly layout to support users on smaller screens.
After finalizing the user flow, we hosted a Design Studio session to quickly explore layout ideas and user-friendly features through rough sketches. Our focus was on creating an experience that felt inviting and intuitive for both kids and parents.
🧠 What We Did:
-
Sketched out potential screens for homepage, customization, and checkout
-
Prioritized playful, family-friendly layouts with clear visual hierarchy
-
Focused on large tap targets and minimal text to support younger users
⭐ What Stood Out:
-
Concepts that used illustrative icons and vibrant colors to engage kids
-
Layouts with guided steps that mirrored our user flow for easy onboarding
-
A design that introduced a “character builder” carousel, which sparked excitement among the team
These initial sketches gave us a strong foundation to begin wireframing and testing key interactions in the next phase.
Sketching and Ideation
First Wireframes
After sketching we built out assets that would be used on multiple pages and I developed a style guide for text that would be used throughout the build.
The next steps were to prototype and get this version ready for testing.
.png)
.png)
🧪 Usability Testing
🎯 Scenario:
The user sees an Instagram ad promoting personalized cultural stories for kids. The ad catches their attention, and they decide to check it out.
🧾 Task:
Customize and purchase a book in which their child becomes the main character.
🔍 Our Process:
-
Test Format:
-
Conducted 1-on-1 remote sessions over the phone with screen-sharing or live feedback.
-
-
How We Found Participants:
-
Recruited through personal references and community networks.
-
Targeted users who were parents, relatives, or caretakers of children ages 3 to 7.
-
-
Our Ideal Test Participant:
-
Had a child in the target age group
-
Was of Indian descent (to align with the book’s cultural focus)
-
Valued creativity, storytelling, and was actively involved in their child’s growth
-
Had experience with online shopping and basic digital navigation (to ensure test clarity)
-
🧪 Usability Testing
– V1 Prototype
We tested our first interactive prototype to evaluate core usability, clarity of the customization flow, and how easily users could complete the task of purchasing a personalized book.
✅ What Worked (Pros):
-
Most users successfully followed the intended “happy path”, navigating from the homepage to checkout with minimal guidance.
-
Core functionality was validated early — users understood the overall goal and structure of the task.
-
Users responded positively to the visual design and general layout.
⚠️ What Didn’t Work (Cons):
-
Unclear button labels created confusion about the next steps in the flow.
-
Wording and copy lacked clarity, leading to hesitation or misinterpretation of actions.
-
One user got stuck in a loop, unable to progress or return to a previous step — a critical navigation flaw.
-
Some users were unsure about customization options due to vague instructions or overloaded screens.
🔁 Iteration – V2 Prototype
After reviewing feedback from our first round of usability testing, we worked as a team to refine key areas of the experience. Our goal was to reduce friction, improve clarity, and guide users more intuitively through the flow.
🛠️ What We Improved:
-
Simplified copy throughout the site, especially in and after the Hero section, to better guide first-time users.
-
Clarified CTA buttons across multiple screens to make actions more direct and understandable.
-
Removed unnecessary wording and minimized decision paralysis by tightening up instructions and labels.
These changes were aimed at reducing user hesitation and avoiding the navigational errors we observed in V1. We wanted the second round to feel smoother, more intuitive, and frustration-free — especially for users with less tech experience.
.png)
🧪 Usability Testing
– V2 Prototype
-
In our second round of usability testing, we focused on validating improvements from V1 and identifying any remaining friction points in the customization flow.
-
✅ Key Outcomes:
-
100% Task Success Rate
All users successfully completed the core task — a major improvement from 60% in the previous round. -
40% Reduction in Completion Time
Users moved through the experience more efficiently, showing clearer navigation and faster comprehension. -
💬 User Feedback:
-
The customization process still felt too long, with too many individual screens.
-
Some screens had too much text, which slowed users down and made navigation harder.
-
Despite these issues, users found the flow intuitive and were generally positive about the experience.
-
🔭 Looking Ahead:
-
If given more time or a third testing round, we would:
-
Consolidate or combine screens to reduce unnecessary steps and streamline customization.
-
Simplify and prioritize content on text-heavy pages to improve clarity and reduce cognitive load.
-
Run additional usability tests to validate these refinements and ensure a seamless final experience.
Add a Title
🎨 Incorporating Brand Assets into High-Fidelity Prototypes
To ensure consistency with One World Tales’ brand identity, we thoughtfully integrated key visual elements into the high-fidelity designs.
🧩 How We Aligned with the Brand:
-
Integrated Color Palette
Applied One World Tales’ official color scheme throughout the interface to reinforce brand recognition and visual harmony. -
Implemented Provided Sketches
Translated client-supplied customization page sketches into interactive screens, maintaining alignment with the brand’s storytelling and user goals. -
Added Logo & Branding Elements
Placed the One World Tales logo in the site header to create a cohesive, polished look across pages. -
Collaborative Design Approach
Worked closely with existing brand guidelines and assets, ensuring our final design matched both the visual style and tone the client envisioned.
.png)
.png)
.png)
Take Aways
💡 Project Takeaways
This project pushed me to grow as both a designer and collaborator. Despite early ambiguity in content and direction, we stayed flexible and proactive, creating a polished, functional prototype while learning to adapt to a real-world client’s evolving needs.
🧑💼 Personal & Team Learnings:
-
Adaptability under uncertainty
We built an e-commerce prototype without a finalized copy or visual assets — learning to work around ambiguity using smart placeholders, AI tools, and adaptive mobile-first design techniques. -
Leadership through collaboration
I stepped into a lead role in organizing tasks, communicating timelines, and keeping our team aligned across design, research, and iteration phases. -
Cross-functional readiness
Gained confidence in how to communicate with clients, support teammates, and think across design, product, and dev perspectives — even under tight timelines. -
Professional growth mindset
Even with limited professional experience, I operated with ownership and accountability, proving I’m ready to work on real-world teams and contribute meaningfully from day one.
🤝 Client Outcomes
Our client, One World Tales, walked away with more than just a prototype — we helped set the foundation for their digital presence.
🚀 Deliverables That Added Value:
-
A fully documented UX case study
Clear user flow, wireframes, research, and high-fidelity designs they can showcase or present to developers and stakeholders. -
Proof of concept for a live website
A scalable, mobile-ready e-commerce experience built around their brand and business goals. -
Social media-ready visuals
Our high-fidelity mockups can be used to build buzz, pitch partnerships, or support crowdfunding campaigns. -
Time- and error-saving design
Our structured user flow and simplified UI reduce potential user drop-offs and guide the client’s team toward more effective development.