Store Locator (UI)
Eye Health, E-commerce
2 weeks (part of perm role)
A global online contact lens and eye-care retailer, aiming to target both new customers and those with a repeat contact lenses prescription.
Brief & Goals:
To design an interactive store locator that works across multiple devices and make it easier for users to book an eye test with Vision Express (partnership), to make eye tests and contact lens check-ups available to everyone.
What I Did:
- Sketches & Wireframes
- Interface Design
- Interactive Prototyping
To save time for developers and deliver a project with a quick turnaround, the design needed to implement Google Map API as well as use native functionality whenever possible. I also researched into the best practices to liaise with the tech team to check feasibility.
Designs & Prototypes
Full-width map outside the container for greater navigation and visibility. The sidebar is thin to let users see more of the map. Max. of 10 stores shown to reduce clutter for greater usability.View Prototype ›
Uses native functionality i.e. phone calling, directions + search current location for faster load speed and easy learnability. When a marker is selected, the relevant location info. underneath opens to provide more info.View Prototype ›
Store finder widget is full width, listing max. 1 result in the list to save space and allow greater navigation across the map.
Widget panel is left aligned and narrow to make map markers easier to tap.
Process & Planning
Researching Best Practices
- Support third-party apps for directions
i.e. Apple Maps or Google Maps linked to store locator page. Users will be able to click on their preferred location and launch travel directions in their navigation app of choice, instead of trying to work out directions and navigate themselves.
- Don't use zip code only searching
If you don’t know the area, this means going to Google, searching for the area code, and then coming back to the store locator. That’s too many steps and can risk losing a customer.
- Provide clickable phone numbers
Don’t force user to copy and paste the phone number into the phone application
- Display only 5-10 locations at a time
Give the user options, without overwhelming them. Also, this makes it easier to navigate and select specific locations with less risk of confusion
- Show results based on a user’s current location
Can be useful to show store locations without having them to search for it.
Map markers include partnership logos to communicate that the locations are not Lenstore shops and also to display other partners across other countries of the Lenstore sites. I also helped to adapt the current brand styling using thin strokes and rounded corners for consistency with other icons across the website.
The importance of Native Functionality:
Faster load speeds, fewer potential bugs during development and quicker to implement to meet tight project deadline.
Planning + Research During Tight Deadlines Pays Off!:
Researching best practices, showing wireframes and communicating design decisions allowed me to see if I was on the right track and needed to consider other factors.
Think About Different Interactions:
Considering the differences between devices from a usability perspective.
Frequent Communication is important:
It was important to keep both, developers and stakeholders involved during the design process to check feasibility as well as following project goals.
" Franco created a design system to allow for consistency as well as faster, and easier, builds. His communication & presentation of interactive prototypes helped my team, and the marketing team, fully understand how the designs should function. Reducing the risk of errors occurring during implementation. He was a great communicator and very easy to get along with. Looking forward to seeing what Franco next produces! ”
- Kam Banwait,
Senior Developer at Lenstore