Information Architect

Category
#InformationArchitecture
Client
Mat Campbell
Year
2021

Overview

Mat's Website was not displaying his original music clearly, causing visitors to abandon the site before discovering unique music that will set them apart.

No items found.

Project Summary

Our client approached us with the task of optimizing his website’s information architecture, improve site navigation and overall user experience.

Goal:

To create experiences that keep users engaged while they experience Mat’s music, personality, and craft.

My Roles:

Project Manager

UX Researcher

Information Architect

Duration: 6 Weeks

Week 1: Discover

User Research

Observations

Interviews

Week 2: Define

User Persona

UX Audit

Week 3: Ideate

Moodboard

Information Architecture

Site Map Comparison

Week 4-5: Prototype

Low-Fidelity Prototype

Wireframe Design

Test & Iterate

Finalize Design

Week 6: Deliver

Website Stand Up

Domain Transfer

Basic SEO

Tools Used:

Discover & Define

User Research

My team and I interviewed a particular group of people, target market, so we can uncover their pain points, needs and wants for the product. In this case, we found opportunity in middle school band directors.

The responses during the interviews gave us valuable insights about the process they go through to select music for concerts and competions. We found out why they visit particular websites, the time of year they typically “shop”, and what drives their decisions to purchase.

Interview Results

User Persona: Meet Jeffrey

After our interview process we analyzed the data seeking patterns in goals, commonalities in pain points, and personality traits so we can personify the data so we can always refer back to what our user(s) want.

User Persona: Jeffrey Gaines

UX Audit: There's Too Much Clicking!

After understanding our users we have to take the time to understand our client and the website/product they are offerering. We accomplish this by conducting a UX (user experience) audit. Our approach of the UX audit pulls identifies design opportunities from several aspects; we measure the usability of the website’s interfaces, we document how we believe users should navigate the site, and we look at the analytics to see what works and what doesn’t...

Heuristic Evaluation
  1. The heuristic evaluation helps us uncover missed design opportunities on the original website such as inconsistent formatting, too much clicking, or lack of call to action buttons (CTA’s).

  2. An analytics audit was conducted using SquareSpace analytics. From our audit we uncovered a bounce rate of 54.9% (excellent bounce rate being below 40%).

  3. A user flow is drafted so we can give our client a visual representation of the intended path a user should take then we observe users to see the paths they take when interacting with the website.

Observation

Our next phase of the design process was to observe users interacting with the original website. We went to the public and recruited random users  to accomplish a few objectives.

We took note of the paths chosen and drafted user flows to show the client how people interacted with his website and WHY the results were so low.

Develop

Ideate Solutions

Our development phase is all about exploring various website navigation and interface options. This phase involves creating moodboards, information architecture, and site map comparisons.


Moodboard

A moodboard is how we pull inspiration for the look and feel of the website. Inspiration derives from just about anything; pictures, colors, other websites, interactions, anything goes! We like to invite clients to participate in this so we can have a better understanding of their preferences so we can combine it with ours.

Ex. Moodboard

Original Site Map

Site Map Comparison

A site map is an overview of the website’s pages and how they are structured. We drafted a site map of the original website and used it to optimize the information architecture (how the information is organized) using open card sorting. After several iterations of our proposed site map, we presented our client with a comparison of each. Our’s offered a more stream lined and simple navigation.

Proposed Site Map

Prototype Process

After our client approved of our proposed site map, we used it as a guide as we prototyped potential solutions. We start with low-fidelity prototyping and created wireframes to test the navigation.

Starting with paper and pencil we drafted our homepage to show strategies to help our client market and funnel customers and clients.

Paper Sketch

Once we were satisfied with our design we began to digitize the design to create a low-fidelity prototype that would be tested for any design flaws and uncover any other needs our users may want.

Low-Fidelity Prototype

High-Fidelity Prototype

User Tests

The results from the user tests had about an 95% success rate and helped uncover design opportunities in the “About” section. Users found the website to be easily navigatable and were pleased with their overall experience. With some quick iterations we were able to finalize the design and begin standing up the website using SquareSpace (client preference).

Final Design

Strategically Placed CTA's

Buttons for improved navigation
Buttons for improved navigation

Improved Engagement Times

Updated Product Page
Original Product Page

Delivery

Our design is clean and simple to navigate and offers an enjoyable experience for band directors, musicians, and music enthusiasts alike.

Our client was overwhelmed with excitement during the website launch and has been more than pleased as it gathers momentum. Since the launch we have noticed a decrease in bounce rate by 10-15%, increased engagement time, and over 100 intentional button clicks throughout the website.


Other Projects
selected work
No items found.

Web Design

Web Design

#WebDesign
No items found.

UX Research for Non-Profit

UX Research for Non-Profit

UX Research
No items found.

UX Research

UX Research

#UXResearchDesignCode