Project Vision
Tesco came to our team looking to optimize the SEO. This was to ultimately drive in-person traffic to their store locations. They purchased two responsive web design templates to be used for all location pages, along with a store locator to organize their holistic location data.
Their previous SEO agency provided us with initial store page wireframes that the Tesco design team wasn’t happy with. All ownership of the wireframes & designs would be transferred to our team.
Challenges
1. Build an easily scaleable comprehensive design system.
2. Ensure the design accounts for data variability
3. Deliver on a complicated project in a short timeframe
My Role
Lead Designer
Tools Used
Sketch
Abstract
The Goal
Key Performance Indicators
Clearly display location-specific info such as address, number, services, hours, and important calls to action.
Craft an on-brand and responsive experience with mobile users top of mind
Create an accessible and easy to use experience to drive footfall to Tesco locations
Key Considerations
Users
Users should be able to understand the purpose of the site at first glance.
Tech
Search engines should be able to easily classify, categorize, and rank content on the page.
Business
Increase overall traffic to Tesco's subdomains. These domains would be based on location.
Content Strategy
Before jumping into the design phase, all products go through a formal strategy phase. Designers are paired with a project managers to flesh out the content that will live on the pages. It is the project manager's job to parse through and organizing all of the data provided by the client. I was able to assess it and ask these pointed questions:
How strict is the clients visual identity? Will we be able to build any original content or designs?
Being that this client is based in the UK, how will accessibility requirements differ?
What is the primary goal of the page? What interactions should we prioritize when the user arrives?
Design System
A branded style guide would need to be used as a base for all of my design work. This is to ensure a smooth transition between hosted location pages and the company homepages. Our style guides provide the basic building blocks necessary to create buttons, links, and other necessary UI components for this product.
Us designers are considered guardians of WCAG (web accessibility guidelines). We are responsible for calling out any brand elements that do not meet WCAG 2.0 AA. Color contrast minimums, link ambiguity, touch target size, and readability are all things we look out for. Thankfully, the client's design system was pretty air-tight when it came to these issues. No changes were necessary to keep the project moving.
Accounting for Variability
Due to the sheer amount of services and features that the client was looking to include on these pages, I would need to play around with the information architecture of the data. Some pages could have 20+ services, facilities, counters, and ranges they would like to feature on the page. We would need to find a solution that juggled keeping the page user friendly and meeting the client’s business need.
Both of the above options were solutions I had used in the past for previous projects, but would not be helpful in this circumstance. The main issue here would be finding a solution that could be easily implementable for desktop and mobile environments.
I decided that click-through drawers would provide the most universally friendly experience for users at any screen resolution. These drawers allow the pages to hole a limitless amount of data, allowing users to be inquire more about services and features that are relevant to them.
Developer Handoff
Once the final stages of the design phase were completed, we made sure to touch base with the client and provided them a viewable static mockup for their final review. They had minor feedback and were overall happy with where the designs landed! Once we got approval from their brand marketing, SEO, and UX teams we were able to pass the project on to development.
Handing off designs to developers allows both myself and the project manager to answer any questions that the developer might have regarding the pages. The designers may help describe any interactions, pull any key icon elements that are missing from the files, and pull any CSS elements that were not added to the original style guide. We also use a quality assurance document to track these issues as they arise. An analytics dashboard is created so that clients can monitor the page statistics they find valuable.
Success Metrics
Using Yext's Knowledge Graph we can pull some key performance indicators to track the success of these pages. These metrics were specifically selected by the client as the primary concerns for the project.
Here is a small list of a few other examples of client work I worked on at Yext. These are projects that didn't quite make the cut for any case studies, but they were enjoyable enough to work on and learn from. I’ve only included projects I felt I contributed to in an impactful way.
Impact
Our solutions contributed to nearly £2,059,321.69 in conversion value (as of March, 2022).
What I learned
I enjoyed working on this project as it showed me what was and wasn’t possible for our product offerings.
By understanding these capabilities, I was able to catch potential road blocks early, as well as advocate for unique feature additions that exceed client expectations.
