The Pied Piper
The Pied Piper

The Pied Piper

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

image

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:

image
image

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.

image
image
image
image

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.

image

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

image
image
šŸ­
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.
image

Style Tile

image

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.

image
image
image
image
image

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.

image
image

C1 MidFi FramesC1 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.

šŸ‘‰Ā View another project