Designing Bonfire
Two weeks ago we launched Bonfire, a social commerce platform that allows anyone to design and sell t-shirts. The feedback was overwhelming — someone submitted us to ProductHunt, and we ended up being featured on their homepage, along with making the weekly newsletter.
I wanted to share our story behind creating the new brand, as well as some details about how we design and build products. 🚀
Who we are and who we want to be
We started by analyzing the existing design systems in place. The existing Bonfire Funds website was nice, but severely outdated and did not fully reflect the values of our company. Social commerce is a competitive market, so we knew we needed a complete overhaul. The existing site was written in PHP and was not sustainable enough to accommodate a growing list of features, so our engineering team wrote the new Bonfire app from scratch in AngularJS.
Meanwhile, the brand team started researching brands that we admired. We were particularly interested in the ones that disrupted their industry in a socially conscious way, such as Patagonia, Warby Parker and Airbnb. We spent several months putting together user stories and empathy maps to fully understand what our company stands for.
These six primary colors were chosen to represent all aspects of the new Bonfire, including transparency, confidence and a sense of belonging.
The core strength of our company is that we are approachable. The Bonfire customer happiness team consists of awesome people that truly care about our customers. Our goal is that anyone can design and sell a shirt, no matter how many complicated things need to happen to actually get a final product delivered. The internal mantra of Bonfire is that “t-shirts are easy” (spoiler alert: they’re not).
The new symbol
The new look and feel is represented by our symbol that represents the three core pillars of Bonfire: product, empathy and culture. The rest of the company named it the Bonflower, and the name really stuck, so we decided to go with it. The symbol is used throughout the app and brand materials, including loading indicators and patterns.
Typeface
We chose Soleil by TypeTogether as the primary typeface for all Bonfire communication. This friendly, modernist typeface has lots of personality and works well on both digital and print media. Soleil is based on the ideas of clarity and reduction to essential forms, combining simplicity with fluid rhythm. The best part — it looks equally great and is easy to read in any size, from 12pt all the way up to 96pt.
Web
After the brand direction was solidified, it was time to tackle the new website. Most of our traffic comes from mobile devices, so we really wanted to make sure we got mobile right. The new site is designed and developed mobile-first, accessible from any device.
A new single-stroke icon system was designed and built with SVGs to be used throughout the new site and app.
We use subtle background textures here and there to add a warm, human touch to the icons. Paint strokes combined with a shirt screen texture represent the process of screen printing a shirt, the core idea behind Bonfire.
Inclusive design
One of the key constraints of designing the new Bonfire was usability and inclusive design. We decided to take the approach of designing for the lowest common denominator — someone who might not be tech-savvy. Our goal was to make sure that our customers can easily design a shirt they’re proud of and be delighted while doing it.
One of the things we paid a lot of attention to was empty states. The majority of users don’t have much data to work with during their first run of the app. We used a combination of illustrations and placeholder images to make the app more approachable.
Creating a system
One of the things I’ve learned over the past six months is that you can’t just sit down and design a system for your product. What works for me is to start by designing screens without worrying too much about them all fitting together. After several screens are done, it’s a good idea to do an initial attempt at sorting all the components and discarding the junk. As a result, you get an initial system draft with a few reusable components.
Repeat the process again, and in a couple of months you have a legitimate component system that allows you to create new pages with ease while maintaining lean code and cohesiveness across the board.
I use two master Sketch files — one for the dashboard interface and another one for the public-facing pages, such as the homepage and individual campaign pages. Being the only product designer on a team has its perks — the best one is that no one else is allowed to touch these files.
As the team grows, the plan for the near future is to have a single master file with each designer being able to duplicate it, make necessary changes, and submit it back for merge request. A personal pipe dream of mine is to have a git-like system for Sketch, with proper branches and merging (Bohemian, I believe in you guys 😘)
Handoff (or lack of thereof)
Collaborating with remote developers can be challenging yet often rewarding. Our dev team is based in Europe — so by the time the Richmond product team finishes their first cup of coffee, it’s almost 4 o’clock there. That’s why we try to dedicate our mornings to communicating with dev and focus on everything else in the afternoon.
A combination of Principle, Zeplin and Invision proved to be effective during the handoff process. Principle is very useful to describe communication and motion between different screens, along with animating simple transitions. When it comes to designing micro-interactions or SVG animation, I usually use Codepen, since in some cases it’s much easier to write code rather than try to emulate it in prototyping software. Our developers love Zeplin, since it gives them all the necessary dimensions. Sometimes not all of them are precise though, so it’s always a good idea to double-check everything and specify some measurements manually.
The number one thing that I learned while collaborating with remote developers is that it’s important to design and prototype every single little detail along with every little micro-interaction. It’s not enough to pass over all the assets + spec and call it a day. What works for me is chatting with the front end dev team every other day or so to work through questions as they arise.
Iteration
Constant iteration is a big part of our design process. Thanks to modern tools like Hotjar, you can see how real users are interacting with your site. Our product team allocates at least 10% of the time each week to watch and analyze recordings and heatmaps. We use Intercom to guide people and provide support. The GV Design Sprint process also proved itself to be very useful when gathering feedback from real people.
Sometimes the obvious solution is the best one.
What’s next?
Even though we launched a new site, it only scratches the surface of what still needs to be done. We want to focus on what we do best — and do it right.
The whole field of digital product design is rather new. The good thing is that you can always measure what’s working, and what is not. I find it best to never get too attached to your design — it will probably get redone in a year anyway.
Keep it real y’all. Right now is the best time to be in this industry 🎈
