UX/UI design

Xero advisor directory

Here I led and undertook the UX/UI Design for a responsive website.

The Xero advisor directory helps business owners find an accountant or bookkeeper they feel comfortable with – one with experience in their industry. The website is search-heavy and needed filters, list view, map view, profile pages and contact functionality.

My role: UX/UI and visual design working with the Global Head of Marketing Design and a UX Designer/Researcher

A sample flow

The advisor directory is a relatively large and complex interface covering a range of pages and many minor interactions. Below you can see a very high-level flow for a user as they might progress through some of the screens.

List view

List view was chosen as default over map view, due to results uncovered in Google analytics.

Map view

Map view was designed but we stepped back from building it for the live site. A few valid and intriguing reasons contributed to this decision.

Filtering by industry experience

Users are able to search for accountants and bookkeepers with experience in their industry. I designed the UI for a multi-functional dropdown so that a person can choose from a list of industries or freetype and be shown matches. Here you can see the UI with suggestion matches.

Fully responsive for mobile viewports

Everything was designed to work effectively for a user on a mobile phone. User context was considered in the design / decision making process for these screens.

Profile pages

A range of variable information is able to flow from a database into profile pages, whether it be blurbs, videos, education levels, achievements or photos.

Contact form

These enable the user to quickly send messages to firms or individual staff. The bulk of the interface copy was written by me for this project.

Detailed specs for developers

Below are some detailed UI specs I provided to developers for this project. Sketch plugins are used to automate some of this work.

Vitally important to accompany these are the written user stories I supply. These make it clear to developers and testers what we are creating, and how an interface is to function for the user.