Wild Sage Paper Co.
In the age of social media and digital literacy, one might be surprised to find out that stationery supply stores are doing just fine. However, new fountain pen and stationery enthusiasts are shopping online more frequently to acquire their tools. Can we help a small stationery business stand out from the crowd with clear information architecture and the features users need?
Tools Used: Adobe Suite, Figma, Miro
Role: UX designer (solo project)
Timeline: 2 Week Sprint
A Conceptual Store For A New Way To Shop
Fountain pens are hot right now.
Not something you expected me to say? Several years ago, I worked at an art supply store, and the owner graciously gifted the staff with a fountain pen of their choice just before the holiday season: “None of you kids use fountain pens, and how can you sell them to people if you don’t even understand them?” He asked us. He was right, and I surprised myself by converting from a fountain pen noob to an enthusiast overnight.
Turns out, I’m not alone. In 2021, UK Fountain Pens, a prominent fountain pen blog, ran a survey with their users, and found that a majority of the 1,240 respondents had only recently become interested in fountain pens - citing 1-3 years of being “into” fountain pens. The age of the group? Younger than you might think: over half of respondents were under the age of 40, with the second-highest demographic age being 21-30. However, millenials and gen-z fountain pen enthusiasts expect a seamless digital shopping experience, which they can’t always find in current stationery store websites. (See below!) So, how can we help new fountain pen enthusiasts shop more knowledgably and intuitively online?
Process
Research
I had hands-on experience of researching and purchasing stationery supplies, but how did others feel about the stationery e-commerce experience? What are buyers’ expectations and motivations?
Synthesize
Taking all the research into account, what features and information architecture make sense for users who might want an educational, seamless shopping experience?
Design
Testing with low and then medium fidelity prototypes helps us build a better e-commerce experience that bridges the gap between physical and digital shopping experiences.
It’s 2022 - do stationery stores even matter anymore?
Well, yeah! When shopping for luxury writing supplies like well-made pens and paper, many people like to see and touch them in stores. Recent trends on social media like, “dark academia” and “cottagecore” have created a renewed interest in activities like journaling and letter writing with a younger demographic. Using nice stationery and a quality pen help users connect to their chosen aesthetic, and UK Fountain Pen’s survey, while rudimentary, shows that many young people are following trends in luxury stationery closely.
After a decrease in purchasing stationery supplies for offices and schools because of covid-19 distancing, buying trends have leveled out, and have remained consistent since late 2020. In an industry shadowed by the ubiquity of digital products, this is an indication that writing “by hand” isn’t going anywhere fast.
In addition, the industry is fragmented, and so customers can shop at many different places or locations for their stationery needs, and if customers feel a sense of trust and loyalty with a specific brand or store it could be hugely helpful for a small business.
Research
Yes, the stationery industry has been on a decline, but in the last two years, sales have leveled off - maybe an opportunity for the future?
Competitive Studies
So if stationery stores do matter, what do customers expect from the online shopping experience? While looking at competitive websites, I realized most stores fell into or between two major categories:
The Quirky Artist Website
Several small stationary stores websites had brightly colored websites full of interesting household items, as well as pens and notebooks. Many were difficult for users to navigate or find specific products, despite looking fun or engaging at first glance.
“Quirky Artist” storefronts accounted for 20-30% of the online experience.
The Minimalist Planner Website
On the other hand, most stationary storefronts online tried to be as simple as possible. Rather than the art-school crowd, these stores seemed to be directed towards writers, with more desk accessories and writing tools for sale.
“Minimalist Writer” storefronts accounted for 70-80% of the online experience.
Card Sort
I created and ran a card sort with ten participants, having them organize stationery supplies in whatever way felt most intuitive to them.
70% of participants grouped like items together by use or type, i.e scissors, notebooks, etc.
30% of participants grouped items into larger categories. Here, the two main groups were “color supplies” (pens, ink, etc.) and “paper supplies” (paper, notebooks, and office supplies.)
This was helpful to me as I moved forward into organizing the architecture of the website. I had already seen many stationery stores organize their items by use, so it made sense that a majority of participants would think to look for ballpoint pens with other ink instruments, notebooks with other paper products, and scissors or tape with other assorted office supplies. It also helped clear up how many categories I might want on a main navigation versus tucked into a secondary navigation - if most people knew where to look for “notebooks,” then having a bigger category in the main nav like, “paper goods” might help those who were unsure of where to begin looking.
Mochithings navigation bar is very simple: only three categories to choose from. Might be confusing for some users, however: what’s the difference between “organization” and “home office" for example?
Little Otsu, on the other hand, has more specific categories in their main navigation bar. What might work best, and in what scenario?
Synthesize
With Marci’s needs in mind and all of my earlier data, I knew that MOST participants expected to find stationery supplies grouped together by the product’s use. Also, MOST existing stationery store websites have a clean, horizontal interface that users are familiar and comfortable with. However, because I had seen several websites with larger category breakdown, and because 30% of my card sort participants made larger use categories, I wanted to see if I could split the difference and make a website interface that could be useful and intuitive (and not take too much clicking around) for stationery store enthusiasts as well as someone new to the hobby, like Marci.
My site map splits the difference: the main navigation is broken into several semi-specific categories that break down further in the secondary navigation. A user would potentially need to know they’re looking for pencils rather than a tool with ink before they start clicking through, but that’s as specific as they need to be to begin.
Low-Fidelity Prototype Testing
Main Nav: Users were able to understand the main navigation, explaining clearly and correctly where they would click to find specific items.
Secondary Nav: Users were frustrated by the small text size and tightness of the drop-down secondary menu. Many users told me it was difficult to tell which category they were clicking on.
Product Category Page: Once in the category page, users liked how big the item listings were, but remarked on a lack of further filtering options and no heading to the page. They could look to the breadcrumbs to remind themselves of where they were, but thought more wayfinding was appropriate. It was really helpful feedback for me as I moved into a medium fidelity prototype next.
Meet Marci Stevens, a 24-year-old who is interested in learning more about fountain pens and stationery products because she’s looking for more aesthetic, environmentally friendly ways to engage with her journaling and planning hobbies.
How can we help Marci feel comfortable in her knowledge of what sorts of stationery supplies she’s purchasing?
Design
Wild Sage’s homepage is free of distracting videos, with a static tiled hero section and simple primary navigation with four categories: Paper, Pencils, Ink, and Adhesives. A secondary horizontal navigation drops down when a single element of the primary navigation is clicked on to reveal more specific categories.
Once users navigate to the product category page, (left) they can filter further for the exact type of item they’re looking for (my filtering system is rudimentary now, that’ll be one of the things I work on in “Next Steps,” below.) They can clearly tell which items fall into which filters, and may be able to get a sense of what type of item they’re looking for. From there, each item has a clearly displayed review counter, which was one of the features requested to be more prominent during my low-fidelity testing. Users like Marci can then click through to the specific product page (right) with user reviews top and center, large pictures, and a detailed description of the product. For users like Marci who know what type of product they’re looking for but might be open to checking out related items, a tiled selection below the product description can be clicked on for further exploration. Users loved how clear the designs were, and how easy and intuitive they were to navigate.
Next Steps
Wild Sage Paper Co. was a conceptual attempt to better understand how e-commerce websites are structured and built, and I learned a lot from the experience. Instead of picking up where I left off, my next foray into e-commerce design will be choosing an existing website to build a new feature for that brand’s digital experience. Fully conceptual projects are a great way to start learning, but I’d like to challenge myself by working within a brand’s guidelines and restrictions, understanding what real-world users of websites need and want from existing e-commerce experiences. Stay tuned for that project, which I’m currently working on!