Thrive Workwear is deeply-rooted in work pant research and innovation, crafting products that solve real-life problems in the field. Thrive reached out to me to solve their business needs and create a design system that would allow the team to do in-house content creation.
Visit Website
UI/UX, Design System Branding, Project Management
1 Designer, 1 Developer
Figma, Webflow, Shopify
2020
Throughout the years, Thrive had many redesigns but the team never felt 100% about the end product. Previous redesigns over emphasized Thrive's story and the visual representation of the knee pad pant, reducing the products shown on the homepage.
As first glance, customers couldn’t easily identify the products sold, resulting in a higher bounce rate compared to the previous design
Padded pant variations were not easily identifiable causing customers to place incorrect orders
Inconsistent branding throughout the website and social media platforms was leading to poor brand perception
CMS components were not editable causing the team to skip changes altogether or pay unnecessary expenses
With useful insights from both team and customers, my defined version one action plan was:
Solution: Showcase the products, the lifestyle, and reviews from the homepage so customers quickly know Thrive's offerings and quality
Solution: Make it clear what products have knee pads built-in throughout all parts of the buying process
Solution: Solidify a design system that's clean, simple, and easy to use for site editors
I started by building a sitemap to show the possible routes a customer may take. Though small Eccomerce stores are pretty straight-forward, the sitemap helped me guide the Thrive team in understanding the importance of providing the best experience possible in the most impactful areas. We agreed to focus on three main pages for the first iteration.
.jpg)
Because the homepage was the largest overhaul, I created a wireframe to define each homepage section and the impact it would provide to a customer. Taking this approach helped me translate my thoughts to the Thrive team and let them know what copy, image, and video assets would be needed.
.png)
Now having a strategic framework, I pulled together a list of competitors and comparative websites. Using these as inspiration, I created three style tiles based on what Thrive described they were after.
.png)
Using the approved wireframe and style tile, I designed each section component using a 8pt grid. Using this framework made it easier to create consistent components and aided more efficient development.
.jpg)
During the inspiration phase, I came across a few interaction examples. Simple interactions add interest to a page and can value to areas that you would like to emphasize.
View InteractionsThe most important problem Thrive wanted to solve, was the confusion customers were having when trying to distinguish between products that have knee pads and ones that do not. My goal was to provide a clear distinction between the Pro (padded) and Core (non-padded) pants.
I decided to create a knee pad icon for padded pants. In doing so, customers could easily scroll through any collection and know which offered a padded option. On collection blocks, such as the the mega menu and homepage feature, I used subtext to identify the options. This way, a customer would know what products they would be viewing as they moved forward in the purchasing process.
On this project, I was able to convert most of the design into an existing Shopify template. This helped me save time and money for the Thrive team and gave them extra workable sections that were not originally designed. I gained a lot of experience using Liquid, as each template in Shopify is built upon this structure. Every section component was editable so the team could modify it as needed and wouldn't need to pay extra costs for development.
Some modifications, including the dynamic padded pants, Instagram feed, and scroll interaction were done by a previous coworker. We did a paired programming session as I knew the design/business goals and my way around the templates.
I’ve worked with many designers, website developers and marketing professionals throughout my career. I can say with extreme confidence that Chris is truly the best in the business. His creativity is unique along with a pin-point skillset in executing the tasks to completion and satisfaction. Working with Chris is always a very pleasant & professional experience. After losing touch with Chris for a couple of years, I immediately searched him out, re-connected and gave him an assignment that I knew only he could help my company with. The project is completed and as predicted, was executed according to the scope of work and expectations.
Dale Pelletier- CEO, Thrive Workwear
