Linking the digital
and physical

Specsavers_Hero
Client - 
Specsavers
Year - 
2018
Deliverables - 
Brand
Research
User Experience (AR)
Responsive

Specsavers was in need of an immersive end-to-end digital experience that held true to the ethos and value that customers experienced in-store.

Specsavers-Homepage_390px

Objectives

The one-to-one experience a customer receives instore needed to be at the forefront of the e-commerce site. It should allow customers a seamless way to book eyetests, renew subscriptions and purchase frames with confidence, whilst being flexible enough to be managed across multiple markets across the globe.

Persona_Image-01_Extended

Research methods

Market research analysis

Research analysis was done on direct competitors online and instore. Extended research of further e-commerce platforms were also analysed.     

Customer journey mapping

Multiple journeys were explored and tested across various parts of the experience. These helped us understand where retention was required and where to simplify.

Customer interviews

Interviews were held with both customer and staff in various stores to help generate and understand core needs and requirements.

Prototype testing

Low fidelity and high fidelity prototypes were created to test customer journeys and design patterns. An iterative process was applied to help refine and influence the final build. 

Personas

Personas were created using data, insights and customer interviews to help us understand our audience.

Information architecture

Understanding business requirements and their customers helped us organise and prioritise key features and content within the site.

Specsavers-Wireframe_390px

Core customer needs

Style vs Comfort

With a myriad of products and customer archetypes, customers still need to feel like they belong and can browse and find what they’re after with ease. Personalisation is an important feature for users with specific style, sizing and optical needs.    

Book appointment

Customers did not want to lose the relationship with their ‘local’ store. This human connection and advice was valuable to alot of customers, ie. the ability to book appointments with their trusted optometrist.

I need assistance

Some of the core frustrations were seen during their in-store experiences, being un-impressed with busy floor staff that sometimes do not have the capacity to assist everybody at once. It needs to be easy for users to find and access optical advice and helpful information.

Specsavers-Homepage_1440px

Key features

Following our customer interviews and market analysis, we synthesised our findings and were able to create customer journeys that were presented, discussed and tested with the users. These exercises formed a great foundation to move into feature ideation and prioritisation.

Specsavers-Navigation-Search_1440px-1

Frame Styler

To ensure customers were able to make an informed decision when purchasing, we partnered with Ditto to help customers discover their perfect frame that matched their face shape. Using AR technology customers were then able to virtually try on all suggested frames before purchasing. 

Specsavers-Facescanner_1440px_01

Frame Finder

Specsavers Frame Finder guides customers through a series of questions to help recommend the perfect frame. We realised that playful animations and thoughtful page transitions would help users digest content more easily and retain engagement throughout the flow. Specsavers Frame Finder took the guesswork out of purchasing.

Specsavers-Poduct-finder-02_390px
Specsavers-Product-finder-Results-03_1440px

Ask The Expert

To ensure customers still felt connected to specsavers, we partnered with Intercom to provide support and helpful advice throughout the journey. We were able to triage all requests through some initial questions, to ensure the customer connected with the correct expert.

Specsavers-Chatbot_1440px

Brutal Simplicity

If it’s there, make it big and clear.  We didn’t want to overload users with options. Minimise cognitive strain by limiting the number of elements vying for attention at any one time. Use progressive disclosure to communicate information in easily digestible chunks.

Specsavers_Module-03_1440px
Specsavers_PLP_1440px-02
Specsavers_PLP_390px

Accessibility

We didn’t see accessibility as a limitation designed to help the few, but as a chance to make digital better for everyone. Almost anybody can have trouble with their eyesight or hearing, we wanted to ensure the experience was clear and precise for all.

Specsavers_PDP_Full-02_1440px
Specsavers_PDP_Specifications-02_1440px
Specsavers_PDP_Hero-02_390px

A Scalable System

We created a digital design system to match the overall brand look and feel. Layouts and typography are inspired with accessibility and simplicity in mind. Playful motion design creates enjoyable transitions that guide the user reflecting a helpful in-store experience. A documented framework that could be implemented across local markets.

Specsavers_DDS_Standards_1440px
Specsavers_DDS_Principles_1440px
Specsavers_DDS_Tone_1440px
Specsavers_DDS_Typography_1440px
Specsavers_DDS_Colour_1440px
Specsavers_DDS_Iconography_1440px

Get in Touch!
I'd love to hear from you 

London, UK

steve.stewart86@gmail.com

+44 7752161729

©2019 Steve Stewart. All rights reserved