Making SilverCloud mobile-first
SilverCloud is a digital mental health platform that was originally and primarily designed for desktop
By adopting a mobile-first approach with personalised features and an intuitive design, we created a seamless and accessible experience tailored to users' mental well-being
UX DESIGN
•
UX RESEARCH
•
UX DESIGN • UX RESEARCH •
The Goal: As a client accessing SilverCloud on my mobile, I have an industry standard, consistent and accessible mobile experience
The Problem: Over 70% of our users were using mobile devices to access their programs. SilverCloud was specifically designed for desktop so a larger intervention was required rather than simply updating the UI to fit smaller screens
Pain Points:
Non-native styles
Inconsistencies and too many patterns
Usability issues
Lack of mobile QA
THE FOCUS
1.Tool Framework
2. Consolidating our
Design System
3. Accessibility
4. Pattern optimisation
THE PROCESS
1. TOOL FRAMEWORK
What is it?
Checklists for designers when researching and designing tools
A high level description of what SilverCloud tools are
Repository of tool patterns and examples
What does it cover?
Tool data
Core tool Patterns such as serial entries and progressive disclosure
Core Tool (re)design processes
Tool Principles
What is the purpose?
To classify tool types:
for internal alignment
for scalability
To help with decision making on prospective tools
To help with the design or redesign of tools
RESULT
— A validated framework for the design of interactive tools in SilverCloud
Guidelines which map out best practice, key effective attributes, relevant design patterns and associated attributes of deployment - DESIGN & PROCESS
A better understanding of what is most valuable to all stakeholders, allowing for strategic optimisation - PROOF OF VALUE
Mapping of how the different tools fit into clinical pathways and user journeys - REPEATED vs SINGLE USE
Internal alignment on our strategy around tools - PROCESS
A process for justifying the build of a new tool - PROCESS
In some cases, they are the primary way in which a client structures and implements the interventions that have been proven to be effective at treating depression or anxiety. We need to identify what this sub-group is so that we can focus our efforts on those.
2. CONSOLIDATING OUR DESIGN SYSTEM
What is the purpose?
Ensures we retain our brand identity through our designs
Creates a cohesive and consistent user experience
Fosters collaboration between designers and developers
Faster iteration & scalability options
Improved accessibility to help maintain compliance with WCAG standards
Minimises redundant work
Ensuring the inclusion of new mobile patterns
RESULT
— The integration of SilverCloud’s Design System with our Figma Component Library
As a small design team with ownership of the Figma components alongside the developers we worked on ensuring that our two libraries were up-to-date with the relevant patterns
Most patterns were overhauled from predominantly desktop to mobile including usage guidelines and rules of interaction
We worked closely with developers to ensure that the patterns we designed would work in multiple instances across the platform which strengthened our relationship while also giving us a better understanding of how each team works and thinks
3. ACCESSIBILITY
What was our objective?
Update colour variables to reduce colour contrast accessibility issues
Ensure that users have accessible versions of the first 5 high priority UI elements:
Subtopic accordions
Dropdowns
Cards
Buttons
Tooltips/How-to’s
— An updated library of UI elements incorporating a new, accessible colour scheme
Our previous colour scheme did not pass accessibility so in tandem with creating new/improved mobile patterns we decided to completely overhaul our colour system
We considered different user groups (audio or visual impairments, learning or cognitive diffiulties- and designed with those in mind:
Design with higher colour contrasts on design elements throughout
Those with colour blindness, specifically red/green, may struggle to differentiate between certain icons within tools so colours were updated to minimise this risk
Provide audio options for modules along with transcripts for videos/animations
Ensure compatibility with screen reader functionality (particularly on our questionnaires)
Work closely with the content team to ensure plain language is used throughout the programs
RESULT
3. PATTERN OPTIMISATION
The changes
RESULT
— Industry standard patterns throughout the product
OLD
UPDATED
THE OUTCOME
Comparing these scores using a post-release heuristic evaluation gave us valuable insights into how well the implemented changes have addressed the previously identified issues
FINDINGS
15% increase in satisfaction across regions
Strong evidence of substantial progress
Notable improvements in statistical means point to a reduction in the number and severity of usability issues
A more seamless user experience
USER FEEDBACK
I like the changes made to SilverCloud. It is much easier and straightforward to use
Layout is great
I think it's better to look at and clearer with darker lines and more prominent designs. It was a bit too light coloured before and faint lines.
