Spark
Type
Healthcare
Mobile-first Website
Artificial intellengent
My role
UI/UX Designer
UX Researcher
Timeline
May - August,
2024
(3 months)
Team
1 Product Manager,
2 Developers,
2 UX Designers,
1 Artist
Overview
A Digital drawing Website in Collaboration with Digital Lab of BC Children's Hospital
I collaborated with the Digital Lab of BC Children's Hospital to develop a digital drawing website aimed at children aged 3-12. The goal was to create a comforting and engaging experience to reduce children’s stress during hospital wait times.
The result is a mobile-first website featuring minimalist, scalable interfaces. Using AI to enhance children's artwork, it transforms waiting periods into creative and enjoyable moments, helping to alleviate anxiety and provide a positive distraction.
Client’s goal
Develop a digital drawing solution to keep children distracted during hospital wait times.
Real-time display of children's artwork on digital walls within the hospital to create an engaging experience.
Integrate AI technology to enhance interaction and creativity.
My contributions
Conducting user research
Designing wireframes
Iterating on concepts
Building the design system
Crafting a user-friendly interface
My Takeaways from this project
✨ Alternative Ways to Understand Users
Due to restrictions on working directly with children, we relied on secondary research to gain insights into their needs. This approach allowed us to tailor our design effectively.
✨ Balancing Client Requirements with User Experience
While user experience is essential, we creatively navigated strong client opinions to find a balance between their demands and user needs.
✨ Embracing AI Technology
As AI continues to shape the future, exploring how to introduce this technology to children in a constructive way is vital. We engaged in extensive discussions about integrating AI while preserving children’s creativity, aiming to enhance their artistic expression without overshadowing it.
Problem
How might we reduce children's stress during hospital visits by creating a fun, engaging, and stress-free experience?
Research
Key Insights from The secondary research
The purpose of the research was to gain insights into:
Challenges faced by children during hospital stays
Users’ behaviours and preferences
Potential design opportunities
Where’s the stress come from?
Anxious and feeling unsafe
Hospitals may induce fear and anxiety, making kids feel vulnerable
Physically unwell and in need of distraction
Children may feel unwell and need engaging distractions to alleviate discomfort.
unfamiliar routines
Children are stressed due to unfamiliar environments and routines in hospitals.
How Digital Drawing Helps Reduce Stress
We researched how digital drawing reduces stress to understand its emotional and cognitive benefits for children and to ensure alignment with the client’s goals.
Emotional Outlet: Drawing helps children express their emotions in a non-verbal way, relieving anxiety.
Engagement and Focus: The act of drawing absorbs children's attention, distracting them from fear or discomfort.
Creative Control: Giving children control over their creations can help them feel more secure and confident in an unfamiliar environment.
Platform Decision
After comparing various platforms, we chose a mobile-first website for its accessibility. Children and parents can easily scan a QR code to access the site without the need to download any apps, providing immediate engagement.
Persona
Building on our research findings, we developed a deeper understanding of children's challenges, behaviors, and needs during hospital stays. This guided our ideation process. Before moving into the design phase, I created user persona to facilitate clear communication with the client, ensuring a shared understanding of the children's experiences during their hospital visits.
Mia Chen, 7y
Mia is a curious second-grader who enjoys drawing and storytelling. She’s visiting the hospital for the first time and feels a bit anxious in this new environment.
Senario
While waiting for her appointment, Mia seeks activities to distract her and ease her anxiety in the unfamiliar hospital setting. She feels bored and uncertain, craving something engaging to capture her interest.
Expectations
Easy navigation with large buttons
Interactive and enjoyable features
A supportive, reassuring experience
Needs
A simple, visual interface
Encouragement and immediate feedback
A safe, age-appropriate environment
Solution
a mobile-first drawing website designed for children aged 3-12, enabling them to create AI-enhanced drawings that are displayed in real-time on digital walls or screens within the hospital.
Turning Research into Actionable Design Solutions
to design a product that can satisfy the needs of kids from 3-12 years old, here’s the key consideration and matching solution:
Limited Literacy Ability (Younger Kids)
Icon-Based Navigation
Minimize text and replace it with clear, intuitive icons to ensure easy navigation for younger children.
short
attention span
Minimalism & Straightforward Design
Simplify user flow, reducing steps to essential features for quick engagement.
Easily
distracted and bored
Engaging Visual Feedback
Use dynamic visuals and instant feedback, like animations and bright colors, to maintain attention and engagement.
Inappropriate Content (Older Kids)
Content Moderation for Safety
Provide an admin dashboard with moderation tools to censor and remove inappropriate drawings, ensuring a safe and respectful environment.
Main Features Breakdown
A drawing website
(developed)
Create Drawings
AI Enhancement
View Drawings
An admin dashboard
(proof of concept)
Manage Themes
Review Drawings
User Flows
the drawing website
Admin Dashboard
Wireframes
the drawing website: Straightforward and smooth user experience!
Iteration
Modular-based design
Before
After
Extendable Module
Group features like Lego blocks! So you can easily add new ones without disrupting the clean, minimalist UI.
Customization
Users can drag and arrange modules to create a canvas that suits their drawing style perfectly!
Responsiveness (tablet)
Modular design enables easy creation of responsive screens that stay consistent with the overall style. 😉
default
mobile
(56*56)
Ipad
(64*64)
active
Visual Direction
The Birth of Spark
Logo
This logo symbolizes children's creativity and innovation. The "K" and five squares form a magic wand, echoing our AI enhancement icon from the canvas page.
Typography
We selected Mulish, a sans-serif font, for its readability and modern style. Its smooth curves and balanced proportions make it ideal for both text and display.
Landing page
The opening animation and the user interface colors are harmonized to ensure a cohesive experience. We have selected bright, vibrant colors such as green, blue, and yellow, which are appealing to children. The design prominently features random lines, with the animation utilizing progressively appearing paths to mimic the motion of a child drawing.
Visual Consistency is a Must
Final Design
Introducing Spark: An AI-powered drawing website for children in hospital
Balancing Minimalism with Expandability
01
Select a theme
Kids choose from themes like Rainforest, City, or Ocean, providing comforting and familiar settings that help alleviate anxiety.
Select a spot for their drawings within the theme.
*Administrators can update themes seasonally or for special holidays, ensuring a fresh experience.
02
Draw on the canvas
Users access a customizable canvas, allowing personal expression and accommodating short attention spans.
03
AI enhancement
Users can apply AI enhancements to their drawings, regenerating until satisfied. This fosters creativity and gives children a sense of control in a hospital setting.
04
View drawings
Live drawings are displayed on a physical wall at BC Children's Hospital or accessible via URL, creating a positive distraction during visits.
Outcome
Client's Testimonial
"We were delighted to work with Team Pizza this term and were impressed by your team’s expertise and enthusiasm. It’s been a pleasure collaborating and seeing this product evolve from an idea to a prototype. We believe one day this product is going to bring a lot of joy to kids and families."
Sima
Associate Director at BCCH Digital Lab
John
Executive Director at BCCH Digital Lab
Nice to see you here!
qianhui2022@gmail.com
This Website is best viewed on desktop
Made with love © 2024 Qianhui Qin
Behance
Dribbble
Linkedln