top of page
PROJECT NAME
Knix, Site Redesign
✅ UI Design
✅ Design System Creation
📈 Increased page creation speed
Company: Knix
Role: Senior Digital Product Design Lead
THE PROBLEM
Our site being a Shopify template, was starting to feel dated and no longer was representing the product and elevated imagery in the best light. The goal was to re-design the site with a component first approach to create a library of sections that could be applied to any page.
MY ROLE
As Senior Digital Product Designer, I tasked with contributing to the end-to-end usage of the components in terms of what component styling, how multi functional they could be for across the site and Design System development to reflect the changes.
THE IMPACT
Once the newly designed components were in place, it took half the time to create new pages, allowing the merchandising team to work more efficiently.
MY PROCESS
DISCOVERY
DEFINING THE PROBLEMS
AREAS OF FRICTION
1. The original site lacked a strong mega menu, with users not being able to see the product assortment list without clicking into the Shop dropdown. This not only reduced visibility to our core products, but also was not easily accessible.
2. The quick links to categories didn’t highlight the actual product, requiring a user to take their chances on the product lists once they’ve clicked into a category.
3. There were no shop paths provided besides direct to PDP product cards that only could show 3 at a time, which required a lot of maintenance as SKUs sold through.
REQUIREMENTS GATHERING
STAKEHOLDER REQUESTS
-
CPO asked that the website be refreshed to make it feel current
-
The merchandising team needed a tool to act as template for cross category product pages (not just the homepage but also Campaign Landing Pages, Product Pages, Static Pages) for each of page building
-
The solution needed to be components that could be used interchangeably through the site to maximize ROI with development efforts
-
Data Analytics team needed the solution to have sections with unique IDs for easy testing and data gathering
COMPONENT LIBRARY UI
DESIGN STRATEGY
Going into this project, we knew that a component library would be necessary in order to track all possible component layout variations the merchandising team to use across all categories. So ensuring image orientation, sections that require a CTA, informational elements, widgets for video and product card carousels were accounted for on both desktop and mobile.
RESULTS
CONCLUSION & LIFT
The original website not only felt dated, but also was not highlighting our impressive photography and vibrant product colours in the best light. Re-designing allowed for me to take into consideration the types of assets we frequented regularly - large scale images, value prop messaging, inspirational copy and content blocks for blog articles and company pages.
Taking on this project solved a series of problems:
1. Creating a component library accessible to the merch team from Contentful meant they no longer needed dev support in page building and customization. This allowed valuable resources to be re-allocated to higher priority projects
2. Because the component library was static, more consistency in the site layout was achieved, managing expectations of the user and providing a more cohesive experience
3. All aspects of the components were made applicable to not just the Knix website, but also the KT brand, Resource Centre and Blog, meaning the entire organization was streamlined to page sections that felt related
Result: Reduced page building time.
bottom of page