My Roles

Project Manager, UX Designer, Developer (Webflow)

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.

A long green arrow that slides in from the left

User Research

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

Stakeholder Expectations

In addition to the MVP, what are stakeholders expecting in the new design.

User Survey

To better understand how & why users are buying a niche product such as this.

Competitive Analysis

Interviews were conducted to understand the reasons for buying habits and what would change them.

Card Sort

We wanted how users are categorizing the products to dictate the information architecture and product organization.

Click to View Research Details

Personas & User Stories

Design

Structure | Wireframes | User Testing | Accessibility | Prototype

Defining the CMS Structure

Navigation

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

Content

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.

‍

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?

‍

View Full User Test

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

Accesibility

Goals

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

Contrast

Define contrast values based on brand colors.

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