Mohawk Group
Responsive web design for commercial flooring.
Project Overview
Client
Mohawk Group provides flooring products for large commercial spaces such as hospitals, universities, hotels, etc.
My Role
Lead UX | Requirements Gathering | User Research | Wireframing(Sketch) | Prototyping(InVision)
Personas
Professional Interior Designer | Mohawk Sales Representative
Problem Statement
How can the Mohawk Group site be redesigned to better suit the needs of Interior Designers and drive more traffic to the site?
high-Level Requirements
Redesign full site to be responsive
Provide floor visualization tool for commercial spaces
Increase inspiration material
Create easy access to product tools such as design kits, specifications, etc.
Include sample ordering
Include easy search
User Research - Key Findings
User research was conducted by interviewing 20 professional interior designers, 8 Mohawk sales representatives, and additional key Mohawk stakeholders.
No. 1 - desktop over mobile
Research found that designers almost exclusively accessed these product sites from large, high resolution monitors while at work.
No. 2 - Visualize Flooring in Client Spaces
In an interior designer’s discovery phase, they need to visualize what flooring will look like in their client’s space quickly. In the past, designers would have to download a jpg of a flooring sample and use their own rendering tool to visualize it.
No. 3 - FIlter Options
When asked what was most important in their decision for flooring, designers reported product type (such as carpet or hard surface), color, and cost.
Note: Mohawk had previously not included pricing on their site because pricing was controlled by Mohawk distributors. After negotiations, I was able to introduce a dollar sign range as a filter option: $ - $$$$
No. 4 - Robust Search
Interior designers (primary) search by product type, name or collection. Sales Representatives (secondary) search by product codes: Ex, GT455
User Journey - Interior Designer
Page Template Development
Site pages were setup to follow the needs of the user journey. Beginning with heavy inspiration content, ending in product specifications and ordering.
Home Page:
Used for discovery & inspiration
Reading Pages:
Information pages for discovery, inspiration, product browsing
Product Listing Pages:
Product catalog pages with filtering options used for browsing
Product Detail Pages:
Used for visualizing, rendering tools, ordering samples, specifications, etc.
Wireframe Development
Responsive Design
After studying Instagram, I came up with a responsive solution that would allow for the user to view different types of flooring in a room, similar to how a user can pick from different filters for a photo on Instagram.
Outcome & Reception
Positive Feedback
Younger audience of interior design users were able to adapt to the new site quickly
Visualization tool on products received positive feedback during usability studies
Product imagery and inspirational tools helped to drive site traffic
Search functionality was well received by sales representatives who needed to quickly search by code
Learnings
‘Power users’ and older audience had a bigger learning curve for new site
Initial search didn’t include product codes and was a friction point
Navigation syntax & taxonomy adjusted slightly after initial launch per feedback from power users
More prominence given to product specifications download CTA on product detail pages
MORE PROJECTS
