Flexi Medical Certificate
Project information
- Category: Government Web application / Self-service Digital Platform
- Client: Ministry of Social Development
- Project date: July 2021 - January 2022
- Project URL: my.msd.govt.nz
- Mobile Relevance & Platform Strategy
Note: The actual feature is not publicly accessible, as it is part of a client-based experience. Please refer to the wireframes and final design shown.
Although delivered within a responsive web platform, all design decisions prioritized mobile-first usability, accessibility, and delivery feasibility across breakpoints. Layouts were validated to ensure clarity, touch-friendly interaction, and WCAG compliance on smartphones and tablets. UI components were designed to scale fluidly across devices, with simplified navigation and reduced cognitive load tailored for mobile users.
Role & Responsibilities
- Role: Senior UX/UI Designer
- Key contribution: UX/UI Design, Visual Design & Illustration, Ideation & Concept Development, Accessibility & Inclusive Design, Prototyping & User Testing
Overview
I led the design and implementation of the Flexi Medical Certificate feature within MyMSD, a digital platform that enables beneficiaries across New Zealand to manage their interactions with the Ministry of Social Development (MSD). This initiative aimed to transform how medical certificates are managed for key client groups, including:
- Jobseeker Support – Health Condition, Injury or Disability
- Young Parent Payment
- Youth Payment
- Sole Parent Support
- Supported Living Payment and partners of JS HCID and SLP clients
Objective
The core objective of this functionality was to align MSD’s certificate management process with medical practitioners’ recommended review dates, ensuring that clients receive support that reflects their actual health needs. This change not only enhanced the client experience by reducing unnecessary administrative friction but also enabled MSD to comply with updated legislative requirements.
Emphathise
Early user research revealed that the platform was perceived as emotionally disengaged and overly formal—some users even described it as feeling like a “corporate suit.” Additionally, the process for uploading medical certificates lacked clarity, creating friction for users during a vulnerable time.
Define
Problem Definition
Through synthesizing our user research, we identified a critical, human-centered problem. The existing process for uploading medical certificates was not only functionally flawed, but it also caused significant emotional and cultural friction. This was particularly true for clients with diverse backgrounds and varying levels of digital literacy, who found the process to be unclear, overly formal, and culturally misaligned. These findings helped define the design direction: to create a more empathetic, culturally sensitive, and user-friendly experience.
Point of View(POV) Statement
Clients with diverse needs require a clear, reassuring, and accessible way to upload their medical certificates because the existing process is unclear, emotionally disengaged, and causes unnecessary stress during a sensitive time.
Key Design Challenges
Two primary challenges shaped the design direction:
- Emotional tone: Users felt MyMSD was cold and overly formal, creating emotional distance during sensitive interactions.
- Usability: Instructions for uploading medical certificates were unclear, leading to confusion and frustration.
These findings helped define the design direction: to create a more empathetic, culturally sensitive, and user-friendly experience.
Ideate
Reframing the Problem (How Might We Questions)
After synthesizing our empathy findings, we used the following "How Might We" (HMW) questions to guide our brainstorming and concept exploration:
How might we make the upload process feel more reassuring and less formal for clients?
How might we use visuals to clarify instructions and reduce cognitive load?
How might we align the interface with the cultural needs of a diverse user base?
Concept Exploration & Co-creation
I facilitated design workshops in our design lab, collaborating with stakeholders, developers, and cultural advisors to co-create ideas and validate design directions. This collaborative process helped generate ideas for illustrations, UI components, and accessible design patterns that directly addressed our HMW questions.
Key Concepts Explored
- Empathetic illustrations: A cohesive set of illustrations to support key content and instructions.
- Improved UI patterns: Restructured layouts, simplified input fields, and clearer feedback mechanisms aligned with accessibility standards.
- Refined UX flows: Streamlined the journey to guide users through the upload process with greater ease.
By integrating thoughtful illustrations with refined UX flows and scalable design patterns, I helped transform the feature into a more inclusive and emotionally intelligent experience—especially for users navigating sensitive situations.
Prototype

I developed wireframes in Figma, focusing on simplifying the certificate upload flow and adding contextual guidance. These evolved into interactive prototypes used for internal reviews and user testing.
To prepare for a second round of client testing, I created three distinct design options for a step-by-step carousel, each illustrating the main actions clients would take. I also designed three corresponding illustration styles to explore how different visual tones could influence emotional engagement and accessibility.
User Testing & Insights
- Illustration Style 2 was the most preferred, receiving 42% of the vote, and was described by users as “Simple,” “Clear,” and “Detailed.”
- The other styles received 36% and 22%, respectively.
- Some visuals—such as sand timers and pot plants—were found to be confusing or culturally irrelevant.
These insights informed future design decisions and helped ensure the experience was inclusive and approachable for users with varying literacy levels, cultural backgrounds, and emotional sensitivities.
Iterative mapping choreographed the full UI flow, guiding the evolution of upload logic, illustration placement, and feedback states with clarity, emotional resonance, and accessibility precision.
Testing
Validate
To ensure the Flexi Medical Certificate experience was intuitive, inclusive, and operationally feasible, I facilitated a cross-functional Design Lab session with key stakeholders:
- Digital Product Owner and Product Manager — to validate scope, prioritization, and release feasibility
- Front-End Developer — to confirm CMS integration, illustration rendering, and responsive behavior
- Accessibility Team — to ensure WCAG compliance, screen reader support, and inclusive interaction patterns
- Comms and Content Team — to refine tone, language clarity, and emotional resonance
- Cultural Advisors and Service Delivery Leads — to align with diverse client needs and frontline realities
Session goals
- Validate illustration tone for emotional neutrality across cultural contexts
- Test clarity of upload instructions and feedback messaging
- Identify accessibility risks in layout, navigation, and hierarchy
- Align content and UI with MSD’s inclusive design standards
Flow maps and annotated prototypes were refined iteratively throughout the design process, not just during the session. Each review cycle helped validate logic, surface risks, and evolve the experience based on real-time feedback from cross-functional stakeholders.
Outcomes
- Selected Illustration Style 2 for clarity and cultural adaptabilityy
- Refined onboarding tone and visual hierarchy for emotional clarity
- Validated accessibility features: screen reader support, keyboard navigation
- Confirmed technical feasibility across devices
- Strengthened cultural neutrality through simplified messaging and inclusive visuals
This session served as a strategic checkpoint — aligning design intent with technical feasibility, accessibility standards, and cultural neutrality to ensure the final experience was inclusive, trustworthy, and delivery-ready.
Agile Collaboration & Delivery Framing
The Design Lab mirrored agile ceremonies, functioning as a sprint checkpoint to align backlog priorities, validate feasibility, and de-risk delivery. Annotated prototypes supported seamless developer handoff, while feedback loops with content, accessibility, and service advisors ensured the solution was technically sound and user-centered.
Final Design
The final design brought together refined UX flows, culturally sensitive illustrations, and accessible UI components. It significantly improved clarity and emotional engagement, helping users better understand key actions such as uploading medical certificates and checking their status.
Impact
The redesign focused on improving usability, emotional tone, and accessibility—particularly for clients navigating sensitive health-related circumstances. After a six-month deferral period to support transition and adoption, the feature officially launched on 31 January 2022. The updated visuals reduced confusion across diverse user groups and directly influenced the creation of a new illustration library. These design standards continue to inform future enhancements across the MyMSD platform.
By integrating thoughtful illustrations with refined UX flows and scalable design patterns, I helped transform the feature into a more inclusive and emotionally intelligent experience—especially for users navigating sensitive situations.