Matt Peterson
UX Design & Research
Usability Testing
I conducted a first round of Usability Testing with volunteer participants using the interactive Mid-Fidelity prototype. Usability tests were conducted either in person using the Adobe Xd mobile application or using a browser link over Zoom. Test participants were asked to complete the following tasks in the prototype:
-
Successfully sign up for an account and proceed through onboarding.
-
Search for locations near user and add location the user's home page.
-
Navigate the marketplace and purchase a used board to pick up locally.
-
Add a New Session, record session rating, and review data summary with Surf Profile.
Onboarding
The onboarding process was drafted as a progressive onboarding with 5 slides, each introducing a key feature of Vela. Participants generally either felt the onboarding took too long, or they would ignore the slides entirely and skip through as quickly as possible.
Problem:
Long, confusing copy and unclear progression.
Proposed Solution:
Rewrite feature descriptions and abbreviate to one slide.
Iconography:
Certain iconography proved particularly challenging to different participants. The most consistently frustrating was the implementation of an ellipses (or meatballs) for accordion menus on Forecast and Product screens.
Problem:
Functionalities unable to be located from accordion menu due to unclear icon.
Proposed Solution:
New icon for accordion menu, and minimize icons located in accordion menus.
Unnecessary Features:
The Surf Profile feature was designed as a rating system for surf sessions, and by extension for providing insights based user generated data into which beaches the user had the most enjoyable sessions.
However, throughout testing the feature, it was regarded as generally too confusing or uninspiring, and due to the amount of time and additional complexity that would be necessary to make it a working and usable feature, it was removed from Vela after this round of testing.
Problem:
Unclear or irrelevant purpose.
Proposed Solution:
Removed feature and refined Marketplace functionality.
Preference Testing Visual Design
Before getting to increasing the wireframe fidelity, I wanted to conduct preference testing with two distinct directions the aesthetic and branding could take, which would carry throughout the rest of the high-fidelity wireframes. I chose the landing page for the preference test since it would be the first screen the user would encounter after downloading the app.
Option A is designed photography and realistic imagery throughout the app.
Option B is designed with a more minimalist color blocking style, and suggests the importance of iconography throughout.
Option A
Option B
Test Results:
via Optimal Sort:
"Log in 1 [Option A] is performing better, and the difference is 90.0% likely to be statistically significant. This means that you can be fairly condifident that it is actually better, and not performing better due to random chance."
Participant Feedback:
-
"The colors are too bright on the [Option B, Option A] is easier to look at."
-
"[Option A] looks way sweeter and the guy rips."
-
"[Option A] looks more fun. I like the little icons on the other option but this pic makes ME want to surf."
-
"Not everyone can do airs, and high performance boards are boring. Also, I like the minimalistic graphics and white space [in Option B], it's calming."