Woman browsing landing page

RESPONSIVE SITE REDESIGN

COREtec Floors website

ROLES
Phase 1: Consultant
Phase 2: Lead UX Designer, Visual Designer, QA, Site Builder
TOOLS
Adobe XD, Figma, Kentico, Adobe Creative Cloud
DELIVERABLES
Wireframes, Design System, UI Kit, HiFi Comps, Prototypes, Competitive Map, UAT, Builder, Content Strategist, Visual Designer

the background

the background

COREtec was the first brand to sell 100% waterproof floors - which quickly became (and remain) the most in-demand hard surface flooring option for their extreme durability, realistic designs and textures, simple installation and easy cleaning.

the problem

the problem

COREtec floors were doing well in specialty retailers and big box stores but their products and marketing were outpacing their digital presence. They needed a full refresh of their site in order to create a consistent experience in ads, in-store, and online. They also needed it on an updated platform that could adjust quickly to their ongoing campaigns.

the solution

the solution

We introduced key ux improvements based on industry best practices, created an expanded design system based on their brand identity, and created a widget system that would allow the brand team to update content on the site quickly.

our approach

our approach

To efficiently craft the desired user experience for our site, we employed the Design Thinking methodology. This flexible and iterative process allowed us to deeply understand our users and explore relevant design solutions for implementation.

PHASE 1

For Phase 1 my role was consultant and UX/UI Designer alongside a 3rd party agency due to lack of internal resources.

1. discover

1. discover

Discussions started with the product owners, in-house developers and subject matter experts in order to determine how our consumers used the site. We also used Google Analytics and FullStory to inform key updates that needed to be made.Through Shaw Inc.’s consumer research, we knew that most flooring consumers visit big box stores before specialty retailers or manufacturing sites directly so we also did thorough competitive research and gap analysis to take into account what type of previous experiences and expectations users might have. The site would also be translated into 16 other cultures so some research also went into different culture's floor shopping experiences.

2. define

2. define

After interviews, we synthesized our findings with the 3rd party agency. We created a user journey map for consumers and retailers for their typical needs. We cross referenced a consumer journey map and personas from the overarching Shaw Inc. research to provide further context.

3 Key findings for consumers:

  • There was a lack of clarity with product information and visuals

  • There was no easy way to compare product types

  • There was no way to keep track of favorite products or retailers that would carry those products

3. develop

3. develop

Alongside the 2 other UX/UI designers from the 3rd party agency, we started the ideation phase. We had multiple rounds of testing and iteration for this section including:

  1. Moodboards

  2. Wireframes

  3. Comps

PHASE 2

For Phase 2, the 3rd party agency dropped off and a contractor was hired. Unfortunately, the agency was only able to get approval on about half or the desktop comps so my new teammate and I had to finish comps, design the other breakpoints and additional functionality, put together the design system and other steps to get the site to launch.

  1. expand and iterate

  1. expand and iterate

For Phase 2 my role was Lead UX/UI Designer. In coordination with the 3rd party agency, we received brand buy-in. That concluded the work done with the agency. From that point on, I was lead UX/UI designer tasked with accounting for and wireframing in missing pages, adjusting and designing for mobile and tablet, widgetizing the work and coordinated with the dev team to get everything implemented, tested and launched.

  1. systematize

  1. systematize

In order to feed into the modular and systematic Universal Platform we were also creating, I needed to find the patterns between approved wireframes and comps and use the design and functionality to create widgets. These widgets would be used across the platform and needed to be brand-agnostic, flexible, and robust for other stying to be able to applied to them later. A contract UX/UI designer was hired to help. Together we were able to deliver 19 widgets, several template pages, and a flexible layout grid system. This work was done in 2 very long weeks.

  1. testing

  1. testing

After delivering this work, we coordinated with the devs to test all of the widgets and templates, providing feedback via Azure DevOps.

  1. build

  1. build

Once our work passed UAT, we worked with the content team to design content pages, build them in the back end and get approval for them before launch. I also added value here with UX writing suggestions, creating content icons, and adjusting images to create more aesthetic pages.

Michael Aiyothrace © 2024