![](https://cdn.myportfolio.com/c560e130-9b6c-4a2b-9592-4f8d77617d4d/d836d17e-41b0-45fc-a059-25a9789c2399_rw_1920.png?h=dfada87f232f9d25343a1fd53d6e5856)
Spark Health Form
OVERVIEW:
Spark NZ aimed to create a form for Spark Health customers to streamline onboarding, simplify access to Spark products and services, and provide exclusive deals.
GOAL:
Create an onboarding form for Spark Health customers, utilising the Spark design system within 2-weeks.
COMPANY:
Spark NZ - Leading telecommunications and digital services provider in New Zealand.
ROLE:
Lead UX/UI designer - User research, visual design, prototyping and cross-collaboration.
Defining the Purpose:
![](https://cdn.myportfolio.com/c560e130-9b6c-4a2b-9592-4f8d77617d4d/42e3f5bb-443c-432b-acd9-07a58ffc5a43_rw_1920.png?h=3a36d66cee62a684b3c461e832e5b941)
I participated in a workshop facilitated by the Customer Experience (CX) designer to shape the end-to-end journey, providing UX expertise. We defined the target user, their objectives, and aimed to enable Spark Health users to onboard and easily access relevant products and services.
From this, I also identified key UX/UI requirements, including:
• The target users having varying levels of tech-savviness.
• Requirements to maintain consistency with the Spark design system.
• Meeting AEM system technical demands.
Flow Refinement:
![](https://cdn.myportfolio.com/c560e130-9b6c-4a2b-9592-4f8d77617d4d/90be5350-00df-4226-b143-e6bcff1a8891_rw_1200.png?h=30c938bebccb4a139d9b518f242e598d)
Following the outcome of this workshop, I worked alongside the CX designer to refine the form flow, ensuring it met the outlined requirements. Taking the lead from a digital perspective, I guided key decisions using user research to create a seamless, consistent and universal user experience.
Creating Components for the Design System
![](https://cdn.myportfolio.com/c560e130-9b6c-4a2b-9592-4f8d77617d4d/29c95033-60cf-4248-b460-d894f5f424bf_rw_1200.png?h=deafb80ab4906d1d69025e8c8efeba65)
This allowed me to then collaborate with the AEM Developer to establish the foundations for building the form effectively. By leveraging the Spark Design System, I gathered the necessary requirements to create a library of components for the form. This included:
• Input fields and their various states: Default, active, hover, error and success
• Font type and size
• Colours: Extending existing designs to create additional variations.
• Messaging: Tailored for specific use cases and scenarios
Finalising Designs:
![](https://cdn.myportfolio.com/c560e130-9b6c-4a2b-9592-4f8d77617d4d/48fae43b-5b0b-45a2-bab5-8419acb5ac5d_rw_1200.png?h=ac034dda8ef8bd7c7b4690cb3588a22b)
Having defined the user flow, requirements, and design system in previous stages, I was able to create the high-fidelity mockup. By finalising the copy alongside the content designer, understanding technical constraints with the AEM developer, and aligning with the form's requirements, I then prepared the steps to build the interactive prototype.
User Testing and Iteration:
The interactive prototype created in Figma was used for three user tests led by the CX designer to identify major complexities and usability challenges. The testing focused on how easily users could navigate the form and complete the required inputs.
Insights from these sessions then allowed me to refine the designs to prepare for release.
Delivery:
Understanding time constraints (2-weeks), I quickly iterated on the form, considering the varying tech-savviness of the target market to ensure it was as intuitive and user-friendly as possible.
Collaborating with the AEM developer, CX designer, and Content Designer, the team successfully deployed the form, providing users with a streamlined way to access Spark products, services, and exclusive deals.
![](https://cdn.myportfolio.com/c560e130-9b6c-4a2b-9592-4f8d77617d4d/f8c6de77-4c70-4178-9685-8245939641a2_rw_3840.png?h=600738281299e6338138fafebb2382df)
Conclusion:
This project involved a quick turnaround to develop accessible forms for Spark Health customers. By leveraging the Spark design system and collaborating with key stakeholders - including the CX designer, content designer, and AEM developer - the team delivered a solution that aligned with Spark’s brand and met both design and technical requirements. The form provided a streamlined, intuitive experience, prioritising accessibility and clarity, ensuring ease of use for customers with varying digital skills. This resulted in a more efficient and satisfying interaction with Spark Health’s digital services.
Skills gained:
- UX/UI Design
- Working around tight deadlines
- Cross-collaboration
- Workshop participation
- Quick iterations
- Copywriting