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

 

Instashop

This is custom heading element

Instashop is a grocery franchise aiming to enter the online grocery shopping market. The purpose of the project was to serve as an exercise that touched all parts of the design process. This assignment was created by Designlab as part of its online UX design boot camp program, UX Academy. I was the sole researcher and designer, working under the guidance of a mentor and participating in critique sessions with peers over Google Hangouts.

After putting together a research plan, I followed a model of Empathize, Define, Ideate, Prototype, Test. This allowed me to gain a good understanding of the problem context, make decisions, and get something in front of users to test assumptions and validate ideas.

If you want the TL;DR version of the research, you can download a PDF of my user research report, which summarizes what I did in each stage, the purpose and rationale for using each method, and key insights learned.

If you want a more in-depth look, read on.

This is custom heading element

GOALS: Learn who the users are and their behaviors, motivations, thoughts, and feelings, identify user needs

Survey

Instashop survey screenshot

As part of my initial discovery process, I launched a survey to find out who the users were and get a general sense of how grocery shopping fit into their lives. The survey doubled as a screener for potential interview candidates later. As this was an educational exercise with a $0 budget, my primary method of disseminating the survey was through social media channels. Obviously, this skewed the results quite a bit (for example, 74.3% of the respondents were residents of California, where I grew up and attended college), so I had to take the results with more than a few grains of salt. With a budget, I would have used Craigslist instead of personal contacts and included incentives such as gift cards.

Based on the survey responses, target users were people ages 18-44 years old living and working in large cities who shop for groceries in person but are open to trying alternatives.

User Interviews

“I was using Google Shopping when they were in the beta phase so they had free shipping, which was nice, but they don’t have that anymore so I use Instacart now, which is still expensive but I just use it because it’s convenient.”

I interviewed 6 people who matched the target user to gain an in-depth understanding of their behaviors, motivations, thought processes, and emotions surrounding grocery shopping. One of the most common frustrations of traditional grocery shopping is its inconvenience. This comes in many forms: how much time it takes, waiting in line, limited operating hours, locations far from home. Convenience and saving time are the driving forces to compel people to switch to online shopping; however, the higher cost is a major factor, and delivery errors (which are even more inconvenient than in-person shopping) are a turn-off as well.

Hear a snippet of one user interview here:

TRANSCRIPT:

Q: Is Instacart your preferred one?

A: Yeah.

Q: What do you like about it?

A: I like that I can see what the shoppers are doing. So while they’re shopping, they can say, ‘oh, we had to substitute this for this’ and they– they’ll do it in live time.

Q: Anything else?

A: That’s pretty much it. I like that part. Because if they do that, then I can tell them right away, like, “oh no, I don’t like that substitution” or I can be like, “ok yeah, that’s fine.”

Q: Ok, what don’t you like about it?

A: I don’t like how some shoppers substitute weird things, and then– for the items that I want. Or sometimes the orders get mixed up, or they forget something, or the prices are different than what I was quoted on the internet.

Persona

Using what I learned in user interviews as a foundation, I developed a persona. Meet Josephine, a busy, on-the-go professional who needs hassle-free ways to save time and money. Everything about her is based on the users I talked to.

 

I found the persona creation process immensely helpful for empathizing with users (though to be honest, I could have done without the little bar graphs; they take up space without really saying anything).

Empathy Maps

Creating empathy maps really helped me understand my users on a deeper level. I also took this time to build an empathy map for a secondary persona: someone with expendable income who is already invested in online grocery shopping.

 

The difference in thoughts and emotions between the two was striking, and I realized that whatever solution I was going to come up with would need to meet the needs of both (as well as the business, of course).

Storyboard

Some storyboards start with a scenario where a pain point enters and whatever solution/service/product we’re pushing comes in and takes that pain away, and Joe User is happy. This storyboard does not do that, because I did the assignment wrong (oops).

Instashop Storyboard

It does, however, illustrate a typical grocery shopping situation in a user’s life that could go much better for her if only she used Instashop. So while the storyboard doesn’t explicitly spell it out in the story, it does show opportunities where Instashop can meet users’ needs.

This is custom heading element

GOALS: Look at what currently exists in the problem space and what we can learn and use, determine priorities and primary task(s), identify business goals, identify areas where business goals and user needs can intersect

Competitive Analysis

I began looking at existing solutions/competitors to see what’s being done right and what could be done better. Comparing three major online grocers, I created a matrix that was organized based on value to users and cost of implementation.

 

Anything that was high value/low cost were the easy wins that Instashop should take advantage of. Anything that was low value/high cost probably didn’t belong in the MVP but could be considered for future iterations.

Business Goals

Instashop Business GoalsIn order to easily see what I was trying to accomplish, I created a simple Venn diagram of business goals/pains and user goals/pains. A quick glance at where the circles cross showed areas that Instashop could meet the needs of both.

This is custom heading element

GOALS: Come up with potential solutions, visualize information hierarchies and how users will complete primary task(s), create rough draft(s) with focus on functionality

Card Sort

Instashop Card Sorting Results Snippet

I ran an open card sort on Optimal Workshop so I could see what users’ mental models were of grocery item categorization. This let me know what language and groupings made sense to the users, so naturally I incorporated that information into the categories on the website to minimize cognitive load.

Sitemap

Instashop Sitemap

Drawing out a sitemap helped to visualize the hierarchy of pages on Instashop’s website as well as the connections and relationships between them. My first shot at it was a rather intricate (i.e. convoluted) sitemap:

 

(Oh, boy.) I realized a lot of it was out of scope for a V1 that hadn’t even been tested yet, so I trimmed it down to focus on fewer things that I could show to users. All the other stuff could come in future versions if it turned out there was a need for it.

User Flow

Writing each step of the user flow allowed me to visualize a red route that a user might take to navigate through the site and complete a task. One of the most typical tasks is buying an item, so this user flow included everything beginning from the entry point, then finding the product, adding it to the cart, running through the checkout process, and finally purchasing it and receiving confirmation of the transaction.

Wireframes

The wireframing process was about generating rough drafts of a design. Referring to the sitemap and user flow, it became obvious what key screens I’d need to make. I focused on functionality with an intuitive layout and sensible structure before making any moves toward stylistic choices.

V1:

V2:

V3:

This is custom heading element

GOAL: Create a working prototype that could be tested with users

Instashop Paper Prototype

I did a very low-fidelity prototype (paper sketches) in Marvel as a sort of quick practice for myself, then set to throwing my wireframes into InVision for testing and linking the screens together to simulate a real website.

Instashop wireframe prototype on tablet

This is custom heading element

GOALS: Test the prototype with users, compile insights gained from user testing and feedback

Before doing live in-person usability testing, I got quick and dirty feedback on Verify (now Helio) by launching click tests and memory tests on the wireframes.

Thankfully, there were no unwelcome surprises in the results: People knew what to look at and where to click.

 

With this small bit of validation, I let good enough be good enough and began usability testing.

After running through the spiel of procedures, getting permission to record, and explaining the “think-aloud” method, the task prompt I gave to users was simply to

“Buy two boxes of cream cheese and have them delivered by tomorrow.”

Then I sat back and watched.

Instashop Usability Test Photo

The very first user got stuck for several seconds pretty early on because I had made the terribly fatal mistake of designing the flow in a way that I would do it instead of what the users actually do. I had failed to include an accelerator to guide the user to the next step after adding the items to the cart. This was a simple enough fix that I revised the prototype to include it before further testing. As it turned out, every single user after the first one ended up using it, and I learned a valuable lesson that I knew in theory but now knew in practice.

You can play with a tablet version of the InVision wireframe prototype here. I should warn you that it doesn’t have much functionality beyond the task outlined above. Also, the checkout process needs a lot of work to become more intuitive and user-friendly.

This is custom heading element

Instashop Affinity Map

This affinity map shows some of my reflections on the usability tests. Errors directly inform areas for possible improvements. Were I to continue this project beyond the assigned exercise, the next steps after testing would be to 1) determine whether anything in the Define stage needs to pivot and 2) use the insights from testing to iterate on the design by running through ideation and prototyping a V2 to test again. Repeat this process (and/or jump around the process) as necessary.

This is custom heading element

To get things going with branding and style for Instashop, I started ideation with just a brainstorm of adjectives and (crudely) sketching whatever came to mind. Some logo ideas formed from that and I explored them, trying several different directions. I then narrowed it down to a few choices and moved from pen and paper to Sketch to see if I could flesh them out.

 

After consulting with my mentor to help me choose the logo, I created a style tile. I chose the colors– orange and yellow complemented by shades of green– for their associations with energy, vibrance, happiness, health, freshness, and nature (in the United States anyway, where my target users are). Building off this, I made a UI kit and basically filled in my wireframes.

 

Again, if I were to continue the project, I would test the designs and iterate on them based on user feedback. I’d also need to meet with stakeholders to learn what the primary business objectives are. My goal is always to design something (or contribute to the design of something) that solves problems for both the business and the user, and I can only truly understand what those problems are by talking to both.

This is custom heading element

Some other artifacts created during this process are not shown here simply because they’re a bit text-heavy.

These include:

  • Research plan (and related materials arising from research such as survey data and interview notes)
  • Instashop feature matrix/spreadsheet
  • UI requirements document
  • Usability test results document

If you’d like to view copies of any of these documents, please feel free to contact me directly.

PINION

This is custom heading element

PINION is a political engagement platform that seeks to provide a hub for voters to voice their opinions and connect with their elected representatives on issues they care about.

The PINION project began with two entrepreneurs several months before I heard about it through the Seattle Social Good Series (SSGS) hackathon. Organized by the Interaction Design Association (IxDA) Seattle and Open Seattle, SSGS was a little different from a traditional hackathon in that participants were encouraged to work on their projects in the weeks leading up to the event rather than just during the event itself.

I came on to the project pretty late in the game, so a lot of the generative research had already been done, but there was still plenty to do with summarizing findings and using that information to start building a solution to the problem that the team had uncovered in the research.

This is custom heading element

There’s often a disconnect between what voters want and what politicians do, and there isn’t a way to effectively bridge that gap. It’s hard for voters and legislators to engage in discussion and assess each other’s stances in a simple and accessible way. Because of this, many voters feel that their voices aren’t being heard or that their opinions don’t matter.

PINION seeks to address this problem by providing a space where public opinion speaks, legislators listen, and conversations about our most pressing issues can have an actual impact on policy decisions.

This is custom heading element

Prior to the hackathon, I was responsible for organizing and analyzing data gathered by another user researcher and summarizing insights to inform next steps.

During the hackathon, I functioned as the UX lead/principal designer on a team with two other designers, a developer, and the company’s two founders. In addition to defining the scope, planning the project timeline, and delegating tasks, I designed the user flow, interactions, UI elements, key screens, and prototype.

This is custom heading element

Details forthcoming

This is custom heading element

Details forthcoming