Agenda for week of August 16th 2021

[Hanastevenson]

Overview

During the last week the three teams (Research, UX/UI, Development) have been focusing on Issues as well as how the individual teams will be working. This weekly meeting will be discussing Issues and the development team will be showing their process.

Action Items

• Hana to run through team updates
• Team to add their name to the roll call sheet
• Anh to present the Logo
• Update from Researchers (Nas)
• Update from Developers (Qiqi)
• Update from team members on the Figma file (Danielle)
• Address the question that the Guides team has
  • the #guides team is developing a tracker for all the guides across the org and to develop our ideation to publication pipeline. During this time we are cleaning up some guide issues that are not formatted like the rest (they were early). We came across these issues, and wanted to know how this material fits into the design system you all are building. Specifically, if these issues will still have guides, and if those guides will point to the design system, or the guides wont be necessary. Please reply in a comment on this issue and we will read it on our next check (Wed)
    • https://github.com/hackforla/product-management/issues/20.
    • https://github.com/hackforla/product-management/issues/24
    • Create a Guide: How to use Figma effectively on Open Source Volunteer Teams UI-UX#40
    • Additionally here are some other issues that I have noted that might be part of the design system. If they are, please change the label associated to the actual "Design Systems" label in the UX repo and remove the "Design Systems????" label

Resources

Design System Team Agenda overview

[qiqicodes]

DEV UPDATE

What we did last week

• Created in-house button component
• Styled in-house button component based on UI design in Figma
• Explored the following documentation tools
  • Fractal
  • Docusaurus

What we are doing this week

• Setting up individual dev environment to meet Hack for LA contributing guideline
• Writing documents in Wiki page to better help developers and design system team visualize and understand dev's finding
• Continuing in styling in-house button components
• Continuing in exploring documentation tools
  • @lorenzejay next steps: React DocGen
  • @cconner57 next steps: Styleguidist
  • @hanapotski next steps: Cupper
  • @qiqicodes next steps: Pattern Lab

[Hanastevenson]

@ahoang94 to continue working on Issue hackforla/admin#33 once that is completed we can present to Bonnie. Please do a mid check in with PM.

Research team have shared the Google Document hackforla/product-management#52 with the wider team to add their assumptions - @nasimbiglari will mention the team members in the comment section. Please give them a deadline of when you want their responses.

Research will also be working on hackforla/product-management#55. @irisxie to share the document with the wider team on Slack.

On Wednesday the UX/UI team will discuss the Issues that @daniellex0 has created.

Developers - see above.

Hana and Danielle to work through the Guides team questions above and look at the second draft - hackforla/product-management#58

PM to create new Issues and address Issues in the 'Review' column

[Hanastevenson]

@ExperimentsInHonesty please see below the responses from Danielle and I. I messaged you on Slack to put in a weekly meeting last week but assume you missed it. Do you have availability on Monday?

1. Create a Guide: Figma Effective Practices Create a Guide: Figma Effective Practices knowledgebase-content#25.

At this stage we are not covering this in our guide however will note that there is a separate guide on how to set up your Figma file effectively. Potentially this Figma Effective Practices guide can link out to our Design Systems Figma file as an example of how a Design System can look.

2. Create a Guide: Website Style Guide and Design System Create a Guide/Template: Website Style Guide and Design System knowledgebase-content#75

Our Design Systems guide can replace this issue, unless the purpose of this issue is to tell all PM’s to ensure their projects have Design Systems. Please let us know if it is the latter.

3. Create a Guide: How to use Figma effectively on Open Source Volunteer Teams Create a Guide: How to use Figma effectively on Open Source Volunteer Teams UI-UX#40

This guide does not relate to what we are currently working on.

4. Create a Guide: Figma Auto-Layout Create a Guide: Figma Auto-Layout UI-UX#62 .

This guide does not relate to what we are currently working on.

5. https://github.com/hackforla/UI-UX/issues/48
   **Create a Guide: Typography Effective Practices **

There are a few typography guidelines in the Design Systems guide, but it would be good to have a dedicated typography guide with more details. Whoever is working on this guide can reference the typography section of our guide.

6. Guide: Figma for developers (written by their friends at UI/UX) UI-UX#27
   **Guide: Figma for developers (written by their friends at UI/UX) **

This guide does not relate to what we are currently working on.

7. Guide: UX/UI Accessibility UI-UX#16
   **Guide: UX/UI Accessibility **

There are accessibility guidelines in the Design Systems guide, but it would be good to have a dedicated accessibility guide with even more details. Whoever is working on this guide can reference the accessibility section of our guide. Ciara Salmon is our dedicated Accessibility advisor, and is already attached to this Issue. Please discuss with her.

8. Guide: Designers Toolkit UI-UX#25
   **Guide: Designers Toolkit **

This guide does not relate to what we are currently working on.

9. Create a Guide/Template: Defining Hack for LA brand identity UI-UX#1
   Defining Hack for LA identity

This guide does not relate to what we are currently working on.

10. Create a Guide: How to use Figma effectively on Open Source Volunteer Teams UI-UX#40
    **Create a Guide: How to use Figma effectively on Open Source Volunteer Teams **

This guide does not relate to what we are currently working on.

[ExperimentsInHonesty]

Answers to the above

1. Create a Guide: Figma Effective Practices Create a Guide: Figma Effective Practices knowledgebase-content#25.
   At this stage we are not covering this in our guide however will note that there is a separate guide on how to set up your Figma file effectively. Potentially this Figma Effective Practices guide can link out to our Design Systems Figma file as an example of how a Design System can look.

Answer Please show me what you are creating at our next meeting.

• Bonnie Update 2021-10-20: Hana Showed me. Interestingly enough they have utilized their own icon schema to navigate their Figma Doc. It is my belief that they will eventually start adding icons to the Design Systems template that they will build as the template for other projects. I have added a link to their internal method to this issue Create a Guide: Figma Effective Practices knowledgebase-content#25

2. Create a Guide: Website Style Guide and Design System Create a Guide/Template: Website Style Guide and Design System knowledgebase-content#75
   Our Design Systems guide can replace this issue, unless the purpose of this issue is to tell all PM’s to ensure their projects have Design Systems. Please let us know if it is the latte

Answer: This is where whoever is working on the project who is collecting links to all the existing figmas for all projects, should put the links and notes about which examples are best to use. Then this issue could referenced when needed both by your project and by product manager and UI/UX people who don't yet have access to your design system guidance.

It was originally intended to be the way we developed new figmas, but I can revise it to just be a inventory of figmas with notes saying people should reach out to the design systems team if they need help with new project design system setup.

3. Create a Guide: How to use Figma effectively on Open Source Volunteer Teams Create a Guide: How to use Figma effectively on Open Source Volunteer Teams UI-UX#40
   This guide does not relate to what we are currently working on.

ok

[ExperimentsInHonesty]

4. Create a Guide: Figma Auto-Layout Create a Guide: Figma Auto-Layout UI-UX#62 .

Hana: This guide does not relate to what we are currently working on.
Bonnie: ok this issue is being addressed by UI/UX community of practice

5. https://github.com/hackforla/UI-UX/issues/48
   **Create a Guide: Typography Effective Practices **

Hana: There are a few typography guidelines in the Design Systems guide, but it would be good to have a dedicated typography guide with more details. Whoever is working on this guide can reference the typography section of our guide.
Bonnie: They have since started working on a typography section of the Design System, so they will be working on this as part of the Design Systems deliverables. We transferred the issue to them.

6. Guide: Figma for developers (written by their friends at UI/UX) UI-UX#27
   **Guide: Figma for developers (written by their friends at UI/UX) **

Hana: This guide does not relate to what we are currently working on.
Bonnie: ok this issue is being addressed by UI/UX community of practice

7. Guide: UX/UI Accessibility UI-UX#16
   **Guide: UX/UI Accessibility **

Hana: There are accessibility guidelines in the Design Systems guide, but it would be good to have a dedicated accessibility guide with even more details. Whoever is working on this guide can reference the accessibility section of our guide. Ciara Salmon is our dedicated Accessibility advisor, and is already attached to this Issue. Please discuss with her.
Bonnie: ok this issue is being addressed by UI/UX community of practice

8. Guide: Designers Toolkit UI-UX#25
   **Guide: Designers Toolkit **

Hana: This guide does not relate to what we are currently working on.
Bonnie: ok, and also please contribute to the issue ongoing see details here #89 (comment)

9. Create a Guide/Template: Defining Hack for LA brand identity UI-UX#1
   Defining Hack for LA identity

Hana: This guide does not relate to what we are currently working on.
Bonnie: agreed, and we have someone who will be working on this issue.

10. Create a Guide: How to use Figma effectively on Open Source Volunteer Teams UI-UX#40
    **Create a Guide: How to use Figma effectively on Open Source Volunteer Teams **

Hana: This guide does not relate to what we are currently working on.
Bonnie: ok this issue is being addressed by UI/UX community of practice

[kelenelee]

agenda for design team meeting on the 18th

Date
August 18, 2021

Attendance
Danielle, Anastasia, Hana, Anh, Ryan, Bernard

Meeting Notes
Rundown of timeline for first draft of design system (~3 weeks)

Review typography examples from other organizations (Design + content)
Trends:
6 different heading sizes
Text size: Multiples of 4 or 8 (even numbers)
Likes: Text examples that resemble real headings/text blocks
Con: Takes up more space on document

Inclusion of Design Tokens: Possible feature in future MVP (version hackforla/product-management#3?)

Horizontal vs. Vertical layout
Vertical: At quick glance, communicates information more easily
Do A/B testing for horizontal vs. vertical layout?

Typography guidelines
Useful information for people unfamiliar with industry standards for text
Can be built upon for Accessibility in the future

Actions
Team:
Add comments/contextual callouts to explain design decisions on Figma
Research Color examples from other design systems + start new drafts in Figma
Color naming
Bernard: Create new text styles in Figma
Anastasia: Create vertical version of existing Typography draft

For Other Teams
UX Research:
Potential research questions:
Does this layout make sense for users with limited experience with design systems?
A/B testing for horizontal vs. vertical layout

Resources
Type-scale.com