This browser is not supported for this site. You can still view the site but there will not be any CSS styles.
Case Study

Shoes For Crews

A leader in slip resistant footwear needed a website overhaul to support multiple brands and a cohesive desktop to mobile experience.

2016
Role
  • Skills
  • Web Design
  • Frontend Dev
  • E-commerce

Shoes For Crews, a leader in slip resistant footwear for the service, healthcare, and manufacturing industries was in the midst of redesigning their brand and repositioning their website. As a member of the team at Sparkbox, a web agency, I helped Shoes For Crews design and build a new website that incorporated multiple sub-brands and a mobile friendly approach.

Challenges

The goal of the project was to redesign and build a website that used the new Shoes For Crews brand along with custom themed sub-brands—all in a few months. No small task for a large website with hundreds of products.

Existing Site

The existing site was not responsive and used an outdated brand design. To better serve customers, the new site needed to work just as well on mobile devices as desktop. It also needed to account for the many different brands of shoes being sold on the same site.

The existing Shoes For Crews website before the project started.

Mozo Sub-Brand Design

With the help of Sparkbox’s Creative Director, Jeremy, I designed the website using Mozo, one of the sub-brands, as the foundation. This was done to allow time for another agency to redesign the Shoes for Crews brand while development started on the new site.

Mozo’s brand character was bold and edgy when compared to the corporate feel of Shoes For Crews. To support both brands living on the same site, we intentionally designed each page as a template which could support unique brand experiences through the use of different fonts, colors, and image styles. This ensured that each brand would have a consistent layout, making it easier for customers to navigate since individual UI elements would be in the same location across brands.

Design Explorations

I started designing the product page first due to its importance and overall complexity. This provided the perfect opportunity to test various color, typography, and layout concepts. Although I was designing with the Mozo brand, I kept in mind that the layout and structure would eventually be used for the main Shoes For Crews brand so I made sure elements were flexible and allowed for easy customization.

Early design iterations of the product area for Mozo shoes.

The marketing team at Shoes For Crews was eager to include more storytelling elements in the website so we incorporated content blocks for highlighting features of each shoe in a way that was flexible yet rigid enough to not distract from the experience. It was important to balance storytelling with the need for a fast and responsive experience.

We used Sketch symbols to manage variations and states of buttons, form fields, and other common elements. This made it easier for developers to see all of the variations of components at a glance and translated well to the pattern library we ended up building alongside the site.

Mozo listing page.

Shoes For Crews Design

As we wrapped up work on the Mozo brand, the Shoes For Crews redesign effort had finished and we were able to take the new brand and use it to design the new site. The Shoes For Crews product page retained the same layout as Mozo but has a very different look and feel thanks to color and typography changes.

Homepage

The homepage serves as an example of how we balanced the storytelling features requested by the Shoes For Crews marketing team with the need for a fast, easy to navigate website. It incorporates category links and large product images with feature callouts.

Since the existing site was not responsive, the mobile experience of the website proved to be a huge value add which helped capture many new customers. It was important that the mobile experience be just as easy to navigate as the desktop.

Development

Once we had a design direction for the new site, it was time to start building. I helped the Sparkbox team build the frontend of the new site. By being able to jump in and prototype complex pieces of the design in CodePen we were able to quickly validate ideas before building components in production code.

I was also able to contribute my knowledge of HTML and CSS best practices, accessibility, and animation to help build the best website possible for Shoes For Crews. Thanks to the great work of everyone on the team, we were able to launch a comprehensive Shoes For Crews website with multi-brand support that was responsive, fast, and easy to navigate.