UX RESEARCH & DESIGN PROJECT

Piano with Nathan

Nathan Johnson is the operator of his own piano school, “Piano with Nathan.” His primary goal is to improve the user experience of his website to better attract new students. He has also expressed a desire to add interactive site functionality to better engage with his existing students.

 

CLIENT RESEARCH

Before beginning to do research with users, it was prudent to research the client first. This helped establish an understanding of the client's goals and positioning within the industry.

 

SWOT ANALYSIS

One of the first steps in the project was to gain an understanding of the client's strengths, weaknesses, opportunities and threats. The primary catalyst for this project was Nathan's recent relocation to Ft. Lauderdale, where he had to rebuild his clientele and professional network and from scratch.

COMPETITOR ANALYSIS

Analyzing both direct and indirect competitors helped to build on the knowledge gained from the SWOT analysis regarding what the competition was doing successfully. It also helped inform how to avoid their pitfalls.

PROJECT VISION

Armed with knowledge of the client's position in the marketplace, the project vision was proposed to redesign the website to more accurately portray Nathan’s dynamic teaching style, showcase the engaging learning environment of his studio, improve accessibility of relevant information, and increase interactivity for students. This storyboard portrays an early vision of how that might benefit target users.

USER RESEARCH

With better understanding of Nathan's industry and who his target users were, the next step was to start getting to know what the users' goals were.

 

INTERVIEWS AND OBSERVATIONS

Target users, which included parents of prospective students and independent prospective students, were interviewed and observed attempting to complete a task related to finding a potential piano teacher via web search.

PERSONAS AND JOURNEY MAP

Qualitative data from user research and other sources served as the basis for personas to represent key user groups. This particular journey effectively illustrates a scenario where a mother of a prospective student seeks out a piano teacher, as well as her pain points along the way.

CARD SORTING

Card sorting helped reveal issues in the information architecture of the website. This similarity matrix revealed that much of the information that prospective students seek is currently buried in linked PDFs with jargon-like names, such as "policy letter."

DESIGN

IDEATION & CONCEPTUAL DESIGN

Informed by the results of user research and the design brief, ideation commenced. The resulting conceptual design that was rated with the highest impact was a mobile app/mobile site concept, where existing students would be able to view and track assignments and videos from the teacher. This concept served as the main design project for the next several months.

STRUCTURE, NAVIGATION & TASK FLOWS

Structure and navigation were refined and mapped out according to the logic in which students were expected to perform their tasks with the mobile site while practicing at the piano.

PROTOTYPING

Early visual design mockups that centered the application's primary attention on the student's progress, as shown in the screenshot of "Kelsey's Dashboard" above. Later iterations of lo-fi and hi-fi prototypes shifted the focus more appropriately to the tasks at hand instead.

 

EVALUATION

 

PILOT TEST

The first pilot test on the hi-fi prototype revealed concerns over the very limited interaction in this early iteration.

HEURISTIC EVALUATION

The heuristic evaluation revealed many more interaction problems and limitations with this version of the prototype. The error message and apparent grouping of unrelated buttons was problematic as well.

USABILITY TEST

Interaction problems, visibility of system status and grouping of dissimilar buttons proved to be the most problematic findings in usability testing. These issues became a higher priority to fix than the desired visual design overhaul.

CURRENT SOLUTION

Images below represent the current state of the homepage and practice tracker prototype after the last iteration following usability testing. Further design iterations are planned in the near future.

HOMEPAGE LAYOUT IMPROVEMENTS

Because the practice tracker concept took center stage over the last several months, limited design work has been done on the homepage. However, this side by side comparison reveals some improvements, including better organization of relevant content and testimonials front and center in a rotating student photo carousel.

PRACTICE TRACKER VISUAL AND INTERACTION DESIGN IMPROVEMENTS

The bird's eye view phases of the prototype shown above reveal far less connectedness between screens compared to the current prototype, where many of the reported interaction problems have now been resolved. The annotated screenshot calls out many of the specific fixes.

 

PROJECT RETROSPECTIVE

Lessons Learned

Reflecting on my evaluation of conceptual design possibilities early in the design phase, I realize now that focusing on homepage improvements instead of the practice tracker concept would have had more immediate impact to Nathan’s target user base overall, and would have been far more feasible to implement in the short term.

I still greatly value the time I spent on the practice tracker as an enriching learning experience, and will likely resume those efforts at a later date. However, my next step will be to iterate back to the beginning of the design phase and refocus my efforts on improving the homepage. 

 

Contact

Follow

©2018 by Peter Johnson

Homepage.jpeg

Conceptual design for homepage improvements