Usability Testing for High Fidelity Prototypes

[lrchang2]

Overview

We need to conduct usability testing of the high fidelity prototypes of the desktop and mobile version to see if the design is user friendly.

Action Items

• Develop documentation for usability testing
• Conduct 2 usability tests (one for desktop, one for mobile) using the Script and put notes in documentation
• Put noteworthy observations about each test into FigJam Affinity Map under Usability Testing V2
• review results and determine edits as a team during 1/12/22 team meeting
• develop next steps

Resources/Instructions

Usability Test Script
Version 2 of Usability Testing Notes (tasks are the same as usability testing V1 for low/mid fi)

Figma for High Fi Wireframes (Mobile)
Figma for High Fi Wireframes (Desktop)

Figjam affinity map for usability results

[lrchang2]

testing will be conducted by all designers over the course of 12/21/2021 to 1/5/2021

[melissamurphy]

Progress: Desktop test completed.
No difficulties other than some Figma buttons being nonoperative to the participant.
I can work 2 additional hours on this issue this week if we need more tests, interpretation, or a presentation.

[ashleyxz]

Progress: Desktop usability test completed.
No difficulties or blockers.
Availability: conduct the mobile test this week.

[lrchang2]

first round of review conclude that:

• desktop menu needs to be bigger
• talk to workshops about "waitlist" call to action (does it makes sense while workshops do not exist?)

another round of result review with team at team meeting on 1/12/22

[lrchang2]

final edits that will be made to all high fi wireframes:

• enlarging desktop menu (words)
• adding exit button for mobile menu
• make carousel timing longer (both mobile and desktop)
• make button look like it's been clicked on

next steps are to work on spacing, ordering of information and copy.

[KaylenaN]

I enlarged the desktop menu headings from 20 to 26.
The carousel timing is longer for both mobile and desktop - from 2000ms to 6000ms.
I added the same menu button to the mobile menu, when clicking it, it exits.
I also added an interaction for the about heading on the mobile menu. When you click About it will now go to the about page.
If I have time, I'll work on making the buttons look like it's been clicked.
We can also discuss spacing and ordering of information when we get there.

Everything seems to be good! Let me know.

[lrchang2]

edit: make header sticky

[KaylenaN]

I tried to find different ways to get this done. I tried creating a layer over the header to be able to create the fixed position for the header. However, it's not possible to do so when it's on an auto-layout. I'm going to share a link that can better explain what the issue is. Figma doesn't allow for constraints on an auto-layout.

https://forum.figma.com/t/how-can-i-get-fix-position-when-scrolling-option-under-constraints-section/3782/5

Instead, I created the same pages without the auto-layout. I placed it under the most recent frames in Figma.
I thought this would be a good way for developers to see what we want done. This doesn't have to be permanent, but I thought it would be the best way for now. Let me know what you think. Or if you have any other ideas.

https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

[lrchang2]

@KaylenaNguyen can we close out this issue?