McCarthy Music

This is custom heading element

McCarthy Music Corporation is a small startup specializing in software for live online piano lessons with qualified teachers. The software is designed for one-on-one lessons and includes video chat and an interactive scoreviewer with dozens of features. Users can book and manage lessons on the McCarthy Music website.

This is custom heading element

I worked on a team of five: two co-founders, two software engineers, and me. One co-founder did a bit of coding on the company website as support (though most of his time was spent on other business-related things) and the other co-founder did the back-end development. The two software engineers developed the company’s main product in the form of apps for iOS, macOS, and Windows, but they didn’t touch the website. Whenever it was time to update or redesign parts of the website, it typically fell to me.

This is custom heading element

Research

  • Conducted competitive analysis and summarized insights
  • Conducted guerilla testing
  • Screened, recruited, and interviewed users
  • Collected and managed user data
  • Monitored website analytics and used the data to inform design and marketing decisions

Content, Design, and Development*

  • Designed and implemented (where “implemented” means a little bit of coding and a lot of help from Webflow) software features page, including original icons and content
  • Designed and implemented the “How It Works” page, including icons and copy
  • Reduced error rate and improved error recovery by redesigning the camera app (accessory to main app)
  • Improved UI and information architecture by designing and developing the student dashboard (not yet live)
  • Designed user flow and UI for the third party sale redemption funnel and the Get Matched feature
  • Created content for the Help/FAQ page, user guides, and other support documentation, including copy and videos

*Working in a tiny company, I wore many different hats. I wouldn’t call myself a developer, but I sometimes did front-end web dev for work because it was asked of me and I enjoyed it. Having ownership over both design and dev was also a nice way to make sure the conceptual designs actually made it into the real thing!

This is custom heading element

Before

After logging in, the student would land on a settings page. This wasn’t the most efficient setup; students typically log in to manage lessons or contact teachers, not to change their notification preferences or time zone. Very few users touch those options.

McCarthy Music Dashboard - Before - Settings

But wait! Did that lonely “Purchase” link on the right allow users to purchase lessons? …Nope. It just went to a product page where the product (a MIDI keyboard called the Illuminating Piano) is “not for sale” and “out of stock” indefinitely because the company actually doesn’t make those anymore.

 

McCarthy Music Dashboard - Before - Lessons

The way to get to the page for managing lessons was hidden in a dropdown menu in the sitewide navigation bar (Lessons > My Lessons):

McCarthy Music Dashboard - Before - Dropdown

 

After

Time for a revamp. My assignment was to design a dashboard that would act as the central hub for all the actions available when logged in as a student. After making a list of these actions, I did “hallway research” card sorts with 4 people outside of my company. They came up with roughly the same groupings, which I incorporated into the design.

I sketched some layout ideas and played with a few.

 

 

After getting feedback from management and the team member who would be hooking up the back end to the front end, we settled on tab style navigation across the top with each tab showing the associated section when clicked. These are essentially just styled radio buttons.

If I consider the early sketching and mid-fidelity designs to be my V0, the next iteration is V1:

 

 

The team discussed it again.

  • I had originally included a button to “Buy Credits” on the Credits page (not pictured), but discovered that users can only buy credits in the app, so I replaced the button with some text explaining that (this was kind of a V1.5 thing but you can see it in the V1 screenshots above).
  • As it turns out, we never actually got around to making the options in “Profile” a thing, so we did away with the Profile tab.
  • We decided the filters for types of lessons weren’t necessary for the vast majority of cases and were just more clutter than anything, so those went, too.
  • For various technical and aesthetic reasons, it made more sense for us to use a long blue underline as the tab selection indicator instead of the blue bar with white.
  • Also for technical reasons and clarity, I modified the styling of the Email/SMS switch in Settings.
  • I got the heads up that we need to include teacher profile photos in the lessons listings, so I reworked that.

McCarthy Music Dashboard - After (V2) - Lesson Listing

Management signed off for me to start coding V2, but first, I did more hallway testing, because designing and building in a vacuum where the only feedback is from people who already understand the entire system makes me really uneasy (and, of course, is terrible practice for so many reasons). As there unfortunately hasn’t really been a UX research budget thus far, I took to pestering more folks in the building with my laptop and questions like “What do you think each of these do?” and “What do you expect will happen if you click that?” They were kind to indulge me and I got the design and usability validation I was looking for.

V2 will appear on the McCarthy Music website between the sitewide heading/navigation and the footer nav when a user logs in, and the page will default to showing the Lessons tab where students have the options to view their lessons (upcoming, unscheduled, canceled, and completed), reschedule or cancel lessons, buy more lessons, and contact teachers.

McCarthy Music Dashboard - After (V2) - Settings

Some links don’t appear styled here because they’ll be styled using main site CSS, and chat notifications are a newer feature so they don’t appear here but will be added to the live site.

You can click around the empty state design here, though nothing is hooked up to anything except for cute doggo gifs. Also note that the buttons resolve to broken links.

This is custom heading element

Icons

 

 

Software Features Page – Before

 

 

Software Features Page – After

 

On the live site, the screenshot images of the software are animated gifs that show the various features in action.

 

How It Works Page

 

The Bicycle Repair Shop

This is custom heading element

The Bicycle Repair Shop is a small bicycle rental and repair business in Seattle, Washington. Its website provides information about the shop and enables customers to book bike rentals and repair appointments online.

This is custom heading element

The website at thebicyclerepairshop.com* suffered from several usability issues that often translated into employee time spent fielding inquiries from confused customers. Additionally, the owner was unhappy with the visual design.

I was tasked with:

Identifying the issues that cut into the business’ bottom line

Redesigning the website to fix those issues as well as better reflect the business aesthetically

*Note: The client is still working on transitioning away from the old design on the live site.

This is custom heading element

I was the sole researcher and designer for this project, responsible for the website’s usability, interaction design, UI design, and integration with the business’ existing third-party systems. I was not responsible for generating content, which was simply transferred over from the original website.

This is custom heading element

To start, I drafted a plan with my initial research questions and methodology.

Initial Research Questions

What are the business’ biggest pain points?
What are the customer red routes?
What is the website’s role and what do people expect to be able to do on a bike shop website?
How do they choose which shop to go to for their needs?
How do they find out about The Bicycle Repair Shop and which channels are likely to bring in potential new customers?

The answers to these questions and more would inform the eventual design direction.

Methodology

FIELD STUDIES (Direct Observation, Contextual Inquiry):
During visits to the shop, I observed the behavior of both the customers and the employees, occasionally asking the employees about particular interactions. At other times, I was a fly on the wall. These visits helped me mentally connect the online experience to the in-person one. A slow day also gave me the opportunity to have an impromptu stakeholder interview, which allowed me to better understand the business goals and constraints.

COMPETITIVE ANALYSIS:
I evaluated features of similar shops in the area and their websites to discover the standards and expectations for what a bike shop and its website should provide.

QUALITATIVE DESK RESEARCH:
Looking at online reviews by users, I analyzed for patterns and found some once I had a large enough sample size. For example, I learned what people tend to like about the shop and who the core customer base is. This method has limited use on its own—one glaring problem is the bias baked in from the fact that online reviews are only reflective of the views of people who write online reviews—but combined with other methods, it can lead to valuable insights.

Baseline Usability Tests

 

After my initial research, I had a pretty good idea of who the customers were and how the website might work in tandem with the in-person experience. To help determine which usability issues should be prioritized, I conducted usability testing with 5 users who had never seen the site before. I used the following prompt:

Imagine you commute to work by bike. One day, a spoke on one of your tires breaks. You want to get it fixed pretty quickly since biking is how you’d normally get to work. A friend of yours recommends a shop to you, giving you a link to The Bicycle Repair Shop’s website. Navigate to the website. Do what you would do on this website to go about getting your spoke problem fixed.

I instructed each participant to use the “think-aloud” method, reminding them of it when necessary but not providing any further guidance. I recorded the sessions for later review.

Although the task completion rate was 100%, actions like extra clicking, scrolling up and down, and looking in the wrong places for the next step revealed areas for improvement.

This is custom heading element

From Preliminary Research

Throughout the year, the shop does more repair for commuters/regular cyclists than they do rentals. In the summer (and on weekends with nice weather), demand for rentals increases. As for merchandise sales, people most often purchase items just from browsing.

Repair jobs are often single-issue. The shop routinely does same-day repairs.

The number one question people ask on the phone is “Do you rent bikes?”

About half the people who book service appointments or rentals use the online portal, but they will also frequently call anyway with questions.

People find the shop via online search and some word of mouth. They choose to come in based on Google and Yelp reviews.

Customer loyalty is related to positive perceptions of customer service, quality work, fast turnaround, and cheap/reasonable prices. People also like the personality of the shop (friendly, down-to-earth, not snobby or salesy) and the convenience (location and hours).

Most bike shop websites include “about” and “services” sections as well as rates, hours, address, map, and phone number. Some also include an email and/or contact form. Including an online booking tool is a differentiator.

 

 

From Usability Testing

Users clicked on the two prominent images on the homepage but they weren’t linked to anything.

In the appointment booking tool, there was an undesirable “frame within a frame” effect because the user has to scroll within the iframe but sometimes accidentally scrolled on the page where the iframe was embedded instead.

In the appointment booking tool, one user got stuck on an irrelevant time zone selection window that came up.

In the appointment booking tool, the date selector didn’t provide the user a reference point for today’s date.

In the appointment booking tool, the saved information appeared as a list of links in a side pane. The links looked as though they would lead to different steps in the booking process, but if any of them were clicked, they all brought the user back to step 1.

The content underneath the appointment booking tool iframe was viewed as excessive and poorly formatted. It also didn’t seem to provide value to the user.

 

This is custom heading element

Before starting on the redesign, I quickly sketched out a basic user flow and site map.

One challenge of designing the new website was that content generation was out of scope, so I was stuck with using old copy that was often verbose and/or outdated. This made it difficult to design for content first. As is often the reality of design, I focused on choosing a few things that would make the greatest impact.

Decisions and Rationale

Normally, if I’m starting from scratch and expecting an eventual developer handoff, I’d sketch out some layout ideas, make a few wireframes, then start low-fidelity prototyping. For this project, however, I did all my designing within a Squarespace template. The reasons for this are that 1) that’s what the client had, 2) there will be no developer, and 3) the website needs to be easy to edit and maintain by people who have limited coding experience.

PROBLEM:
People call and ask whether the bicycle shop does rentals.

SOLUTION:
I removed the phone number from the upper right corner of the homepage (it could still be found in the footer and on the contact page) and instead lead the eye to the two images, which are now clickable and point to their respective pages. “Bicycle Rental” is displayed under the first image along with an obvious “Reserve Today” button to cover different linguistic mental models. Additionally, the first link in the main navigation (which is now more discoverable by convention of its position in the upper right corner) is “Rental.”

PROBLEM:
The flow for using the repair appointment scheduler isn’t smooth.

SOLUTION:
I scoped out a few different tools available and settled on Acuity Scheduling for its intuitive flow on the front end, ease of use on the back end, and straightforward customization options. I didn’t design this part other than some styling tweaks to look on-brand. Using this scheduler resolved some of the issues the old one was having, including the “frame within a frame” thing and the oddity of the sidebar links as a roundabout way to track progress.

(The first screen above may present too much information up front. For a future iteration, I think it can be further simplified visually by hiding the details behind a “More Info” link or similar concept.)

PROBLEM:
The content under the appointment scheduler looks long and convoluted.

SOLUTION:
I trimmed some of the fat here for better legibility and message focus (this was a rare exception with regard to content; the client had given me information that made a large amount of the original copy no longer true, so removing it was no trouble). In addition, I threw in some custom CSS on the table of package deals to clean it up while using brand colors for a more balanced and cohesive feel to the page.

OTHER DESIGN CONSIDERATIONS:
Redesign the “self-guided tours” section and the contact page.
The decisions I made for these were based on usability heuristics, particularly consistency and standards, efficiency of use, and aesthetic and minimalist design.

Before

After

This is custom heading element

Reception has been positive, though we’ve only done informal preliminary testing with a handful of stakeholders and users. Proper usability testing will be crucial to improving the design for future iterations. I’m confident the new design will have no negative effects on business, but whether it will have tangible positive effects remains yet to be seen. The client is still working on transitioning to the new design.

Potential impacts include:

Reduced calls from customers requesting information that can be found on the website
More automated appointment-booking
Higher customer satisfaction from being able to move smoothly between the online and in-person experience
Improvement in the overall online impression of the business (though the shop’s reputation is already stellar)

Some areas to explore further design work include:

Content (removing outdated copy, clarifying messaging, enhancing readability, replacing low-quality images)
Inclusion of social media

My hope is that future integrations (e.g. an online store synced with the shop’s inventory database), additions (e.g. blog posts), and other changes (e.g. adding new self-guided tour routes) will be easier going forward. I hope the redesign enables the employees of The Bicycle Repair Shop to spend less time on administration and support and more time focusing on running and growing the business.