Baronfig’s new website: A thinker’s journey
Baronfig makes tools for thinkers. The company started on Kickstarter in 2013 with just one notebook, and now has a product line of more than 30 different tools. When we launched the company with the Confidant, our very first product, we realized that we had to build an entire website around a single product. We created a narrative around the book to give the product gravity and make it feel substantial. As our product lines grew, we noticed more and more people didn’t know what product was right for them. Every product was being presented equally. That’s when it dawned on us: there was no hierarchy.
We needed to reinvent our site and user experience and turn it into something that would help customers better understand our products. The new site would need to have the ability to scale with new products while continuing to do justice to our existing ones. And, of course, the design had to meet our high standards. In short, it was a massive undertaking.
Our aim with the new site was to follow the same principles we use to design our products: simplicity, usefulness, and community. Ultimately, the design had to make sense to our customers, who are design-minded themselves. When they came to the site, we had to make sure they could find what they needed in a single click. Once we had our vision, we needed to apply design thinking to every part of the process — here’s how we did it.
A designer’s point of view
Selling a simple, physical product online is a tremendous challenge. Since customers can’t pick it up and try it out, we must present it to them in a way that makes them feel it. With our notebooks, for example, we use photos that feature and zoom in on the textures of the cloth, the bookmark, and the paper, and we show it in use and next to things that give it scale, like a laptop, a phone, or a pair of hands.
To determine how to present this in the best way, we started the redesign by studying over a dozen ecommerce sites that we admire. We scrutinized every page, sketching out each one, re-wireframing the entire site, and taking a load of notes. We had notebooks full of scribbles and diagrams. The sketches are illegible — they look more like hieroglyphs to everyone else — but those doodles set forth the initial framework.
From hand-drawn sketches, our team used Adobe XD to create interactive prototypes of our future site, and the development rapidly took off. XD is efficient in terms of CPU usage and the number of elements it can manage. I can repeatedly duplicate art boards and iterate, and that has completely changed the design process, giving us the ability to connect all the art boards into a functioning prototype (whereas, with previous tools, there was no way to explore the relationship between our pages). With XD, the entire website is created in one file. It has become second nature to jump around inside the program, utilizing our entire palette, taking texts and images from one page and adding them to another. It’s amazing how something this simple could revolutionize our workflow.
After much playing around, ideating, and experimenting, we decided to structure our site around three categories — tools, workspace, and travel — with each one of these category pages featuring one product at the top. The other 27 items are sub-products or accessories that fall under the featured product. We managed to create a clear hierarchy, and this has made all the difference.
One tool that brings us together
XD offers many tools that make prototypes clickable and explorable — even for people who don’t use it every day. Before XD, any time we wanted to show off a design I was working on, it had to either be exported as a static PDF or sit down and walk the audience through it. But now anyone — even non-designers — can explore our site prototypes, provide comments, and see how the interface is really meant to work. When more people have easy access to the project and can interact with it, the quality of the product significantly improves.
For example, we as a team decided that an indication of success would be if no one noticed the design changes, but orders increased. To make this happen, we didn’t change much on the homepage and left certain elements, above the fold, identical to the previous site, because we didn’t want our customers to be shocked or disoriented by a new experience. We kept the most common entry point similar and then slowly evolved the interior of the site over time. This approach came about because we were thinking about the design, the business, and the experience as one — the Baronfig brand.
Design thinking that stays true to our mission
Baronfig is a design-led company, and we don’t have any outside investors (despite the continuous email requests for us to open our doors to capital). We’re focused more on the quality of our brand — how to make it look beautiful and communicate our message — than we are on revenue and profit. We’re able to take things much further by looking at the small details, elevating them, and having the skills to accurately present them to our customers.
We followed this same approach for our redesign, and the success is reflected in our sales. Our products are now selling at a higher pace than they were before, even despite the pandemic. But what’s more, we have built a brand that is not defined by our products, but by our mission to create tools for thinkers. We believe that well-designed products help people be more productive and do their best thinking.
It took incredible effort from every member of the phenomenal Baronfig team to bring the new site to fruition: versatile software, solid design, clear programming, efficient production, fantastic writing, and so much more. I am proud to say our new site is another successful step towards refining our mission.
To learn more about Baronfig, read how the company designed its mobile app and its Baronfig for Business site.