Role - UX/UI Designer
Brief - Review the UX of the current car servicing Product Listing Page. Identify any areas that could be improved and provide recommendations for changes. Redesign the mobile screen for the product listing page.
Challenge - When redesigning an existing page its important to consider all the potential user types, addressing both first time users and returning users is crucial when trying to maintain familiarity while improving on user flows.
With the site having an established design language, information architecture and hierarchy we had to find incremental design changes to fix inconsistencies and pain points rather than wholesale changes to avoid possible confusion.
We began the UX review by first Familiarising ourselves with the purpose of the web page and the target audience, to best understand what the users are trying to accomplish when they visit the page.
From here we are then able to look at and evaluate key aspects of the site such as; Navigation, Layout, Content, Visual Design and Consistency. Making sure the most important information is easily accessible and prominently displayed. The language is concise, easy to understand and tailored to the target audience. And ensure visual design elements (color schemes, typography, and imagery) are consistent with the brand, and the visual hierarchy is making sure that important elements stand out appropriately.
Before moving onto the redesign of the product listings page we created our user personas to help guide our design decisions. The personas were used to help ensure we had a user centred approach by focusing on the specific needs, goals, behaviors, and preferences of user groups.
We were able to use our personas along with some competitor analysis to produce a number of user and business goals for the primary focus of the redesign.
With a clearer understanding of both user and business goals, we were able to begin creating some simple wireframes that prioritised the most relevant features and functionalities.
With our general layout and user flow created using wireframes, we moved on to building a simple design system using atomic design principles to create building blocks that could easily be scaled for future use across the whole site. Starting first with the basic elements such as text, colour, spacing & icons to help build a consistent design throughout.
These basic elements were then used to build increasingly complex design elements that can be easily reused throughout the design, focusing on simplifying the hierarchy and increasing the accessibility of the page. We were then able to produce prototypes of our design and mock-ups of the finalised design with rational for the design decisions.