Wiggl App Homepage
Improving affordance and metric visual cues for better access to workplace injury prevention
Background
Wiggl Health is a data-driven platform designed for hybrid work environments, predicting and mitigating health risks to enhance productivity and employee well-being. It offers a synchronous app for employees and an admin dashboard for data tracking.
Objective
The app requires significant improvements to increase user engagement and action rates. Rethink the homepage design to further optimise the app and properly address the needs of the users more.
ROLE
UI/UX Designer
TIMELINE
2 weeks, 2024
TOOLS
Figma
Part 1: Discover
For this project, we used the double diamond design process to streamline our approach.
METHOD
As a start, we are going to analyse the previous designs for the following:
• To look for improvement opportunities in engagement
• To gather insights from user feedback from the past
Double Diamond Design Process
Business Goals
Enhance employee productivity 💪🏻
With less injuries and happy employees, the business can flourish
Reduce costs for employers 💰
Minimising injury costs for claims will remain compliance with OSHA
Improve workplace
well-being 💜
Holistically create a safe, injury-free environment for the whole company
PREVIOUS DESIGN 1
The first iteration lacked actionable metrics; felt less personalised, and too branded
As the first iteration of the app was launched back in 2023, there has been significant feedback coming from its users.
Other comments:
• No compelling reason to scroll past stats
• Advice felt generic; lacks personalisation
• Great branding, but lacks functionality
Out of 320 users:
<10% CTR
(Click through rate)
of Wiggl break exercises despite gamification
>70%
Scroll through stats
Design not by me
PREVIOUS DESIGN 2
The second iteration's metrics need to stand out
The second iteration improved with the help of previous feedback, but can be improved even further.
👎 Lost original tone of voice and visual identity of the brand
👍 Scroll down improved, engagement up by 30%
"I didn't know I can report my pain"
"it feels like a whole different app"
"I want to see everything at one glance"
Out of 10 users:
Shifted statistics above
Scroll through breakdown of the scores for detailed information
Notification CTA more prominent
Part 2: Discover
After analysing the current design of the homepage, we filter and define the main pain points we want to address.
For this part, we are going to dive into:
• Pain points of the user
• Defining the challenge
METHOD
Main problems of the user
Pain data not highlighted
Generic info and exercises
Overall low engagement
Based on the feedback, users want to see key metrics immediately as it provides a sense of progress and urgency to document their pain.
As there is no clear way of documenting pain nor getting clear data, the app gave generic exercises for everyone.
Despite the gamification aspect of the app when a user completes quests, low engagement comes from a sense of low urgency.
DESIGN CHALLENGE
How can we redesign the homepage of the Wiggl app to better optimise its features to better cater to the needs of its users?
Design Strategy
Pleasurable
Usable
Reliable
Functional
1
Clear button CTA
Invite users to report pain often to collect data more efficiently
2
Emphasis on numbers at a glance
Highlight on necessary statistics for better summary of information.
3
Bring back the warmth of the original branding
Balance between showing hard cold facts and Wiggl as your pain prevention partner
Aarron Walter's Hierarchy of User Needs (UX)
Part 3: Develop
With deeper user insights and identified enhancement areas, we're ready to implement screen improvements
For this part, we are going to dive into implementing the 3 main keypoints of the design strategy.
METHOD
Key builds for prototyping
LO-FI
Emphasis on numbers
• Visual hierarchy
• Cognitive offloading
• Sense of progress
Report pain button fill
• Improved Affordance
One glance scores
• Progressive Disclosure
Notifications and numbers layout
Separate notifications page
Notification-first
Personalised grouping
Pop-up notification
Feedback from management and engineering
LO-FI
Notification grouped with pain scores
Too many stats are overwhelming
No unnecessary pages
By correlating the two, it provides reasoning at one glance (high pain scores = higher alert levels)
By separating the summary of scores to its breakdown, it prioritizes clarity
A notification page is currently not needed in this stage of the app development
Part 3: Deliver
With deeper user insights and identified enhancement areas, we're ready to implement screen improvements
For this part, we are going to dive into:
• Key improvements
• Relayout for notifications
METHOD
The new prototype improves overall metrics and emphasizes its call to action clearly
HI-FI
Personalised dashboard
Highlight stats
CTA more prominent
Grouped breakdown and notifications
Urgency to complete personalised tasks
FEEDBACK
New homepage received positive feedback from users and helped the business fundamentally
A / B Testing of old and new designs
4.7/5
Average rating of the new homepage from qual study (8 users)
↑30%
Increase of reports registered from users in B group
Part 4: Reflect
Inspiration
Although Whoop has already developed so many features on its app, its base design with providing metrics at a glance serves as a great example for the design of Wiggl.
OUTCOME
Currently, Wiggl is expanding its user base through strategic partnerships with major tech companies. Concurrently, Wiggl remains committed to iterating on additional features, conducting user testing, and engaging with professionals to continuously enhance the app.