Heartland Marimba Publications

My Roles

Project Manager, UX Designer, Webflow Developer

Tools Used

Figma, Illustrator, KardSort, Trello/Slack



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.

High Fidelity Prototype
View live shipped site

User Research

User Survey | Competitive Analysis | Card Sort | Personas | User Stories

Gathered requirements on what stakeholder, user, and information architecture was crucial.

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

Personas & User Stories

Long green arrow that slides in from the left.


Icon representing wireframes
Icon representing User TestingIcon representing prototyping

Structure | Wireframes | User Testing | Accessibility | Prototype

Defined backend CMS structure, shopping flow, wireframes. Tested, iterated, and built prototypes.

Defining the CMS Structure


  • Breadcrumb Navigation
  • Categories & Subcategories based on card sort results
  • Layout & references of CMS defined


  • CMS data based on competitive audit, surveys, &
  • Additional CMS collections based on stakeholder needs
  • New features to create browse-ability

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.


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.


  • 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


  • 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



  • Adhere to WCAG 3.1 AAA standards
  • Write simple useful alt text
  • Explore audio alternatives


  • Define contrast values based on brand colors.

Visual Style & Design

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
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
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
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
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
Visual Aesthetic
The overall visual style and flow was design to relate to and be complimentary of the HMP logo
Heading 1
Heading 2
Accent color was added to emphasize category cards & products images
Primary & Secondary buttons integrated blue accent color into states
Press this button! (It doesn't link to anything)
Browse by Performance Setting
Product Components
Product Page
Composer Page
Product Card
< Back Home

Let's Work Together!

Thank you! Your submission has been received and I will be in touch in the next day or so!
Oops! Something went wrong while submitting the form.
Joe Millea