tdr.io

Summary

Bespoke Post lacked visual consistency, information hierarchy, and a cohesive design system which meant users had trouble completing simple tasks and increased cognitive load. To top it off our internal design/dev process was unpredictable and slow.

I fixed this by designing a modular system that would extend across the entire site.

Introduction

Bespoke Post is a men’s lifestyle subscription and ecommerce company started in 2012. I became the 16th employee at Bespoke Post in July 2015. At the time we were in a phase of considerable growth and were transitioning from a scrappy startup to a more mature, mid-sized company. It was an exciting time to be at the company because there was so much to improve across the site which affected our users and revenue, but also the internal team process as well. I was also the first dedicated product designer on the team.

The first few projects I worked on were small new features to the box page and I immediately noticed significant issues with both our UI and the the interface design process.

The Problem

  1. Bespoke Post lacked visual interface consistency which meant users had trouble completing simple tasks and got lost when navigating through the site.
  2. Bespoke Post lacked consistent information hierarchy throughout the site which led to increased cognitive load.
  3. Bespoke Post used a page page driven design methodology rather than system driven which meant the internal design and development process was erratic and slow.
  4. It was difficult to solve usability problems because so much of the process was dedicated to visual design so projects often neglected research or proper solution validation.
I set out to solve the issue by talking with existing users, team members and doing a comprehensive site audit. After I completed the problem discovery phase, I proposed that Bespoke Post should rebuild the site using a modular design system. Initially, it was a challenge to get stakeholder buy-in that we actually needed to do this. The sheer size of the project was daunting and the initial time/resource investment would take time to pay off.

The Solution

We would design a modular system that could extend across the entire site (subscription, ecommerce, and a digital publication).

My Role

Customer Insights & Ideation: I partnered with an analytics researcher and a lead brand designer to uncover insights and translate concepts into features that addressed user pain points.

Experience Strategy: I compiled design principles, frameworks and content strategy that communicated our goals. This helped to translate our ideas to the executive team and key stakeholders, align the development and design team, and drive decision making.

Planning & Scope Definition: I defined the product with my creative director. I translated customer goals and balanced business goals. I prioritised and negotiated features for both the initial launch and long term scope.

Design Execution & Validation: I redesigned the navigation, individual box page, store index page, collection listing page, product detail page, checkout, account, onboarding, cart/club shipment, search, and various other pages like careers, about us, etc. I executed wireframes, prototypes and design specs for all these various projects.

Branding and Visual Design: As part of the redesign we wanted to revamp the Bespoke Post brand. I chose new typography, explored visual styles, and defined our new colors.

The Process

Bespoke does a considerable amount of it’s yearly revenue during the winter holiday months, which meant we needed to complete the redesign of our core pages by October, with additional features coming thereafter. This meant we had to work back from our launch date and prioritize our time accordingly.

We started with the basics like defining our grid, breakpoints, baseline and ratio keylines. And then dug into the details like typography, colors, and buttons. Once we had the core building blocks of our interface we started building specific components based on individual features we needed.

One of the most difficult aspects of the project was to stay grounded in specific user flows, while also thinking about the broad implications we’d likely incur later on the project.

I tried to mitigate this issue by focusing on the core user pain points first and then cascading the components downward to less influential features. It was challenging to simultaneously redesign core features and pages while also creating modular components that would need to extend across the entire site.

In Conclusion

We deployed the intial redesign of Besopke Post a few months after the whole project started. And then quickly worked to get the rest of the site on the style guide. We then worked back and redesigned individual features based on user feedback and research. All in all, nearly every key metric improved since moving to the modular system. Conversion rates in both the The Club and Store increased. Time on site increased (especially on The Post). And the other problem we addressed was internal process. This may have been the most influential piece of the project because it affected every other project we worked on after. We were now able to rapidly test ideas and prototypes, build new features without unnecessary visual design, and design/dev workflow had dramatically improved.

You can see our in-house component framework on Github

And check out bespokepost.com to see it all live