My Roles

Project Manager, UX Designer, Webflow Developer

Tools Used

Figma, Illustrator, KardSort, Trello/Slack

year

2021

Live Link

The Problem

Heartland Marimba Publication publishes classical marimba & percussion music. The e-commerce site is out of date and has several overarching usability problems.

The Solution

A redesign of Heartland Marimba’s Publication site to be more usable for users, increase revenue, and funnel traffic to the organization. Incorporate a CMS system to make it more scalable and easy to edit.

Resulting Metrics

Sales revenue increased 68% in 2022 and have already increased by 99% in 2023.

‍

Stakeholder Expectations

Increase revenue by at least 25%, year over year
Easier to manage content
Ways to funnel users to other aspects of organization.

User Survey

Users are mostly students & young professionals
Users search for products based on number of performers, length, pedagogy, and word of mouth

Competitive Analysis

Users shop at other stores because they are familiar, meaning we needed to emulate certain patterns.

Card Sort

How do users organize music and how do they expect it to look in the store.

Click to View Research Details

Improving the User Experience

Users are not Shopping

A whopping 93% of users are not doing any actual shopping of the catalogue.
The way pieces are categorized doesn't facilitate product browsing.

Rethinking the Categories Based on Data

We asked users what setting they are performing in.
The majority of users are students or educators. We came up with categories or genres that cater to their needs.

Better Descriptors

In addition to the new categories, we are giving each product a set of 3-4 adjectives or 'descriptors' to give the user a quick way to get a feel for a piece.

Wireframes

Click to see desktop & mobile wireframes

Technical Specifications Defined

Based on analytics of previous site, users lean heavily into desktop or mobile. Therefore a graceful degradation process was implemented.
Margins and break points defined based on the amount of content to be displayed.

‍

Getting everything place so it can be tested

Global symbols/components were defined
Design requirements adhered to
Designed with Personas and User Stories in mind.

User Test No. 1

Research Goals

Test basic task completion of low fidelity wireframes.
Determine if features or components were missed.
Gain further insight on users via interview

Secondary Goals

Get some insight into what users think of Heartland Marimba and percussion publishing sites in general.

KPIs

Task Completion
Time on Task
General Usability

Can the User?

General usability of site in its current state
Finding the product page
Finding the composer page
Complete a purchase
Submit for publications

Is the Site?

Browse-able
Does performance setting increase browsing
Does the educational series terminology make sense?

User Testing Results

Validated

Information Architecture
Additional browsing options was a hit!
User flows made sense
Basic Tasks completed: Navigating the site, finding and purchasing a product, and viewing a composer.

Improvements to be made

Browse all products page not necessary
More specific product details needed: marimba ranges, publication date, etc.
Confusing terminology: Educational Series needs to change to just education and be broken into sub-nav categories

Visual Style & Design

Colors

Primary Color
‘Bright Red’
Hex #A30E34
hsla(345, 84%, 35%, 1)
Usage options: H1 text, dividers, primary button color, icons, secondary button & text input area outline, inline linked text

Primary Color (60%)
Hex #A30E34
hsla(345, 84%, 35%, .6)
Usage options: Primary button in ‘none’ state, error state background

Accent Color
‘Blue Accent’
Hex #3DA5DF
hsla(345, 84%, 35%, 1)
Usage options: Boders of images, cards, hover state of primary button, focus state of text input fields

Accent Color (60%)
‘Blue Accent’
Hex #3DA5DF
hsla(345, 84%, 35%, .6)
Usage options: The following in a ‘none’ state: Boders of images, cards, hover state of primary button, focus state of text input fields

Secondary Color
‘Logo Gold’
Hex #BB812D
hsla(35, 61%, 45%, 1)
Usage options: Borders & dividers between headers div blocks, & containers

Secondary Color (60%)
‘Logo Gold’
Hex #BB812D
hsla(35, 61%, 45%, .6)
Usage options: Objects, containers, sections, in ‘none’ state

Dark Text
‘black’
Hex #333333
hsla(0, 0%, 20%, 1)
Usage options: Header & body text when primary color is not used

Grey Text
‘Dim Grey’
Hex #6D6D6D
hsla(0, 0%, 43%, 1)
Usage options: Subheaders as needed, text imput field text, product text labels

Typography

Avenir Next Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890

font-family: Avenir Next;
font-style: normal;
font-weight: 400;
line-height: 33px;
letter-spacing: 0em;
text-align: left;

Usage options: All H tags, body text

font-family: Avenir Next;
font-style: normal;
font-weight: 700;
line-height: 33px;
letter-spacing: 0em;
text-align: left;

Usage options: Product name in small cards, prices, emphasized text as needed