Budo Brothers: How I helped to combine an educational and physical product experience into one.

Stefan De Las
8 min readOct 30, 2020
Budo Brothers Martial Arts Ecommerce

As I sent over my last files to the Budo Brothers team, my part of the project was over. For them, it now meant that they would take it all and run with it. But I couldn’t help but ask — what more could I have done? Were they truly satisfied?

I had a hand on almost every aspect of their e-commerce platform, their simplified visual language and even their typeface choice and copy. The true test would actually come when they re-launched their store and platform for their adoring public.

A fresh challenge

I was brought on-board to redesign the way their customers interacted with both their physical and digital products, and create consistency in their layout, user flow and brand.

They originally reached out to me in May 2020 to help them work on two separate layouts and structures for two major platforms — their physical product store and their digital seminar platform.

Both products were built on different platforms, leaving customers feeling disjointed between two types of products by this one company. Their data was fragmented, their brand seemed scattered and the overall experience for clients was satisfactory but nothing to get delighted about.

However, as I dug into the figures, started asking the founders more questions, and saw how customers actually interacted with their platforms. I began to understand why their business ambitions didn’t align with how they were recently operating.

Pitching a new approach

It quickly became apparent to us (the founders and I) that there could be a better way to combine the two major revenue-generating sides of their business.

A new approach

With a new understanding of where we wanted to go, I had to start understanding the types of customers that contributed to Budo’s target markets. Discovering how customers used and viewed Budo was just as important as understanding how the business worked on the inside. This included things like technology, fulfilment process, customer retention policies and refunds.

Conducting interviews with Budo Clients along with in-depth sessions with the founders, I was able to understand the internal and external perspectives of the overall experience and what the ideal experience for both business and customers were.

Conversations with Erik, Budo Brothers Co-founder.

Discovering the “Why”

Not only was I focused on interviewing but also benchmarking other e-commerce websites that were direct or indirect customers with the Martial Arts industry. One thing I immediately discovered was the lack of direct martial arts e-commerce companies in the western hemisphere.

What I also discovered was that e-commerce companies focused on physical products OR digital products — rarely ever both.

Brands and Businesses in either Digital Education or Physical Product Space.

Auditing Budo Brothers previous site, a few things also became evident:

  • Users were unable to move from digital store to physical store easily without clicking the back button multiple times.
  • The Budo brand was purely used via their social media accounts, while their website failed to highlight the overarching brand and collaboration.
  • Users felt that their navigation and the layout of the previous website was not easy, especially when it came to diving deeper into the physical product store.
  • Important information was not relevant for each product, which included shipping and returns policies, item or product care, or proper descriptions.

Budo Brothers was definitely different. But there was a lack of fluidity between their digital education and their physical product side of the business.

Designing a fresh experience

Creating the experience that makes every touchpoint effortless is, well, challenging. But do it while combining two completely different types of products? It was a new experience for me.

I had to take the time to consume what they wanted to do and how the multiple moving pieces of their business fit into the overall goal and to ask myself these key questions:

  • How might we create better trust of the product, and by extension, the company during the purchasing experience?
  • How might we design a way to enable and encourage the customer to purchase both types of products?
  • How might we draw awareness to the digital product side of the business without being intrusive during the buyer’s journey?
  • How might we enhance the brand aesthetic while showcasing the quality of the product?
  • How might we combine all aspects of their business into the platform without distracting from the main business goal?

One way I decided to start was mindmap the possible layout and options available in their business, along with the connections that customers would find themselves making.

Mindmapping Budo’s Business and Experience.

Taking the research gathered the understanding from mind-mapping, I created a layout that worked for both their business and their customers that made navigating the website more focused and stress-free.

Conducting a review of their old site, I was able to compare the old way to navigate (which included jumping between two vastly different sites with different feels) to a new architecture I put forward.

Old Ecommerce Information Architecture
New Ecommerce Information Architecture

While the pages seemed more intensive, it allowed better labelling and searchability, enabling recognition over recall in this instance. It also combined both websites into one, which made the experience seem wholesome.

The layout also helped to test and iterate on the purchase flow for customers who came on site.

Final User Flow.

A Visual Way to Communicate

Budo Brothers has always leveraged user-generated content and their community to drive sales and their ideas. They appealed to devoted martial artists and novice enthusiasts alike.

But to each, Budo’s “one-of-you” approach needed to be consistent, yet re-defined. They had no consistent design language. And for a team of two who needed something easy and sans code, it was easier to create simplistic elements that would give them direction while they continued to create.

With no previous design language or brand guideline, I used a simple canvas, pulled from their previous website, while adding in a touch of “gold” to appeal to the sense of passion, magic and love they have in making original products for their community.

This also included a typeface (I’m not a typography designer) that I realized could be used across all platforms, documents and technologies — one that also wasn’t overused.

Typeface Options for Budo Visuals and Site.
Simplified Design & Brand Guide.

Setting Up for Future Growth

Budo Brothers was originally a very small and niched e-commerce enterprise. It was necessary to design around the constraints of operating a fully-immersive e-commerce store with a team of 2.

This meant that ground-up development wasn’t necessary. The founders wanted to build on a platform that allowed them the functionality to move fast, be more efficient, and not break things. They chose Shopify to help them do it.

This meant that I had to focus my design layouts on the capabilities and constraints of their select Shopify theme. My designs had to be easily transferable and understandable for the founding team to implement or execute as they put it together. While some take these constraints as a negative, I saw it as an opportunity to give some structure to my ideas, keep focused on the details in the design and an eye on the big picture of their business and ambitions.‍

Low-Fid Wireframe Options for Homepage & Product Page
Hi-Fidelity Mock Up

Smooth, efficient and happy

The founders and their customers lent great insight into aiding in the layout design and architecture of the site. Their comments on how best to find out about the brand and to navigate between education and goods made my thinking clearer on designing a layout that touched all avenues of their business — from goods to education, from collaborations and partnerships to their prized youth fund.

Since their relaunch, they’ve been able to get right back on track, even surpassing their current sales rate.

I look forward to seeing their continued brand development and success as one of the few pure e-commerce companies in Calgary, Alberta.

Final Budo Brothers E-commerce Platform.

Lessons Learned

The customers played a big role, and the founders were very involved in every aspect of the redesign.

Their insight, accumulated over the past 3 years, was valuable. Yet, due to COVID, their customer demographic would have slightly changed — the lifestyle choices, spending habits and cash on hand for these types of purchases. I would have leveled the playing field in my design, balancing more between founder and user, as I believe I slightly adhered to the founders’ vision more than a dominant focus on the user. With the user, I believe it could have further enhanced their business decisions moving forward.

Another key realization about this project was understanding the additional dynamic of founders who were heavily invested in all aspects of the design. There was a lot of give and take, including pressing the pause button because some information or elements were not provided upfront (or were being worked on to be provided at a later date).

This meant that delays were present, which extended the project by about 2 weeks. Managing these hiccups and expectations and understanding the level of influence from the business is important. It’s not a good idea to think that they hired you and they should expect you to take the reins.

--

--

Stefan De Las

Product designer tackling healthcare data problems in the US. Written for Medium publications like The Startup, UX Collective and Better Marketing.