Product Designer

Localist

Localist is the insider guide to what’s great in New Zealand. Localist allows people to share their stories, make discoveries and connect with the people and things they love.

I worked with Localist during a transitional period for their business, during which they migrated from a print-based directory/advertising business, to a fully digital discovery platform.

I was engaged to deliver upon the vision for a digital experience which would set Localist up as the best place to discover what’s great in New Zealand.

 

 

Company Type

Privately Owned

Role

Product designer, including needs analysis, requirements & scoping, wireframes, prototyping, UI Design, UX Design,
Interaction Design

Year

2013
Localist regional landing page

Re-defining the visual language

The Localist platform had previously gone through several re-designs. The site was a mish-mash of different styles and had no visual cohesiveness or over-arching visual language to speak of. So the first challenge was to provide tight direction for both the brand and the UI.

I created several “style tiles” to help form a common visual language, which were presented to key stakeholders. These style tiles were then iterated upon to determine the signed-off visual direction for the website, brand and accompanying iOS application.

Style tile elements

This initial visual work then flowed into the creation of a pattern library for common UI elements which would serve to inform all new design and development of the site and application. This UI file was then coded as HTML/SCSS as customizations to Foundations standard components.

Localist UI Kit

Re-align and improve

At the outset of the project, the requirements focussed largely on the re-design of several existing parts of the web application. This included several core ‘community’ sections such as a users profile. User profiles had long been a neglected space within the application, and the business felt that starting website improvements at this point in the application aligned well with the overarching strategy of creating a more vibrant and engaged userbase.

Running parallel with the work on the updated profile section was the creation of a new feature enabling users to create ‘lists’ of places they love.

As the goal of lists was for them to become a hero element of the “new” version of Localist, we needed to explore many different ideas around how best to display lists in multiple locations.  

After we identified what content a list might contain, where they would live, and what job they would perform, I sketched out a number of different ideas for how a list could be displayed. Sketching allows us to iterate quickly without spending too much time on fidelity. 

Once a rough idea of the lists were sketched and tossed around within the small project team involved in the project, I jumped into Sketch to produce variations of the list elements in high fidelity. 

Various concepts for the list element

As part of the process involved in developing the list feature we also had to design a task flow for the creation of a list. 

This proved to be a challenge as there were several factors which impacted this user journey i.e wether or not a user had ‘loved’ a business. We broke these factors out into user stories and then sketched out flows aligned with each story.

These flows were then produced in high-fidelity and delivered to the engineering team with a screencast and clickable prototype.  

A screen flow for a user who searches for a previous "love"
The full-page view of a list

Data informed, not driven

A huge portion of the most visited content on Localist is focussed around the business listing and search & browse pages. Over 80% of all site traffic lands on these pages, and the existing versions were suffering from a high bounce rate, low engagement and were entirely un-optimised for mobile/touch devices.

In attempting to re-design the business listing pages, we needed to be aware of a multitude of different factors which contribute to how the content is displayed on the page. Business listing pages can vary in both layout, volume of content, mix of content types. They can even differ in visual design, in that many “paid” business listings have custom backgrounds.

This proved to be a significant challenge in re-designing the listings. Working with a product manager, we scoured through the relevant data and then combined these learnings with design instinct and intrinsic business goals to produce the final result. 

Wireframes showing various mobile views of the business list
The final version of the business listing