What I learned
After performing this usability evalutation using eyetracking equipment I think I got most of the important results after only 5-8 participants. Moreover, I uncovered issues in a process that at first seemed smooth but upon further investigation needed improvements.
About
I wanted to investigate the apply process on Rocky Mountain University's (RMU) website that I designed and see if there were any elements that needed improving.
Team
My Role: UX Designer/Lead Investigator
Director of Marketing/Co-Investigator
Marketing Coordinator/Co-Investigator
Collaborate with University Office of Research
Tools
Figma (Design), Tobii Pro Spark & Software
Background
Original Design
I was tasked with redesigning the process prospective students go through to pick their degree. The original design (Fig. 1) was confusing and causing prospective students to pick the wrong degree.
Fig. 1: Application Page Original (Desktop)
New Design
Using a wizard-like approach to simplify the process we had good feedback but it was anecdotal. So I decided to do some UX Research to investigate if our new feature was working as intended.
Usability Evaluation
Eye Tracking
Using an eye tracking system (Tobii Pro Spark) and collaborating with the office of research, we gathered quantitative and qualitative data (e.g., gaze plots, audio recordings, talk out loud method) of 15 participants doing various tasks related to this process.
Tasks
1. I asked the participant to first find a way to apply. I observed that the button at the top of the page was not always the path they took. (Fig. 2) As indicated by the red arrow at the bottom of the page is where some participants chose to go instead.
2. After choosing where to apply on the interface I asked them to tell me how many steps were in the process but some participants hesitated or did not see the component as indicated by the red oval (Fig. 3).
3. Then I asked them to pick a department and a degree and that went smoothly. (Fig. 4, 5)
4. When asked to read the information on the page (Fig. 6) and then go back to step 2 most could not find the button (as indicated by the red arrow) on the bottom and instead chose the button at the top of the page (as indicated by the red oval). This resulted in sending them back to the beginning.
Fig. 2: Home Page
Fig. 3: Step 1
Fig. 4: Step 2
Fig. 5: Step 2 Hover
Fig. 6: Step 3
Analysis & Recommendations
Doing this study was very informative and led me to make many design suggestions to my team.
First, we were thinking about removing the second apply button (Fig. 2) on the home page that some of the participants used. The research highlighted that this may be a bad idea. So I suggested to keep it for future iterations.
Second it was surprising to me and my team that participants could not find how many steps were in the process by looking at the component on top (Fig. 3). So, my suggestion to our team was to indicate the number of steps closer to the labels. This I thought would be more visual for the interfact.
Third, for the last step (Fig. 6) where participants chose the wrong button on the top. My recommendation was to move the button from the bottom to the top and use a different style to avoid confusion with the existing button.
Discover more examples of work I have done with RMU in another case study.
