cb+laptop.jpg

clearing the clutter

 
 

Client

Craft Boner

My Role

Research, UX design,
UX writing, UI design

TOOLS

Sketch, Invision, Whimsical

the challenge

Craft Boner is a local Denver shop that specializes in hand-lettered designs—characteristically sassy phrases on things like mugs, magnets, pins and tote bags. While the products themselves sing (shout, rather) with personality, color and life, the site was rather bland and unorganized.

CB wanted more online sales—virtually an untapped revenue stream relative to their in-person sales at local events and fairs—better information architecture and a way to encourage customers to bundle more products.

 
 
 

project goals

 

1

Rewrite information architecture

4

Improve mobile experience

 

2

Increase average order spend through better browsing

5

Reinforce branding at all touchpoints

 

3

Strengthen microcopy throughout site

 

research1.jpg
 

my approach

 
 

METHODS

User interviews
Competitive analysis
Contextual inquiry
Business owner interview
Card sorting
Affinity mapping
Personas 
Prototype testing

Empathize with potential and existing CB customers to understand their needs when shopping online, focusing on habits, must-haves and dealbreakers, CB familiarity and associations.

 
 
 

crucial insights

 

user interviews

  • Millennials don’t buy anything without reviews

  • They love seeing recommended, bundled and best-selling products to help them shop and make decisions

  • Shipping should be communicated clearly and upfront—and it should be reliable


 

CARD SORTING

  • Users struggled to categorize the electric mix of products—there was some overlap and outliers


 

CONTEXTUAL INQUIRY

  • Users found the amount of top-level categories on the existing site (16) to be overwhelming

 

what does all this mean mean for craft boner?

 

Shoppers have high expectations when shopping online, no matter what the store is. They want social proof—what are other people buying? What has the best reviews? What are the top-selling products? And clear communication about shipping.

The fix / Add suggested and best-selling products (which would also encourage bundling), and set expectations around shipping before checkout

 
 

Information architecture was clearly a problem. So I looked at what competitors were doing. And then some people outside the industry, when competitors didn’t have satisfactory solutions either. How were brands solving the problem of having a lot of different products, while staying away from massive dropdown and hover menus?

The fix / Simple and clear top-level categories ( also serves as primary navigation) and more robust filtering

 
 
photos.jpg
 

who are our customers, and what do they want?

 
 

THE YOUNG, SHREWD & SARCASTIC

“I usually know exactly what I’m looking for. And I don’t buy anything without reviews.”

 

Problem / Users expect the same convenience and efficiency of every online store they give their money to, and needs a better way to find what they want, with all the info their looking for.

Solution / Craft Boner’s improved ecommerce store is succinctly organized with filters and categories that make sense (and might even motivate her to buy more!), provides reviews and makes checkout a breeze.

 

 

THE NASTY GAL

“I just want a personal experience. A brand that is genuine and gets me.”

 

Problem / Users needs a better way to browse products that feels personal and fun, without feeling stressed out and turned off.

Solution / Craft Boner’s improved ecommerce store showcases curated collections of products in a sensible way that makes shopping by mood or holiday easy—and with tons of personality.

 
 

 

flows.jpg
 

crafting research-driven design  

 

With personas and user flows on lock, it was time to bring user needs to life. Using research and site audit findings, I created a to-do list.

ecommerce must-haves

  • New information architecture 

  • Reviews

  • Recommended products

  • Best-selling products

  • Better About page, optimized for readability

  • Communication about shipping 

  • Stackability for mobile 

  • Improved checkout process following industry best practices  

Color / I carried through CB’s existing vibrant color palette, previously expressed through only the photos of products, primarily using pinks and purples. I sparingly added a new, bright mint green as a hey-pay-attention-to-this-thing highlight, which matches the palette while being different enough to stand out. 

Type / Typography maintains a one sans serif typeface throughout the site, with 4 different fonts of varying weight for emphasis and hierarchy. I toyed with adding a script typeface to match the hand-lettering style of CB’s products, but ultimately decided against it, wanting the logo and products to shine instead and avoiding busyness. 

 
 
sketches.jpg
 
 

THE biggest design CHALLENGE

how do we get even the most no-nonsense shopper to browse and explore? 

 
 

In my initial sketches and wireframes, I added a -peek-the-next-page sidebar on both sides of a page, with an arrow and microcopy hinting to other content on the site. I thought a preview of more content would encourage users to poke around, much like related videos that auto-play on YouTube when you’ve finished watching that can pique curiosity and transform viewers into an exploratory mindset. 

After ideating and sketching, then more ideating and sketching, I created a lo-fi clickable prototype using Invision to aid in usability testing and identify any lingering pain points. 

 
 
wireframes.png

better usability, less confusion

 

Feedback from usability testing allowed me to create a cleaner header, even better filtering and more effective prioritization of products on the homepage. The biggest iteration was changing the peek-the-next-page feature from a global interaction, to one contained to just the PDPs.

This made sense from a exploring and perspective—discovering products is more compelling and interesting than clicking between the different sections of the site. This change also simplified the functionality of the sidebar: it shows users related / suggested products.

Then it was time to comp it. Using Sketch, I created hi-fi mockups incorporating usability feedback, improved UX writing, a refined color palette and product photography.

 

 

cb_laptop_comps.jpg
 

easy, breezy responsivity

 

When designing for mobile, I prioritized ease of use—using leading ecommerce sites as muses and best practices as guiding pillars. Desktop designs were created with double- and single-column stacking in mind, for easy development, content hierarchy and consistency of use. Copy was condensed into accordions where applicable. Big, pretty images and pops of color guide the user down pages and across the site.

And, in keeping with the lighthearted, sassy tone of the brand, I weaved interactive elements into the site, particularly the Collections page, to delight the user and keep them entertained.

 

 

compsmobile.jpg
 

learnings & next steps 

 

The biggest thing I struggled with on this project was balancing innovation with usability. The novel peek-the-next-page feature, while intuitive and unobtrusive to the shopping experience, it doesn’t follow a standard design pattern. Ultimately, I took the risk and kept it, prioritizing the business goal of increasing average cart spend by encouraging browsing.

Next, I would like to do more usability testing on final comps and test this decision. Given the chance to implement my designs and copy, I’d further test the validity of my assumption—better browsing would increase average order amounts—by measuring site traffic and average cart amounts over several months.

 
 

similar, but different: how I improved craft boner’s ux writing