How Notebook Maker Baron Fig Transformed Its Workflow to Improve UX for a Shifting Customer Base
Illustration: Justin Cheong.
Baron Fig produces beautiful notebooks, pens, and other accessories for creatives (see our previous coverage). Recently however, they noticed that their products, initially designed for individual customers, were being purchased more and more in large quantities by companies.
“Teams were equipping themselves with the full lineup of our products — pens, notebooks, pads, sticky notes,” explains CEO and co-founder Joey Cofone. “Eventually it became clear that we needed to formalize this offering and make it easier for people to discover. We took a look at our data, discussed the idea internally, and landed on ‘Baron Fig for Business’.”
The mobile and desktop versions of the new Baron Fig for Business page.
Transitioning to a new UX workflow
From conception to publishing, Baron Fig for Business took just two weeks, and Joey designed the first version within a few hours. It’s Baron Fig’s first project completely done from scratch in Adobe XD. Until recently, the team still designed web pages in InDesign.
“We used to do an absolutely terrible job of prototyping for desktop and mobile,” Joey admits. “For those that are familiar with InDesign, you can probably imagine a ton of ‘pages’ with massive height measurements. To make it even worse, our mobile versions just sat in the middle of all that white space. If you don’t know what I’m talking about, you’re better off!”
Now Baron Fig uses XD’s pre-programmed desktop and mobile sizes to design pages more accurately. Clickable prototypes and pages that can be previewed as if they were on a website saved a lot of time and made a major difference to the workflow.
“I keep our entire project in a single file, including desktop and mobile pages,” Joey explains. “Symbols allow me to adjust a recurring item without having to edit it individually (navigation, for example). I can push the project to a live link for our developer to work from, and exporting assets went from a serious undertaking to a five-minute job.”
Behind-the-scenes prototyping in action in Adobe XD.
Creating a design system lite
The team now works exclusively in XD and also uses it for a stripped down design system, so they can keep track of the entire Baron Fig for Business experience.
“Design and development are both systems-based practices,” Joey points out. “Good design involves using a limited number of elements — such as two typefaces and a simple color palette — to deliver a strong message. We have everything we need for the complete Baron Fig for Business experience in a single design file: design, copy, assets, colors, typefaces. It’s all ready to go as we need it, rather than having to stop and engage in another process.”
This also helps refining and reiterating on designs. A/B testing plays a massive role in figuring out what works and what doesn’t, and the team always has several tests going on at any given time. Sometimes they’re for small things, such as the efficiency of a button, sometimes they’re for entire pages. A ‘master’ series of pages represent the live version, which is known as the ‘control’ in testing. Then versions of the control are being designed by quickly duplicating a page on the artboard, riffing on it, and sharing it to the live link for development.
A very simple hand drawn sketch of the Baron Fig for Business experience.
Refining the user experience
The main challenges in building the new Baron Fig for Business weren’t technical, though. They were focused on the user experience, specifically helping users easily understand the three offerings: Supply refers to bulk for teams, Branded stands for customized goods for small and medium businesses, and Tailored is products made from scratch for corporations.
“Sounds complicated, right?” Joey laughs. “Our goal is to help users quickly understand which category they fall in and get in touch with us. Achieving this goal — and overcoming the challenges that ensue — requires a lot of trial and error.”
Baron Fig for Business is still in the early stages and has already noticeably increased customer inquiries. Every bit of the UX is constantly being refined and the functionality being expanded.
“By the time you read this, the Baron Fig for Business portal will likely be on its third iteration in as many months,” Joey concludes. “If you visit the site every few weeks, you’ll be able to track our progress in real time.”
For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.