Case Study

Mountaincow Stationery Page

The challenge

Mountaincow offers blank and printed stationery in a wide variety of sizes, paper finishes and colors. Since each variation of size, finish, color and blank/printed requires a different catalog SKU, the resulting product catalog contains over 20,000 individual product SKUs. The challenge was to make this enormous catalog easy for the user to navigate. Competitor websites require the user to click through page after page as they narrow down the stationery size, finish and color. For Mountaincow, we wanted to have a clean solution that kept the user on the main stationery page.

My role

I was the only designer, so I was responsible for the both the interaction and visual aspects of the design. I implemented the design using ASP.NET and Bootstrap.

Platform

Web - desktop, tablet and mobile

Personas

We identified two personas representing our customer base:

Invitation Design Professional ("Ruth") - Ruth has spent several decades in the invitation design and print business. She regularly attends trade shows and is up to date on all the available tools and sources for supplies such as blank stationery. She knows there are less expensive ways to buy paper but her time is valuable and she wants a source that can provide a wide variety that is flexible on quantities so she doesn't have to buy more than she needs. She wants top quality stocks with excellent customer service and requires a rapid way to access a wide range of products for each order. She is very loyal to her suppliers and likes supporting other small business owners like herself.
Do-It-Yourselfer ("Alice") - Alice is always looking out for fun new ways to produce her crafts. She is the one always offering to design and print invitations for her family events and charitable organizations because she loves the process. She is looking for easy access to a wide variety of affordable stocks in fun colors and since every project is different and she's not getting paid she wants to only buy what she needs. Her craft room space is precious and she can't stockpile leftovers from large purchase quantities and she probably needs someone to print for her if there's a large quantity of printing to do. She likes the idea of working with smaller family-run businesses and someday aspires to run a small business herself.

Strategy to reduce visual complexity

The first challenge was to figure out how Ruth and Alice would be shopping for stationery. Existing stationery sites are very clunky in their organization of products. Most blank stationery websites make the user click through page after page to get to the item that they want to purchase.

I wanted to create a clean, simple shopping experience. But it's not like browsing for clothing, where you may just look through everything, seeing what attracts you. When shopping for stationery, you have a particular need in mind: a wedding invitation, birthday party invitation, personalized stationery, etc.

The first thing we need the customer to choose is the type: flat card, scored card, envelope, paper, or envelope liner.
Each finish (matte, metallic, textured, heavy, photo) offers a different range of colors, so the next thing to choose is the finish.
Within the colors available for a finish, only certain colors are available for each envelope size, so the next thing we need the user to choose is the size.
The user needs to specify if they want the stationery blank or printed.
Finally, the user needs to specify the quantity that they would like to order.

Now that the user has chosen the type, finish, and size, we can sort through and display only the colors that are available for that combination.

The user can choose the color, enter the quantity, and choose PRINTED from the BLANK/PRINTED dropdown menu to order printed stationery. If printed stationery is selected, a text box appears for the user to enter the name of the art file for the stationery.

The user can also choose CUSTOM in the SIZE dropdown menu and controls will appear to specify the custom height and width.

The icons below the color grid allow the user to see the full array of stationery sizes and colors for each finish.

User testing

I validated my assumptions at a trade show sitting with customers and having users interact with a prototype of the new web page as well as competing sites which had multiple click-throughs to new pages in order to select the desired product. I observed users arriving at the target product more quickly with and with less drop-off using the new single page design. I found that people had difficulty finding the Heavy stock. so I moved it into its own category and changed the color icons to specify the weight for each Heavy color (100#, 110#, 130#). As an added benefit, users commented that they had a better understanding of the wide range of products offered on the new page.

Outcome

As a result of the new page, we observed a 30% increase in sales of blank stationery, and a 200% increase in sales of printed stationery year over year.