Building a Store Locator

 

Context

Fairphone
January 2018

Role

User experience
and interface design

Team

Andrew Davies (content)
Gabrielle Pauty (icon design)
Joëlle Payet (e-commerce)
Rudy Guedj (icon design)
Ivaldi (development)

 

The context.

Since 2013, Fairphone is building the World first ethical smartphone. The company aims to create a smartphone made from conflict-free materials, with good workers condition and long-lasting design.

As UX Designer, I worked as part of the e-commerce / direct-to-consumer sales team in close collaboration with the marketing and communication team.

 
 
 Fairphone new store locator
 
 

The goals.

The primary goal of this project was to offer an easy way for potential customers to visualise the nearest shop where to see, test or buy a Fairphone.
At the moment, this project was mainly motivated by the out-of-stock situation and the importance for the company to send customers to offline stores to avoid losing too many potential buyers.

This project was also motivated by the growing number of customer support tickets asking "Where to buy the Fairphone 2?" during this online unavailability situation.
Directly accessible from the Fairphone 2 product details page, we wanted to reduce the creation of tickets to reduce the pressure existing on the Customer Support team.

 
 

The inspiration.

For this project, we identified several existing store locator as inspiration for our projects. We were frequently taking a look at Starbucks for… everything, Albert Heijn and Chanel for the diversity of filters.

Of course, we were also watching the Nielsen Norman Group's recommendation for Store Finders and Locators closely.

 
Sotre locator user flow.png

Store locator user flow

A summarized version of all steps and actions a user can make in this component.

 

The prototypes.

During this project, we were trying to test a new way to start, prototype and deliver projects in the company not far from the Google Design Sprints methodology. In less than a week, we were able to begin the development of prototype tested with some employees and friends.

To be able to quickly create and test this first prototype, I mainly worked in Sketch and Flinto. After each test, the usage of the brand style guide was really helpful to adjust and improve the prototype on the fly.

 
 
store-locator-desktop-artboards.png

Artboards of the desktop prototype

Every screen and possible variation was designed to be able to easily test all existing interactions.

 

The development.

To help our developers' team to easily and quickly build this project, I created detailed animations for each stories describing all interactions and animations.

We used tools like Zeplin to have an efficient way to communicate design constraints and specifications with the developers. This permanent communication allowed us to react quickly to the different challenge we were facing and to limit the number of iterations before the first version was released.

Each story was developed around two aspects:

     1.

User experience
To offer the best experience to all our visitors, we tried to provide an accessible way to access the information from any place on our website.
For example, we developed the search engine in a way allowing us to call the search input from another page on the website like our product pages.

     2.

Search Engine Optimization
To increase the visibility of Fairphone and our partners' shop, we chose to develop a URL strategy offering direct access to each partners' location.

 
 
 Screenshot of the tool used for the collaboration with the developers' team, Zeplin.

Screenshot of the tool used for the collaboration with the developers' team, Zeplin.

 
 

“Damien changed a quick win born out of necessity into something to be proud of: consistent with company design, better equipped for conversion and improving the user experience due to accessibility, broad implementation and location based results.”

– Esmée Laclé, customer support knowledge manager @ Fairphone

 

The results.

Some of the goals of this project are easier to measure than others. Because we don't have direct access to the customers who bought a Fairphone through our resellers' network, it is quite difficult to measure the impact of the Store Locator in the conversion through our partners. Fortunately, some other goals are easy to track!

Few months after the release of the new Store Locator, we measured the success of this projects through our Google Analytics dashboard and our heatmaps.

Thanks to this complete redesign and the refreshed user journey, we moved from an average of 1,000 views per month to 13,000 views.

Evolution of the pageviews before and after the release of the project
(project released mid-January 2018)

 

Finally, thanks to this project we are now able to provide the Store Locator in 6 languages. Because it was just a support article before, the content was only available in English.

Every day, these translatable components and the better visibility help us reducing the number of support tickets created and the pressure on our Customer Support team.

 


 
 
 
avatar-circle@2x.png
 

Hi, I'm Damien, a user centered designer based in Amsterdam.

More about me
More projects