cb+laptop.jpg

solving symphony’s biggest problem

 
 

Client

Colorado Symphony Orchestra

My Role

User research, UX writing, content strategy, event design, project manager

TOOLS

Sketch, Invision, Whimsical

the challenge

Colorado Symphony Orchestra is facing the perennial problem symphonies all over the world are grappling with: how the heck do they get millennials into their doors?

For this on-spec project, my team was tasked with de-shrouding this great mystery with creative UX design. For such a seemingly straightforward objective—we are millennials ourselves, after all—the opportunities before were wide open, almost too open, too broad. By the end, we didn’t just employ research and design—we had to invent a new way to experience music.

 
 
 

project goals

 

1

Rewrite information architecture

2

Increase average order spend through better browsing

 

3

Improve mobile experience

4

Strengthen microcopy throughout site

 

5

Reinforce branding at all touchpoints

 

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. 

 
 
 
 

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
 

learnings 

 
 

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.