_
Prototyping & Testing
Final Design Iterations
- Prototyping
- Testing
- Synthesis
- High Fidelity Iterations
- Accessibility
- Review
- Design language System
I CRAFTED a clickable mid fidelity prototype, TESTED it with participants, ANALYZED the results, CREATED high fidelity iterations, REVIEWED the design solution with peers, PRIORITIZED the feedback, and PREPARED the final design.
Usability Testing
Methodology
The testing session was remotely moderated over a recorded Zoom call.
Participants
There were six participants in the study. Four of the participants had already contributed to the project by being interviewed during the persona development phase. Two additional participants were selected from my personal contacts because they fit the demographic of a primary persona for the app.
Sessions
Each session averaged 30-40 minutes long including the briefing, follow-up questions and wrap-up.
Usability Component Tested
ERRORS:
I observed and recorded the participant’s errors and used Jakob Nielson’s 0 to 4 rating scale to categorize their severity.
SASTISFACTION:
I used the Single Ease Question (SEQ) to measure expected task difficulty, and actual task difficulty. The gap between the two ratings illustrated the interaction problems. I also asked each participant to rate the overall level of difficulty of the app.
Testing Synthesis
Feeling | Thinking | Doing
Data from the usability testing sessions was synthesized in an Affinity Map, organized in a Rainbow Spreadsheet, and then documented in a Usability Test Report.
Outcome
SOLUTIONS & NEXT STEPS
- Redesign "All Experts" button to make it absolutely clear that it is a button
- Enlarge chat text
- Create a "Record & Accept" button
Preference Testing
Fast Results
UsabilityHub was used to run two preference tests for screens of the mobile version of the app. I solicited 15 participants through a Slack channel and was able to get results in a few hours.
Outcome
SOLUTIONS & NEXT STEPS
Although Option 1 was still preferred, I learned that this button wouldn't be popular with the developers. The final screens were simplified and improved with no image below the CTA button.
Lessons Learned - Usability Testing
TIME
Factor-in additional time for discussion, questions and suggestions from the participants. This unstructured part of the test yielded the most useful feedback.
SIMPLICITY
Reducing the amount or complexity of the tasks will allow things to “sink-in”.
Lessons Learned - Preference Testing
COMMENTS
For studies that require a larger sampling of responses, I would build the preference test with a very clear question for the participants and ask that they provide a fully descriptive comment.
High Fidelity Iterations
With each iteration I was able to address any problems uncovered during user testing, and add more detail to both of the user flows in order to provide a more complete user experience.
Accessibility Design Strategy
Designing For Everyone
The MyScape responsive web app meets or satisfies the requirements of WCAG 2.1 for Levels A, and AA in the four success criteria principles:
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Operable
User interface components and navigation must be operable.
Understandable
Information and the operation of the user interface must be understandable.
Robust
Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
Accessibility Considerations
- Microcopy
- Glyphs
- Clear Language
- Reducing Cognitive Load
Starck Plugin Testing
Three tools in the Starck plugin were used to further test the app for accessibility by vision-impaired users.
- Focus Order
- Check Contrast
- Vision Simulator
Review | Teamwork
Making the Final Decisions
I enjoyed collaborating with my peers because it was energizing and it motivated me to improve my work. Reviewing their projects exposed me to other ways to solve user experience problems. I took my collaborative role seriously and spent the time to properly evaluate each project and provide constructive feedback. Each of my collaborators (shown below) were thankful for my contributions to their projects, and I was grateful for their contributions to MyScape.
- Comments posted directly to my Figma prototype
- Feedback gathered and implemented
- Less important items were backlogged for a later iteration
Organizing the Feedback
The comments were grouped into five categories:
- Errors
- Usability
- Appearance
- Great Ideas
- Feedback that I didn’t agree with
Design Language System
Following the Rules
The Root System for MyScape is intended to provide a solid foundation to help the team build, maintain and grow a cohesive and holistic web application.
