solving symphony’s biggest problem
Colorado Symphony Orchestra
User research, UX writing, content strategy, event design, project manager
Sketch, Invision, Whimsical
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.
Rewrite information architecture
Increase average order spend through better browsing
Improve mobile experience
Strengthen microcopy throughout site
Reinforce branding at all touchpoints
Business owner interview
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.
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
Users struggled to categorize the electric mix of products—there was some overlap and outliers
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
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.
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.
New information architecture
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.
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.
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.