The Problem

Current online learning platforms only cater to those who prefer remote, independent education.

Research

Competitive Analysis

To start off, I analyzed different learning platforms to get a general idea of design practices, site structure, what excelled and what was lacking. This was useful as it gave me an end-user perspective, and I could have a foundation of ideas to build upon.

These platforms offer many different subjects to learn from; but as suspected, every course is remote. There is an untapped market for users who may not want to learn remotely.

I

100% of interview participants preferred in-person learning instead of remote

Musiciancy

Role: Sole End-to-End UI/UX Designer

Time Frame: February - September 2024

Allow users to find courses by experience. Allow users to schedule in-person courses themselves, and don’t hold time commitments on online options.

II

Despite preferences, participants still used online learning for smaller, less complex subjects

III

100% of participants, of every skill level, wished to continue learning

How to Solve It?

Build a digital education platform that serves users who prefer in-person learning.

User Interviews & Affinity Maps

Interviews were conducted with 4 musicians in order to determine an average user’s motivations, success metrics, pain points and more. I organized common answers into an affinity map, and found three significant insights:

Who for?

For this project I focused on a userbase of musicians, since it is a medium with a wide variety of subjects.

View Competitve Analysis

Brennan has little music experienced from the past he’d like to rekindle. He has no desire to learn anything more than basic techniques and some songs, however he struggles to learn on his own and is on a low budget.

Give users the option to filter search results by price, or set a budget range in their profile for curated results. Also give a distinct option between finding in-person or online.

With many different things to focus on, I created three personas in order to reference back to the users I had interviewed. Each of these personas represents the user’s motivations, needs, wants, learning habits and pain points.

Maeve is very experienced and wishes to broaden her skillset into promotion and hardware management. She has no in-person or online learning preference, but is very intimidated to learn by herself.

Allow users to discover or filter courses by type like instrument, hardware, social, etc. For users going with online options, allow them to easily contact their instructor.

Building the Brand

Color Palette

I recognized the growth that learning causes and created a natural color palette to reflect that. Likening it to trees using dark browns and a light green.

Laying the Foundation

Low Fidelity Wireframes

How might users easily schedule in-person classes for when is best for them?

With solutions in mind for user’s desires and pain points, I sketched low fidelity wireframes to get a general idea of how Musiciancy should be digitally layed out. Having these as sketches allowed me to quickly iterate and refine solutions to user’s problems:

View Low-Fidelity Wireframes

View Affinity Map

Personas

Richard is a very experienced musician and wishes to learn advanced material. However, they are typically on a tight schedule and prefers to learn on their own time.

Logo Creation

I created a logo to reflect the simplicity of Musiciancy. I settled on a typeface that I thought was simple enough yet bold and noticeable.

Once the low-fidelity wireframes were finalized, I moved on to upgrading them to middle fidelity. Middle fidelity wireframes were the perfect in-between low and high. If any more changes were necessary, they could very quickly be made with ease. In contrast, if everything was in its right place and no changes were necessary, every element could be easily changed into the brand’s style with just a few clicks.

Dropdowns for in-person scheduling were changed into a responsive and intuitive calendar.

What about a course is relevant to help users determine if it is right for them?

Middle Fidelity Wireframes

View Mid-Fidelity Wireframes

How might users curate their search/recommended results to their needs?

By using filters while searching or assigning preferences in their profile to show only the most relevant options.

Between creating middle fidelity wireframes, I also stylized different components such as buttons, icons, and cards. This allowed me to easily switch out components from the middle fidelity wireframes in order to make everything adhere to the Musiciancy design guidelines. These high fidelity wireframes were the end-result of the visual design process. Once everything was finished, they would be used to make a functional prototype for future user testing.

Show detailed information like a price, length, years of experience recommended and more on the Course Overview pages.

In-person schedule prominently shown along with other information like price, length and experience recommended.

Search filters were implemented so users may organize results by budget, length and more.

By using a simple dropdown to select a date, and another to show available time slots once the date is selected.

User Testing

The high fidelity wireframes were prototyped and made functional for five different participants to test. The tests were comprised of three different tasks given with four success metrics to determine if any changes were necessary to the tasks and overall design.

Time

Participants were timed on each task and were asked if they felt said task took too long or too short to complete.

Rating

Ask the users to rate the ease of use of each task on a scale of 1 to 5. 1 being very difficult, 5 being very easy.

High Fidelity Wireframes

View High-Fidelity Wireframes

Feedback

Encourage the participants to give feedback as they tested, as well as ask for their overall impressions or suggestions.

Typography

For my typography, I wanted a nice blend of modern and stylized. I chose a bold serif font for headers, and a simple and sleek sans-serif font for paragraphs.

Errors

Take note of any user errors such as deviating from the task, or general errors with the prototype.

The Results

Testing was successful overall, with users giving Musiciancy praise in its ease of use and simplicity. Participants gave an average ease of use rating of 4.1 out of 5. The average time to complete each task was 1 minute, 20 seconds. However, there were some changes that participants suggested:

Task Flows

Reflection

What I Learned

Research is integral

All research methods used and not used in the Musiciancy project were absolutely fundamental in ensuring an effective, user-friendly design.

Design with the user in mind

Keeping references like affinity maps and personas is a great reminder of who you are designing for. Instead of asking how you’d use it, ask how they’d use it.

Add Missing Features

Add a user profile and a course rating/review section. These features are necessary in allowing users to curate their feeds and finding courses that work for them.

The Value of Feedback

It can be easy to become caught up in biases and personal preferences when designing. However what works for the designer seldom works for average users.

What I’d do Differently

More Research Methods

With learning how absolutely vital the research is to the design process, I would like to do more in the future. I believe surveys with questions similar to interviews would help get more perspectives.

Add any course to the wishlist

Ensure users may easily add courses to a wishlist if they are on the fence about several options at once.