User Experience Researcher and Designer
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
Categories of ideas generated during ideation exercise
Conceptual design for homepage improvements
Conceptual design for mobile "practice tracker"
Conceptual design for instructional video library
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.
Navigation model and task flows
Structure and navigation
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.
First visual design mockup
Paper prototype of refined design
First digital prototype translated from paper prototype
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.
Current prototype of redesigned homepage
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.
Bird's eye view of first iteration of Practice Tracker prototype
Annotations of interaction problems with first iteration
Bird's eye view of current version, showing larger number of connections of screens
Annotations of interaction design improvements to prototype
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.