RaskRask Recharge
Redesigning the corporate wellness booking platform to enhance the user experience for administrators and employees.
Executive Summary
This project addresses the critical need for a streamlined, user-friendly system for RaskRask's corporate clients to manage employee wellness bookings. The existing web-based platform (called "Firma") wasn't adequately serving this key segment—companies—resulting in friction for both administrators and employees.
Administrators lacked visibility and control over bookings (often having to contact RaskRask support for simple changes), and employees faced a clunky, inflexible booking experience. Through a user-centered redesign grounded in research and domain-driven workshops, I developed an enhanced solution. The redesigned platform—built on user insights and a scalable design system—lays the groundwork for an efficient, intuitive, and flexible corporate wellness booking experience.
Problem Statement
How might we provide RaskRask's corporate clients with a user-centric platform that enables them to easily manage administrative tasks—and have control of the system—without always having to contact support?
Through initial exploration of the platform, I identified several key issues that needed to be addressed to improve the user experience for both administrators and employees.
Administrator Challenges
- • Limited visibility into credit usage and booking patterns
- • Manual processes for employee access management
- • Reliance on support for basic administrative tasks
Employee Pain Points
- • Complex booking process with multiple steps
- • Limited visibility of available treatments and credits
- • Difficulty managing existing bookings
Project Goals
Based on the identified challenges, I established the following UX objectives for the project:
Figma Prototype
Deliver a functional prototype in Figma that demonstrates the core user flows and interfaces
Coded MVP
Build a coded MVP using a modern front-end stack to validate the technical approach
Scalable Foundation
Present a scalable foundation for future development with a cohesive design system
User Autonomy
Ensure autonomy and efficiency for corporate users through self-service capabilities
Design Process
I followed the Double Diamond design process, which provided a structured framework for understanding the problem, defining the scope, developing solutions, and delivering a prototype. This approach ensured that user needs remained at the center of the design process.
Discover
Research & Exploration
Define
Problem & Scope
Develop
Ideation & Design
Deliver
Prototype & Test
Discover
Exploration and research
- • Platform analysis
- • Heuristic evaluation
- • Desk research
- • User journey mapping
Define
Problem framing and scope
- • Creating personas
- • Pain point identification
- • Feature prioritization
- • Scope definition
Develop
Ideation and design
- • Sketching solutions
- • Wireframing key flows
- • Design system creation
- • Interactive prototyping
Deliver
Prototyping and feedback
- • Functional prototype
- • Peer feedback
- • Stakeholder feedback
- • Refinement
Discover
To design the right solution, I first immersed myself in understanding the domain, the users, and the market.
Domain Understanding
I facilitated Domain-Driven Design (DDD) and Event Storming workshops with key RaskRask stakeholders (e.g. Simon from the Customer Management team). This collaborative mapping broke down the current Firma system into three key bounded contexts.
Key Findings:
- • We mapped out key user actions, system responses, and pain points
- • The sessions provided a clear framework of system strengths and weaknesses
- • Helped establish sensible boundaries for the project's scope
User Research
I gathered user insights through surveys with RaskRask's existing corporate clients and supplementary research with the broader public. This research confirmed our target market: medium-to-large tech companies in major Danish cities with 50-200 employees.
Research Outcomes:
- • Need for improved booking management, especially for cancellations and rescheduling
- • Desire for more information about therapists and services
- • Importance of self-service functionality to reduce support dependence
Domain Understanding
I conducted Domain-Driven Design workshops to understand the business domain and map the complex relationships between different parts of the system. These sessions helped identify three key bounded contexts:
Company Management
How RaskRask manages corporate clients at an account level, including contracts, billing, and service offerings.
Company Admin
How corporate administrators interact with and manage their wellness program, including employee access and credit allocation.
Employee Booking
How employees discover, book, and manage their wellness sessions, using credits allocated by their company.
Define
In the Define phase, I narrowed the scope to focus on the most critical areas for improvement. Based on my research, I prioritized improving credit visibility, admin control, and the booking experience for employees. I created personas to represent the key user groups and mapped their pain points to guide the solution development.
User Personas
I developed two key personas to represent the primary user groups of the platform. These personas helped maintain focus on real user needs throughout the design process.
Corporate Wellness Administrator
HR Manager responsible for managing the company's wellness program. Needs a friendly dashboard to allocate wellness credits, oversee bookings, and download invoices without constantly relying on support. Wants to efficiently manage wellness credits, monitor usage, and ensure employees have access to services without hassle.
Employee & Wellness User
Software developer who values wellness but has limited time to navigate complex booking systems. Wants a convenient self-service portal to book massages and manage appointments effortlessly. Needs to quickly find and book treatments that fit their schedule, with a clear understanding of available credits.
Problem Framing
Based on the research findings and personas, I framed the key problems to address in the redesign. This helped focus the design efforts on solving the most critical issues.
Credit Visibility
Administrators need better visibility into credit usage and allocation. Employees need to clearly understand their available credits and how they are used for bookings.
Admin Control
Administrators require more direct control over employee access, credit allocation, and program management without relying on support for basic tasks.
Booking Experience
The booking process needs simplification to reduce friction for employees, with clear treatment options, streamlined steps, and self-service management capabilities.
Feature Prioritization
I used the MoSCoW method (Must have, Should have, Could have, Won't have) to prioritize features for the redesign. This helped ensure that the most critical elements were addressed first.
M Must Have
- • Admin dashboard with usage overview
- • Employee management interface
- • Simplified booking flow for employees
- • Credit visibility for all users
S Should Have
- • Self-service booking management
- • Basic reporting tools
- • Treatment filtering and search
- • Notifications for credit usage
Develop
In the Develop phase, I focused on ideation and design, creating solutions for the key problem areas identified in the Define phase. This involved sketching initial concepts, developing wireframes, and creating a comprehensive design system to ensure consistency across the platform.
Ideation & Sketching
I started with rapid sketching to explore different solutions for the key user flows, focusing on three main areas:
Administrator Dashboard
Sketched various layouts for a comprehensive admin dashboard with credit overview, employee management, and booking insights. I explored different visualization methods for data representation and control panels for quick actions.
Credit Management System
Developed concepts for credit allocation, tracking, and reporting. This included interfaces for bulk assignment, individual adjustments, and usage analytics to provide administrators with comprehensive control.
Booking Flow Redesign
Explored simplified booking processes with fewer steps, clearer treatment options, and transparent credit usage. The focus was on creating an intuitive flow that minimized friction and maximized clarity.
Wireframing
After initial sketching, I developed mid-fidelity wireframes for the key screens and user flows. These wireframes helped visualize the structure and functionality of the platform before applying visual design.
Key Screens Wireframed
- • Administrator dashboard with metrics and controls
- • Employee management interface with bulk actions
- • Credit allocation and tracking system
- • Treatment discovery and booking flow
- • Booking management for employees
Usability Considerations
Throughout the wireframing process, I applied usability principles such as clear hierarchy, consistent navigation, appropriate feedback mechanisms, and accessible controls to ensure a user-friendly experience.
Harmony UI – Design System
View ProjectI developed a comprehensive design system called Harmony UI to ensure visual and functional consistency across the platform. This design system served as the foundation for the high-fidelity prototypes.
Core Elements
- • Color palette with primary, secondary, and neutral colors
- • Typography system with hierarchical scales
- • Spacing and layout guidelines
- • Iconography and illustrations
Component Library
- • Buttons with variants (primary, secondary, tertiary)
- • Form controls (inputs, selects, checkboxes)
- • Cards and containers
- • Navigation components
Complex Components
- • Date pickers for booking
- • Data visualization for analytics
- • Treatment cards with details
- • Modal dialogs and overlays
Deliver
In the Deliver phase, I built a functional prototype using Next.js, Stitches, and TanStack Query, focusing on modular UI and a clean design system. I collected qualitative feedback to guide refinements and ensure the solution met user needs.
Final Solution
Administrator Solution
The redesigned administrator interface provides tools for managing the corporate wellness program, with improved visibility and control.
- • Dashboard with usage analytics and key metrics
- • Employee management with bulk actions and search
- • Credit allocation system with history and tracking
- • Booking overview with filtering and export options
Employee Solution
The employee experience was redesigned to simplify the booking process and provide better visibility into available treatments and credits.
- • Streamlined booking flow with clear steps and information
- • Enhanced treatment discovery with better filtering
- • Self-service booking management capabilities
- • Clearer understanding of credit balances and usage
Technical Implementation
I built a functional prototype using modern front-end technologies to demonstrate the key user flows and interface designs. After evaluating the project needs, I pivoted from a mobile app approach to a web-first solution with Next.js.
Next.js
React framework for the user interface
Stitches
CSS-in-JS library for styling
Zod
Schema validation for forms
TanStack Query
Data fetching and caching
NextAuth
Authentication handling
Design System Implementation
The Harmony UI design system was implemented using Stitches, a CSS-in-JS library that enabled the creation of consistent, themeable components. This approach ensured visual consistency and developer efficiency.
Theme Configuration
Created a centralized theme configuration with tokens for colors, typography, spacing, and other design variables. This enabled consistent styling and simplified theme management.
Component Library
Built reusable components with variants and composition patterns. Each component was designed for flexibility while maintaining visual consistency across the platform.
Documentation
Created detailed documentation for the design system, including component usage, variants, props, and examples. This ensured that the system would be maintainable and extendable.
Challenges
Throughout the UX design process, I encountered several challenges that required creative problem-solving and adaptability. These obstacles provided valuable learning opportunities and influenced the final outcome.
Project Challenges
- • Limited time frame of 6 weeks for the complete UX process
- • Personal life event during development (birth of a new baby)
- • Working independently without a team for feedback
- • Balancing design ambition with realistic implementation
Technical Challenges
- • Team Limitations: With no back-end developer or API available
- • Had to simulate everything on the front-end by mocking endpoints and data
- • Time constraints meant not all planned features could be implemented
- • Formal user testing had to be deferred due to time limitations
Design Adaptations
To overcome these challenges, I implemented several strategies that allowed the design process to progress effectively:
- • Applied progressive disclosure principles to balance power and simplicity
- • Created modular components that could be reused across the platform
- • Used the MoSCoW method to prioritize critical features for the time available
- • Maintained focus on core user needs throughout the process
Key Outcomes
Despite the constraints, the project delivered several important outcomes for the RaskRask corporate wellness platform.
MVP-Ready Front-End
A functioning app framework prepared for integration of real data and features
Design System Integration
A polished UI consistently implemented across the prototype with Harmony UI
Modular Structure
A clean, component-based codebase set up for future collaboration and scalability
Stakeholder Buy-In
Continuous stakeholder engagement throughout the process with positive feedback
Design Impact
The redesigned platform addresses the core problems identified in the research phase:
Administrator Improvements
- • Increased visibility into credit usage and program metrics
- • Greater control over employee management and credit allocation
- • Reduced reliance on support for administrative tasks
- • More efficient program management through improved tools
Employee Improvements
- • Streamlined booking process with fewer steps
- • Enhanced treatment discovery with better filtering
- • Self-service booking management capabilities
- • Clearer understanding of credit balances and usage
What's Next
To capitalize on this foundation, I outlined several next steps for the project:
Design Refinement
- • Finalize Harmony UI v1.0 – polish and document the design system for handoff
- • Conduct formal user testing with corporate clients and employees
- • Expand the component library with additional patterns
- • Refine interactions based on user feedback
Feature Expansion
- • Collaborate with a back-end team to develop real APIs
- • Implement employee anonymity (privacy for individual usage)
- • Add credit rollover features (unused credits carrying forward)
- • Create one-click invoice exports for administrators
Reflection
While I began this project following the structured Double Diamond design process, I learned to adapt and blend methodologies into a more agile, Lean UX approach as circumstances changed. Real-world constraints meant making pragmatic decisions about scope and priorities, but ultimately those constraints helped me focus on delivering a solid foundation for RaskRask's corporate wellness offering.
This experience reinforced the importance of staying user-focused yet flexible in my approach. Even though I couldn't implement everything at once, concentrating on the core needs and involving stakeholders at each step ensured meaningful progress. The modular approach to component design enabled efficient implementation while maintaining flexibility for different contexts.
Creating the Harmony UI design system was a particularly rewarding aspect of the project. It not only ensured visual consistency across the platform but also provided a foundation for future development and scaling.
I'm excited to see how RaskRask builds on this groundwork moving forward to fully realize the vision of an empowering corporate wellness platform.