Wood Fountain Pens: Ecommerce

What makes fountain pens so special? Why do some people prefer them over other types of pens?

Overview

Project Brief

Wood Fountain Pens specializes in selling handmade fountain pens. Wood Founain Pens was founded in 2017 by two pen enthusiasts Brandon and Chris, whodecided to partner up and create a company that helps people in pursuit of finding the perfect fountain pen.

View Prototype

Project Info.

Roles:
Research, UX / UI Design,  IA, Visual Design

Tools Used:
Sketch, InVision, & Illustrator

Team:
Wood Fountain Pens

Timeline:
4 weeks - 20 hours per week

Objectives

Logo Design

Create a logo that combines wood, nature, and fountain pens

Visual Identity

Determine the overall look & direction of Wood Fountain Pen’s branding

Site UI Design

Design a site that allows users to browse and purchase fountain pens

Market Research

In order to understand a complicated industry with a deep-rooted history (some brands being well over 200 years old!), I gathered and analyzed existing trends, data, and insights around the fountain pen industry and Wood Fountain Pen’s competitors.

Key Takeaways

Provisional Personas

I developed a set of provisional personas based on my competitive analysis . These personas represent Wood Fountain Pen’s customer base, and also helped me consider customer needs, goals, and assumptions to test. 

User Research

Why are some people into fountain pens? Where do they buy their pens, and how do they decide on which pen they’re going to buy? In order to learn more about peoples’ shoppings habits and preferences, I conducted a Typeform survey along with 1:1 interviews with a total of 67 participants, all of whom were fountain pen enthusiasts. The pain points I discovered are as follows:

Lack of Details Can Make Choosing a Pen Tricky

Sometimes when shopping for foutain pens online, there might not be a lack detailed product photos, size comparisons, or info on product specs, which can make finding the right pen frustrating and time-consuming.

Bad Customer Support is Frustrating

Shopping for fountain pens can be expensive (some of the high-end pens are thousands of dollars)! Bad customer service & a lack of support leaves shoppers feeling unhappy, unvalued, and like they wasted their money.

User Persona

Once I had gained more insight into fountain pen users, and their frustrations regarding ordering online, I created a user persona; Victoria Clarke, whose frustrations and goals I would need to keep in mind later on in the process.

Mapping out the User’s Shopping Experience

With the research done and the users’ pain points understood, I decided to tackle how the site would be structured; and what sorts of decisions and choices users would need to make along the way when buying a pen through Wood Fountain Pen’s site.

Defining Form & Function

Once I had a bit of the app’s website mapped out, it was time to get a rough idea of how things would be laid out. I decided to start sketching and exploring all of the different ideas I had for some of the screens!

Mid-Fi Wireframes

Once I had a rough idea of the layout, it felt like a good time to start on wireframes to more accurately represent how the site would function. I created the site's essential pages, drawing from my user flows, sitemap, and research, in preparation for user testing. The desktop pages included: Home, Shop (Category Page), Product Detail, Checkout, Order Confirmation, and FAQ.

Visual Design

Along with figuring out layout and functionality of the site, it was equally important to determine the direction for the branding. 

Logo Exploration & Design

Since Wood Fountain Pens is a company that specializes in hand-made wooden pens, it was important to create a logo that connected the idea of nature and the wooden materials to fountain pens. I thought it would be neat to include leaves or tree-like elements, and combine that with the iconic shape of a nib. I tried a bunch of different ideas and in the end I settled on the logo shown below!

Style Tile

One of the things people mentioned during the survey and interviews I conducted was that they found poorly designed and hard-to-use websites frustrating. With that in mind, It felt especially important to create branding that was elegant, neutral, and visually apeaaling. I created this style tile to define how the elements in the site would look:

UI Design

Once I had my style tile, it was time those styles to the elements in my wireframes:

Usability Testing

Once I finished the UI design, I decided to test the UI. It would be useful to be able to identify if there were any problem areas or things that were confusing to users.

I created this initial prototype using Maze. In total, there were 43 different participants, who were asked to complete 3 different scenarios related to shopping and browsing for items, checking out, and navigating to the FAQ.

Recording Feedback from the Usability Test

After the usability tests were finished, I took the feedback I received and organized it into an affinity map to help me better understand and categorize the things I’d learned from different participants.

Usability Test Findings

One thing users found frustrating during tests was that they couldn’t click on the hamburger menu at the top left of the home screen to browse, as I hadn’t built that out yet. I designed what the menu would look like if users were to click on the hamburger icon in the top navigation:

Collapsed:

Expanded:

Another thing users found confusing were the filters on the category page, and how selecting them would work.

I added a series of check boxes so users could apply multiple filters instead of just one. I also bolded selected filters so it woulld be easier to differentiate between which were selected.

Original:

Revised:

One other thing that users noted was the text in the field forms were a bit small, and therefore hard to read - so I changed that as well to make the text more legible.

Original:

Revised:

Summary & Takeaways

One of the most challenging aspects of this project was the research— especially considering that I knew nothing about fountain pens or the fountain pen industry when I first started.

In this project, I spent a lot more time than I usually do on research (almost 2 weeks!) which gave me the opportunity to dig deep into market research, trends, and customer preferences specific to fountain pens. Being armed with that knowledge helped me better understand the types of information and details users are looking for when browsing for pens online.

If I had more time, I’d create a new prototype, test my designs again, and continue improving and building features that would make using Wood Fountain Pen’s website easy and intuitive.