Thrive Workwear

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
thrive homepage on iPhone screen

Role

UI/UX, Design System Branding, Project Management

Team

1 Designer, 1 Developer

Tools

Figma, Webflow, Shopify

Year

2020

1.

Understanding the Problem

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.

Stakeholder Pain Points

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

2.

Strategic Solutions

With useful insights from both team and customers, my defined version one action plan was:

Provide Clarity From the Start

Solution: Showcase the products, the lifestyle, and reviews from the homepage so customers quickly know Thrive's offerings and quality

Remove Product Confusion

Solution: Make it clear what products have knee pads built-in throughout all parts of the buying process

Allow for Product Scaleability

Solution: Solidify a design system that's clean, simple, and easy to use for site editors

3.

Building the Framework

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.

Thrive website flow

Wireframe Breakdown

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.

Thrive wireframe
4.

Ideation & Design

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.

The Hompage

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.

Adding Interactions

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 Interactions

Clear Product Variances

The 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.

5.

Developing the Experience

My Contribution

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.

Partnered 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.

6.

Client Testimonial

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

Up arrow