UX | UI | Styleguide | Trip Planner | Maps | Maintenance
The New Zealand Automobile Association (NZAA or AA) is an incorporated society (NGO) on a membership basis, that offers services such as: free motoring advice, breakdown assistance, vehicle repairs, driver licensing, driver training, travel maps, accommodation guides and bookings, insurance, and finance.
As of 2020, the AA has over 1.7 million members across New Zealand.
Photo by Jannis Lucas on Unsplash
A big and fairly important part of the AA Motoring business is a very content heavy AA Cars section.
The whole section was relaunched and with that central elements for the business: The Servicing Menu, The Location Finder (part of AA Maps), Time & Distance Calculator and AA Roadwatch are just a few examples that came to light.
The main challenge on this project was the entry point for the user. Without bombarding the user with business relevant content - we found a solution to navigate into this section - with less clicks possible.
The project started with a workshop having all team members on deck.
The goal was to get a perspective of the amount of content, simplifying the complexity and to review the content structure.
It was an eye opener for the client.
AA Cars - Sitemap workshop
The biggest turn out of the workshops was that, although the demographic is widely spread across age and profession, that people have similar navigation patterns and needs.
So the approach by navigating through the user needs was set and ready to go into production.
AA Cars - UX workshop & persona interviews
Laying out the structure of the first 2 navigation levels.
Home | 3 entry points then highlight modules and crosslinks
Sections "Selling a car" & "Owning a car" | Bringing the 3 most clicked subpages to the top of each section
The styleguide kept growing during the project. Various elements and modules were added in the process.
Resulting in the following sections of the styleguide:
Brand Design Principles
Colors
Typography
Iconography
Responsive grid
Navigation
Content modules [eg. tables]
Content modules [eg. interactive, sales, filter]
UI Elements (eg Buttons)
UI Elements (eg paginations, date picker, toggles)
Designs were created in Sketch and distributed in Zeplin to be reviewed by client and developers.
The 3 entry points to AA Cars: Buying - Owning - Selling + booking a Pre Purchase Inspection
A central element: the Location Finder
Servicing menu with number plate check
Search for the most recent road updates: AA Roadwatch
Made with ❤ at
