Iteration after P1 & P2

[allthatyazz]

Overview

We need to make iterations to the design of Figma Foundations based on the insights from usability tests to meet user needs better before testing the design on more participants.

Background

The first round of the usability test with 2 participants on the Figma Foundation cover page was concluded on April 28, 2022. During May 2 all-hands meeting, the team members (researchers and designers) generated sticky notes in Figjam for analysis together. The further discussion happened during the Design team meeting on Tuesday 5/4/2022. https://github.com/hackforla/design-systems/issues/264#issuecomment-1116889044

Assignees

• [x] @winoue90
• [x] @tamalatrinh
• [x] @JohnHaoHuang
• [x] @sandraberjan

Tasks

• Each Assignee makes a comment with the below template. Once you finish your design, come back to the checklist above and check off your name.

**Reiterate the design of different pages by [ your name]**
After completing these subtasks, scroll up to the top to check off your name in the main task.
- [ ] Review the report [Usability study analysis: Findings and recommendations](https://docs.google.com/document/d/1zJvP6aoOHSfICTW01w1o1JVcSxE7uJqC/edit?usp=sharing&ouid=105768861281432074552&rtpof=true&sd=true) by the research team
- [ ] Work on the design of the following pages in your Sandbox ( should be named after you) and as you work on a page/section please check the mark so we can track if there is a page that no one works on that. 
   - [ ] Start Here
   - [ ] Cover Page Instruction
   - [ ] Example page
   - [ ] Templates pages
- [ ] Below, add extra notes you may have regarding your process, challenges, recommendations for the design, future tests, the facilitating, etc. 

Resources

Figma Foundation FigJam Usability Report

[winoue90]

Reiterate the design of different pages by Wataru Inoue After completing these subtasks, scroll up to the top to check off your name in the main task.

• [x] Review the report Usability study analysis: Findings and recommendations by the research team
• [x] Work on the design of the following pages in your Sandbox ( should be named after you) and as you work on a page/section please check the mark so we can track if there is a page that no one works on that.
  • [x] Start Here
  • [x] Cover Page Instruction
  • [x] Example page
  • [x] Templates pages
• [ ] Below, add extra notes you may have regarding your process, challenges, recommendations for the design, future tests, the facilitating, etc.

[sandraberjan]

Reiterate the design of different pages by Sandra After completing these subtasks, scroll up to the top to check off your name in the main task.

• [x] Review the report Usability study analysis: Findings and recommendations by the research team
• [ ] Work on the design of the following pages in your Sandbox ( should be named after you) and as you work on a page/section please check the mark so we can track if there is a page that no one works on that.
  • [x] Start Here
  • [ ] Cover Page Instruction
  • [x] Example page
  • [ ] Templates pages
• [ ] Below, add extra notes you may have regarding your process, challenges, recommendations for the design, future tests, the facilitating, etc.

[JohnHaoHuang]

Reiterate the design of different pages by [ your name] After completing these subtasks, scroll up to the top to check off your name in the main task.

• [x] Review the report Usability study analysis: Findings and recommendations by the research team
• [x] Work on the design of the following pages in your Sandbox ( should be named after you) and as you work on a page/section please check the mark so we can track if there is a page that no one works on that.
  • [ ] Start Here
  • [ ] Cover Page Instruction
  • [ ] Example page
  • [x] Templates pages
• [ ] Below, add extra notes you may have regarding your process, challenges, recommendations for the design, future tests, the facilitating, etc. Resources

[sandraberjan]

05/10 I provided feedback on the designs for the Cover Page and Templates within Figma using comments I created a copy structure and options for the landing page in Figma I created two options for copy of the examples page with commentary in Figma

[tamalatrinh]

Reiterate the design of different pages by [ your name] After completing these subtasks, scroll up to the top to check off your name in the main task.

• [x] Review the report Usability study analysis: Findings and recommendations by the research team
• [x] Work on the design of the following pages in your Sandbox ( should be named after you) and as you work on a page/section please check the mark so we can track if there is a page that no one works on that.
  • [x] Start Here
  • [x] Cover Page Instruction
  • [x] Example page
  • [ ] Templates pages
• [ ] Below, add extra notes you may have regarding your process, challenges, recommendations for the design, future tests, the facilitating, etc.

[kelenelee]

The night before the P3 session, @sandraberjan @allthatyazz and I worked on an iteration that addressed P1 and P2 session insights.

5/18 meeting

After P1, P2, and P3 sessions, @sandraberjan @JohnHaoHuang @allthatyazz and I met 5/18 to discuss:

• how much of the instructions can be baked into the template so that users don't have to go back and forth between their file and ours?
• should text explanations be located in the kit, if PMs will be briefed by the stakeholder eventually?
  • should we even consider Figma newbies as an end user?

Meeting notes by @sandraberjan

• Sandra catches up Kelene on last design meeting. Kelene looks at Sandra’s flowchart; Sandra explains idea of mock-up, refers to K’s task analysis. John looks at Task Analysis; Kelene provides context.
• Kelene presents her example design of Start Here based on research recommendations
  • design choices
  • “New User / Existing Users” not necessary; did not add enough value to be its own thing; Kit is about bring in compliance
  • How to Navigate not necessary; users read to answer why question but if they want to navigate, they click around (trial and error)
  • More authoritative heading
  • Masonry from Cover page background added but light (visual cohesion); relevant image
  • Kept “Heads Up”; as per P2 changing her cover without having to
  • Visual of three navigation steps replaced by a sentence; appears simpler; one sentence versus three steps
  • Feedback
  • John: what we have is good, but still very difficult to make sure everyone understands the purpose of the kit. Two users: newbie and experienced. If he was user, he feels he would still be confused re. what he was doing Context issue; feels website platform is better
  • Sandra: can this be solved by action based steps? How can we help users who have mental models of websites how figma is used in this case? Guideline is meant to be read, Figma is interactive and meant to be copied.
  • Sandra shared examples of figma file structure templates. Entire template is duplicated; user just fills it in with their info. Is this the right step? (Yas: no, we decided one page at a time)
• Kit direction
  • John: users are designers and developers… Kit should expect minimum Figma skill/knowledge, but presenting this platform to someone who can barely use Microsoft powerpoint; what expectation can we have for them to use higher level tool like Figma. Any other solution to helping a new volunteer achieve the goal aside from the Figma interface? SCOPE issue. Who are we designing for? We can’t design for “anyone”.
  • Yas: Yes, we have to assume some level of knowledge on the part of the user. Kit is not a tutorial. We just want them to make these changes, not worried about what the EXACT minute step are and to teach them that. We provide a skeleton. That’s it.We do not need to provide that much context. Just tell them it’s a requirement. Why cover page (not just thumbnail): like the cover of a book. If someone opens the file, that’s what they see and it’s what that file is. Yas gave us context re. previous team’s design plan: Previous team had trouble distinguishing “Figma Foundations” from a Design System
  • K: components are in Figma so design/dev can collaborate. PMs will assign task to designers on our behalf. Education/assignment context is not our issue to fix. Research metrics: Time on task quant metric not valuable for success, determine success based on qualitative observation. Sandra idea: A/B test down the road with current prototype and new iteration
• Action Items
  • Researcher (and anyone interested) will look through project history; Figma audit; repo
  • UX writer will look into achieving authoritative tone in copy in the guide
  • John wants to present a mock-up of a possible solution
  • Sandra will mock-up her Template-first idea for Monday