The Pied Piper Rebrand/Redesign

Project Summary: The Pied Piper, a music shop local to me, has a great service but could use a better online presence. For this project, I will rebrand and redesign the site as well as make it responsive.

Category: Responsive Design

Collaborators: Hailey Lemon

Dates: Aug 2022 - Oct 2022

My Role: UX Design, UI Design, Branding, Logo Design

Project Overview

The Pied Piper, a local music shop, has a great service but could use an online presence that better reflects its services. For this project, I will rebrand and redesign the site as well as make it responsive.

Problem Statement

💡

Purchasing new music gear can be an overwhelming process. The Pied Piper website needs to better assist customers in making this task simple while still providing enough product and store information to ease user frustrations.

The Design Process

To solve this problem, I used the Design Thinking Process:

❤️ Empathize ✅ Define 💡Ideate ✏️ Design 📊 Test

Empathize Phase

Website Audit

My research began with an audit of the current website design. Utilizing the 10 Usability Heuristics, I established some main issues:

Competitive Analysis

To see how other businesses, both small and large, handle providing their services on an online platform, I performed a competitive analysis. Features that seemed loved by users of these sites included mailing lists, search bars, detailed product pages, and extensive filtering options.

Contextual Inquiry

Lastly, I conducted contextual inquiry interviews and unmoderated surveys. The interviews were very helpful in seeing the site from varying perspectives. I conducted these interviews in person, instructing the users to complete various tasks as well as freely explore the site without my intervention. The surveys focused on user habits within the realm of buying and browsing muscal gear.

Quotes from interviewees:

“The site really forces you to go to the store in person.”

“There is a general inconsistency, which makes me feel like I can’t trust the site.”

“Items I add to my cart are inaccessible, where do they go?!”

Key Takeaways

👥

Everyone is a potential user as the site would be utilized by beginners (maybe even buying their very first instrument!), professionals, and everyone in between.

💡

Users prefer to use the site for the convenience of browsing stock rather than for finding out store information.

🪕

Users often prefer buying instruments and accessories online when they can, but often don’t because the sites, much like this one, lack information for them to make a confident purchase.

💵

Users need to see reviews on music products, especially costly ones.

✅

Fast and simple checkout processes are heavily desired

Research-Based Goals

Based on my research, I established two main areas of focus for the redesign: a browsing flow and a checkout flow. These flows should focus on these main goals:

Create confidence in purchasing
Provide information about the shop and its products
Feature simplicity
Communication
Responsiveness

Define

During the define stage, I decided to create a persona to better help me understand my user audience.

Ideate

Moving on from research and defining my audience, I began ideating. With a rebranding and logo design ahead of me, I got right to work. In preparation for this redesign, I researched the business history and values. From here, I established these keywords:

Pied (colorful)
Professional
Inviting
Magical (the Pied Piper had magical abilities)
Friendly

Logo Design

🐭

I wanted the logo to feel both fun and memorable. The chosen logo features a magical mouse, which comes directly from the story of the Pied Piper.

Style Tile

Sketches

Prior to sketching, I established on an elemental level what exactly I wanted to change or implement. After formulating this concise list that was representative of my research, I began sketching.

Design Phase

Mid Fidelity Wireframes

During wireframing, I focused more on the responsiveness of the pages than I did during the previous phase. Additionally, I used this phase to design the checkout flow.

C1 MidFi Frames

The Final Product

After building the initial prototype, I conducted unmoderated and moderated user tests. The unmoderated tests were followed by a questionnaire. The unmoderated tests were conducted through Maze. Changes included providing more info on products and updates to make the prototype more usable.

Below is the finalized prototype after implementing changes from user tests. Enjoy!

Reflections & Future Plans

💡

Ask more specific questions Though I understand the importance and potential of open-ended questions, I learned this doesn’t mean these questions should be vague. Some feedback during user testing made it evident my questions weren’t fully understood.

😰

Users don’t like too many options Through research on this project, I found that there is a fine line between too much and too little. For example, users didn’t like the various ways they could access reviews using the original design, they felt it to be an overbearing amount of information. However, users did want more information on the products themselves. It was interesting to learn what the users valued most in options and information.

⏰

If I had more time I’d conduct additional research to ask better questions (especially during the user testing stage), prototype and test the mobile screens, and perhaps directly involve the stakeholders.