Project overview
During my time at Yext I worked on a team that designed and deployed search-optimized pages for businesses across the globe.
During our partnership with Dior, we developed and launched localized web pages and an intuitive store locator, enabling visitors to effortlessly find their nearest Dior storefront. This initiative enhanced Dior's discoverability and boosted search impressions.
Role
UI/UX Designer
Company
Yext x Dior
Platform
Web, Mobile Web
Project timeline
The project followed a 15-week implementation timeline, during which I was involved from start to finish. This end-to-end involvement enabled me to influence key decisions, maintain design consistency, and address any necessary adjustments after the pages went live.
The green dotted line represents where I was involved in the implementation process
Defining constraints
To help guide my design decisions, I worked with the client, project manager, and engineers to align on constraints.
User
Users can quickly and easily find what they came for without reading every word on the page
Users can successfully locate their desired location
User experience is seamless when transitioning from the Dior site to Yext pages
Technology
Locations will vary in data and content
Search engines can acceptably classify, categorize, and rank the content on the page
Responsive to different screen sizes
Business
Increase web traffic to Dior.com
Drive conversions through “Get Directions” clicks
Highlight recent Dior promotions
Accommodate 4 different Dior location types
Accommodate both English and French speakers
Wireframing
User Flow Mapping
With these constraints in mind, I designed a comprehensive user flow and focused on making it easy for site visitors to access the information they needed, regardless of where they were in the flow. This involved carefully mapping out each step, anticipating potential pain points, and ensuring logical navigation paths.
Wireframes
I created wireframe based on the content strategy that we had worked through. I leveraged our modular, brand-able design system to accelerate the prototyping process and worked with engineers to understand the level of effort to include certain features like filtering and categorization.
Dior style guide
Styling guidelines
Dior branding is used across the pages for a consistent user experience across Yext pages and the Dior site. Before moving on to high-fidelity designs, I analyzed Dior's current branding. In order for users to smoothly transition from Dior.com to the Yext pages, I took note of styles from the brand that I could apply to my designs and summarized my findings with a style guide.
Accessibility
At Yext, designers are considered guardians of WCAG, the web accessibility guidelines. We are responsible for calling out any brand elements that do not meet WCAG 2.0 AA including but not limited to color contrast minimums, link ambiguity, touch target size, and readability. For this specific project, I recommended adding a hover state to Dior's primary link style to make links easier for users to discover and updating lighter text colors to be accessible.
Dior location pages highlight a store's basic location information at first glance for a user. The white space and bolder headlines enhances readability and scannability but also reflects Dior's elegant and sophisticated brand identity.
The Dior store locator allows users to quickly find their desired store by filtering through criteria such as location, store type, and featured product categories. Beyond guiding users to specific location pages, the locator drives "Get Directions" conversions and supports variable content.
Development & QA
Aside from the initial handoff, I worked closely with the developers on the project and answered any design related questions that arose throughout the development phase.
