About the Company


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.

The Team


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.

My Work


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!

Student Dashboard


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.

Screenshots


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