End-to-End Web & Mobile Redesign
UX vision through research-driven design.
UX RESEARCH
USABILITY TESTING
UI/UX DESIGN
WIREFRAMING
PROTOTYPING
Challenge
Drivers in NSW found MyPlates’ existing experience confusing, leading to high drop-off rates before purchase. The outdated design also made customisation challenging.
Solution
This project included a comprehensive discovery phase, resulting in a new design that prioritizes user needs and was showcased in a prototype for both mobile and web.
MY OBJECTIVE
Develop a user-centric platform that effectively addresses user needs, pain points, and aligns with a user’s mental model.
Analysis & Research
In the initial phase, I conducted a comprehensive analysis and research to grasp the core problem and gain insights into the market and users. This step involved five key methods:
-
To enhance the user experience, I initially conducted a heuristic analysis.
Identified pain points include UI design inconsistencies, unclear messaging, lack of system status visibility, and issues with site navigation.
-
To ensure accessibility for all users, I evaluated the website's WCAG 2.0 compliance for design aspects, focusing on text contrast, link clarity, scrolling behavior, and image accessibility.
Identified pain points include text contrast issues with buttons, unclear links, scrolling challenges, missing table captions, and inadequate focus states.
-
The competitor analysis on personalized plate services uncovered strengths and weaknesses among seven competitors. Key findings include unique selling propositions like real-time combination displays and guided checkout flows. KiwiPlates.nz stood out with its user-centric design and earned a top UX/UI rating of 5/5. Overall, there's room for improvement in accessibility, content organization, and UI sophistication across all competitors.
-
Google Analytics analysis provided insights into user demographics, journeys, and behavior, which is crucial for enhancing digital experiences. The site attracts primarily new users via mobile, emphasizing the need for mobile optimization and strong SEO. I further discovered high abandonment rates during checkout and challenges with the create a plate feature.
-
Mapping the current Information Architecture (IA) of the website before designing a new one was crucial as it provided a foundational understanding of the existing structure, identified pain points and successes, and informed user-centered design decisions.
User Testing
During user testing of the live website, I explored user needs, pain points, and preferences through interviews with participants across Australia, with diverse backgrounds, varying degrees of experience with custom license plates, and aged between 18 to 65. Their insights revealed key areas for improvement, which helped me to further refine the experience to meet user expectations better.
Key insights included:
Experienced users are the focus, leaving newcomers needing more guidance.
Pricing lacks transparency.
Cluttered pages hinder step clarity.
No step-by-step guidance.
Add requested features like plate visualization.
“I'm not really sure what style fee means? It could be a bit clearer on what the actual final price will be.”
— New Site Visitor
Personas & User Stories
After gaining an in-depth understanding of the user, I visualized these insights into personas to clarify the target audience. These personas helped me and the client to understand who we were designing for clearly.
Next, I created user stories based on these personas to uncover new interactions or edge cases, such as a user buying license plates for themselves and their partner when getting married.
Design Iterations
Crafting the low-fidelity wireframes spanned approximately five days. This phase provided a tangible visualization and fostered profound thought around the design.
Hi-Fi Wireframes
After several rounds of feedback on the low-fidelity wireframes, the designs were ready to be transformed into high-fidelity. Having previously set up most of the designs in a responsive, organized manner in Figma, I could easily update the existing mocks. This process involved multiple iterations, incorporating feedback from both my manager and the client.
Prototype
The final phase of this project involved creating an interactive prototype, which served as a vital tool for evaluating the flow of the process of buying license plates.
Once finalized, the prototype was presented and shared with the client, providing them with a comprehensive understanding of the design and possibilities within this design.