Sand Scape
Duration
Type
My Role
Team
3 Months
Digital Therapy, Desktop Application
User Research, UIUX Design, Art Direction
1 Product Designer, 2 Developers, 1 Project Manager, 2 Artists
A Digital Sand Tray Therapy in Collaboration with Digital Lab of BC Children's Hospital
When aligning with our client, Digital Lab of BC Children's Hospital, they expressed a desire for digital sand tray therapy. They found an existing product adequate but lacking in art style and user experience.
I contributed to redefining the art style and creating user interfaces with flat hierarchies, enabling users to create scenes within a short period of time and represent their inner world cohesively during therapy sessions.
The outcome is a desktop digital sand tray application with simplified interfaces and categorized actions, allowing users to navigate easily and immerse themselves in the scenes they create.
What is Digital Sand Tray Therapy
Digital sand tray therapy is a virtual version of the classic therapeutic approach, suitable for children. The non-verbal approach allows them to express complex feelings through creating digital scenes, which therapists use to guide therapy.
This method is effective for various emotional and behavioral issues. Its digital nature improves accessibility, letting patients use it anywhere without constraints of time and space.
Context
The assets, known as miniatures, are the main objects that patients interact with during therapy. However, there are at least five art styles in the existing products for both physical and digital sand trays, which results in scenes created being fragmented and users are hard to immerse into the play.
.png)
Inconsistent miniature art styles in both physical and digital sand trays
Furthermore, the existing products either have hundreds of miniatures or actions hidden in deep structures. Instead of making patients satisfied with a tone of choices, those approaches make scene creation harder and tend to frustrate them.
Overwhelming choices and in-depth action buttons
Problem
Existing digital and physical sand tray therapy tools feature inconsistent art styles and complex structures, leading to fragmented scenes and user frustration.
Goal
Design a digital sand tray application that allows patients to easily identify assets and actions, enabling them to create cohesive and immersive scenes for effective therapeutic expression.
Key Insights from the Therapist Interview
Despite not having direct access to therapists through the client, we utilized personal connections to interview two experienced practitioners in sand tray therapy.
The purpose of the interview was to gain insights into:
-
The typical conduct of sand tray therapy sessions
-
Common challenges faced by users
-
User preferences regarding miniatures
Interview therapists to gain first-hand insights
The following were the insights that we gathered from the interview, which helped us ensure that our digital tool would meet patients' needs effectively:
Efficient Scene Creation
The UX should facilitate quick scene construction, given that children's engagement varies
Symbolism for Expression
Providing a variety of symbols representing complex ideas that convey their emotions and experiences
Customization for Immersion
Digital tools offering customization options can enhance immersion, compensating for limitations in physical miniatures.
User Journey/ User Flow
After conducting research and interviews, we gained a clearer understanding of users' pain points and began generating ideas. Prior to designing, I utilized the user journey and user flow to facilitate communication with the client and clarify user actions during a digital therapy session.
Persona
Sarah, a persona captured from our target users who are aged between 6- 18
The user journey and user flow indicate the steps that Sarah would encounter during the therapy. The tools not only help in aligning with my teammates at an early stage but also allow us to communicate with the client to eliminate unnecessary steps, ensuring smooth development of the design.
The user journey outlines the patient's overall experience during the digital therapy, while the user flow highlights the keyframes when creating a scene with the application
Wireframes
After confirming the keyframes with the client, I developed wireframes for one of our key features: customization. The main purpose was to visualize how we can clearly organize the assets and choices so that children can navigate easily. Moreover, communicate to the client how users could customize miniatures step by step before proceeding to high-fidelity UI design.
The wireframes demonstrate how the assets and choices will be organized before entering into hi-fi designs
Art Style of the Assets
Considering the client's preference and the project's time constraints, we opted for the low poly style.
This choice then influenced my creation of UI components to ensure visual consistency throughout the application.
Low-poly is the chosen art style of the asset
Design System
Color
Primary Colors
Secondary Colors
Typography
Buttons
Menu
Miniature Tools (Normal)
Miniature Tools (Active)
Iterating on the Color Customization UI
The core feature of our product is the ability for users to customize the colors of body parts and clothing on miniatures. Initially, the ideal UI I designed indicated the selected part with a red outline, allowing users to clearly see the chosen section and change the color using a color palette.
Ideal UI : using outlines to indicate the selected section
However, we faced a technical challenge as outlining the selected part was not feasible. To address this, I worked closely with developers and technical artists to find an alternative approach to present the color-changing feature.
Iteration 1: use numbers and outlines to indicate the selected section
Iteration 2: use names and outlines to indicate the selected section
Final design: use color to indicate the selected section because of feasibility
The Solution
Crafting an Intuitive Interface
I focused on creating an interface that prioritizes visibility and accessibility. For instance, the hierarchy of button sizes was carefully considered on the menu, with the inventory button being the largest for immediate access, reflecting its importance and frequent usage. Conversely, the UI on/off button is the smallest, as it's less commonly used.
Place frequently used buttons at the bottom, larger for easy access; put less used buttons at the top, smaller to save space
Streamlined Navigation
To enhance user experience, I implemented a flat information architecture that ensures users can find and take actions in less than three steps. This involved limiting inventory categories to seven and setting groups to six, simplifying the navigation process. This design choice prioritizes clarity and efficiency, allowing users to quickly locate and utilize all available assets and actions without the need for complex menu navigation.
Flat architecture with limited categories for quick, efficient actions in under three steps
Enhancing User Engagement with Miniatures
The highlight of the application is that users can easily interact with miniatures through actions such as customization, rotating, or switch to a 3rd person view.
Presenting over seven functions simultaneously can be daunting. To address this, the menu only appears upon a right click. Each action is symbolized by an icon, making it tidy and straightforward.
Right-click menu with icons for easy, clutter-free interactions
Outcome
We did three rounds of usability tests and the results showed that the UI design allowed users to create a scene to represent their inner world effortlessly.
How easy was it to build a scene with this prototype to tell a story for a sand tray therapy?
4.2
average rating
Client's Testimonial
Sima
Associate Director at BCCH Digital Lab
John
Executive Director at BCCH Digital Lab
The team's robust technical capabilities and agile problem-solving approach greatly enhanced the overall experience, leading to a highly productive collaboration. We were particularly impressed by the team's achievements within the project's short timeframe and their dedication to refinement through rigorous user testing.
“
Takeaways
Alternative Ways to Understand Users' Needs
Due to school restrictions to work directly with children, we used proxy approaches by interviewing therapists and testing with caregivers. This helped us tailor the design to fit children's needs.
Clarifying Design Direction with Tools
User journey and flow tools not only aided internal communication but also clarified the main user experience and features with clients, setting a clear development direction.
Navigating Feasibility in UI Design
While I initially designed an ideal UI for the color customization feature, it was not feasible from a technical standpoint. Despite this challenge, seamless communication with developers led to a design that balanced technical constraints with usability.