Update Design System Template

[khanhcao17]

Overview

Updating the design system template for more general use.

Background

@allthatyazz and @joshfishman Would y'all mind helping me fill out more background information as to why we've started this issue?

Action Items

• [ ] Update Design System template.
  • [x] Look at HfLA Website DS
  • [x] Look at prior research for best practices.
• [ ] Research and thoughts
  • [x] 2/15/2023 @khanhcao17
  • [x] 3/6/2023 @winoue90
  • [x] 3/7/2023 @khanhcao17
  • [x] 3/9/2023 @kangina-tech
  • [x] 3/20/2023 @khanhcao17
  • [x] 3/23/2023 @khanhcao17
  • [x] 4/13/2023 @khanhcao17
  • [x] 4/20/2023 @khanhcao17
  • [x] 4/27/2023 @khanhcao17
  • [ ] [M/D/YYYY](link to comment) @tag your own name
• [ ] Component template updates
  • [x] 3/7/2023 General template @khanhcao17
  • [x] 3/8/2023 General template @liz-zheng
  • [x] 3/16/2023 Guidelines @TobyShanti
  • [x] 3/16/2023 General template @khanhcao17
  • [x] 3/16/2023 Buttons template @mklmrgn
  • [x] 3/17/2023 Buttons template @khanhcao17
  • [x] 3/29/2023 General template @khanhcao17
  • [x] 4/13/2023 General template @khanhcao17
  • [ ] [M/D/YYYY](link to comment) description of the updated template portion @tag your own name

Resources/Instructions

Figma Design System Template Github issue about Storybook template Github summary of all research done by the developers Github HfLA DS Background Figma HfLA Website DS Google Doc Design Systems Guide for Designers HfLA Website Toolkit Stakeholder Clarifications - 3/6/2023 Video

[khanhcao17]

2/15/2023

HfLA Website Design System Research

I found a disclaimer for their DS saying that "it is slightly unusual" to include "code and measurement annotations" and they are planning on removing the code soon because there will be "a dedicated design system documentation for developers".

I also found that they talk about the developer design system here but don't have a connected link yet.

And then I found these two links: Reusable Components Wiki Article and Design System Website Page

We also found the original designer's (Danielle Nedivi) case study about it.

My conclusion from seeing these things is that the next step should be just creating an easy to copy sticker sheet of different parts of a design system (ex. color, typography, buttons, icons, etc.).

[khanhcao17]

3/6/2023

Wataru’s points and suggestions of Component Library

As I discussed with Yas, it would be very difficult to dictate specific requirements (i.e. what variants, css, etc) for the component library unless we know for sure that all the teams are utilizing the same component library for their code (i.e. MUI, bootstrap).

That being said I think it is very possible for our team to ideate and create a general format of how components are laid out and what information is included/presented.

Link to MUI

As a example, the above is a preview of MUI’s button component page of their DS on Figma.

If you breakdown the what’s included, it’d be

• Title card; Containing component name as well as links to documentation. (It would probably be good practice to include a link to the correlating page for the actual component for code to have access to information like level of customization, styling, behavior) Example here
• Component Variants: Clearly lists out all the variant properties and has a consistent layout of how to display the variants.
• Examples: What the component will look like, behave, use case of the components in the product.

I think if we want to actually make this work, there needs to be conversations with designers and engineers from the other teams to better understand their needs and how they handle their handoff. It would also be a good chance to understand what component library they use as a base for their product, I would say it is very unlikely that they are making their branded components from scratch.

Another keynote to keep in mind is unlike a lot of famous design systems, these team probably have a limitation on pages/projects that they can create for their HfLA figma. So instead of one component per page, they might have their entire DS in one page. This is less than ideal but we would have to keep that in mind when designing how things should be laid out.

These are my key thoughts and some things to look out for. I would suggest looking at other famous DS figma files to see what kind of variants and layouts they use. Just keep in mind, the DS is both for the designers AND developers.

Let me know if you have any questions or want clarification on anything.

[khanhcao17]

3/7/2023

Khanh’s Thoughts

• Keep developer section.
• Want to provide guidance on utilizing components.
• Get different component parts that can be built apart.
• Doesn’t need to be pretty necessarily at first, focus on utilization.
• Developer aspect of design system - we need an actual developer who can help guide us through the developer portion and talk about how to attach GitHub links to the components.

Khanh’s thoughts on next steps:

• Week 1
  • Create a very basic template that teams can copy off of (not even specific to any component).
• Week 2 and 3
  • See if Bonnie is okay with the basic template before continuing to build more.
  • Research/observe/record what components different teams are using in order to build a reference bank of sticker sheets.
• Week 4 and 5
  • Build out the different sticker sheets.
  • Get the Bonnie approval.
  • Make it pretty.
• Week 6 and 7
  • Create a presentation for all of HfLA
  • Officially release and announce the reference bank.
• Post Release
  • User testing research.
  • See what other details are needed to provide the best possible base for projects.
  • Work with a developer to better update the components how Bonnie had spoken about with the GitHub links.

Content involvement

• We need to provide guidance on how to best utilize the template like a very basic how-to.

[khanhcao17]

3/7/2023

Khanh - Component Template V1

• Added a column for a descriptive name because that's the standard in design systems and it will help designers differentiate buttons as well as help developers give them class names.
• Added descriptive details as it's own column as well as made it so the button would not be to scale in order to make the process of copying the measurements less messy.
• Added columns for designer/developer update dates in order to force a method of communication to make sure that any new designs have their codes updated as well.
• Switched the usage from a link to a have a more descriptive meaning of when to use each component.
• The point of making it like this template and adding an example not to use is so that other teams can just use this template and insert their own components in.

[khanhcao17]

3/08/22

Liz Zheng - Component Template V1

• Changed the layout to scan horizontally so we can add CSS & annotations for colors in a way that’s compact and stay stylistically consistent
• 
Incorporate states & color together since it would be helpful to how they change in different states and because the css code integrates both
• Remove duplicate rendering of all sizes in different states 



[khanhcao17]

3/9/2023

Debbie's Thoughts

Things to remember when creating this library (even if it is only a skeleton):

1. Know what framework or library is being used by most of the projects in HfLA. As of the moment, the most popular one is React framework. This is a good thing as it is easy to change the UI for teams as it is a very flexible framework. Maybe focus on being inspired by materials as opposed to Swift UI as it is the most common one.
2. Must understand what the goal for most of the teams are as this will also inform the process and thus make it easier and create a product that is more usable in the vast majority of projects. This includes contacting PMs, Lead Designers and their Lead Developers to understand their process and the things they find to be headache inducing.
3. While we will be indicating the HfLA colours under the colours category, it would be proper to create the components in greyscale as this will make it easier for teams to change the overrall aesthetics to something that they much prefer (or not. I mean, HfLA is the main boss so maybe we are going to have to use the colours at the end of the day and make every project look soundly the same).
4. We are going to use the Atomic Design process as suggested in the previous HfLA Design System research paper. It is the simplest way to go through the whole process and cover even the smallest of things we might have forgotten about.
5. While it works to have a component library that can be pulled on by all the projects, our main focus should be in making everything neutral and thus flexible. This means that even though materials favours rounded corners of buttons, we should consider adding sharp corner buttons for projects that want that and many more such small things.

The library should have the following things:

• Logo (HfLA’s specifically should they decide they want to credit at any point in their product).
• Grid.
• Layout.
• Typography (Should consider using a more neutral font like roboto so that more can change it to their preferred font).
• Colours (HfLA colour system).
• Corner (button acceptable stuff).
• Icon? (not sure but seems reasonable to have)
• UI components.

More a point to ask/note/decide upon:

• Are we looking through the branding of the whole thing?
• Should we consider the styling of the brand voice?
• The graphic elements used (if any that is)?
• Are we considering things like pictures used and should there be guidelines to those as well?
• In that respect, do we call the whole things a component library or do we call it a something else should we decide that those are things that ought to be included in the whole thing.

Specifity of the components

• Colour - primary, secondary, success/error, grayscale (while primary and secondary are up to the discretion of the teams, I believe it will make sense for us to give the guide for the latter two as those must and should be universal and influenced entirely by accessibility standards).
• Typography - I believe should have a top limit and a bottom limit mostly for accessibility than aesthetics but fortunately, they will go hand in hand when done right. Other than that, we should give users options on line and word space size. Golden font ratio? It is the safest bet.
• Icons - We can use HfLA as the backdrop on this because I am assuming every team has their agreed upon icons but then because a lot of them have pulled from their design system, I think it will be easy to assimilate this.
• Buttons - rounded and squared. normal, hoover, press, disabled (this is that part of atom system design that we are going to employ as advised in the DS google research paper). Primary buttons (the ones used everywhere), secondary buttons (mostly the ones that use icons and are used sparingly) and word buttons (links and whatnot)
• Inputs - this one is going to take a lot of manpower. It shall also have the normal, hoover, pressed, disabled and error options. Checkbox, radio button, switcher, tip tool, drop down.
• Should we add progress bars and charts? I am thinking yes to progress bars but I don’t know about charts.
• (We should remember to add the molecules part by combining these ideas into how it might look like when done right)
• Spacing, grids and columns - I also believe this is best pulled form the HfLA site as we have no way of creating something that can be universal for all the projects involved.
• Dialogue modules - while this falls heavily on the content team, I think it is best to have them be universal for all teams as they dictate similar things like succes, error, extra info etc.
• Shadow style - is this stretching it with the teams?
• Navigation styles - there are plenty enough to be diverse enough to be picked by the different teams.
• Avatars - maybe it will be needed? who knows.

[khanhcao17]

3/16/2023

Asad - Component Template and Guidelines V1

[khanhcao17]

3/16/2023

Khanh - Component Template V2

• Adopted Liz’s vertical layout
• Still utilized the same headers that I had suggested before
• Added back the link to usage for reference (in accordance to Liz’s suggestion)

[khanhcao17]

3/16/2023

Mike - Button Components Template

• I think we should use the column idea you made and encourage designers to use it in a modular way, because there are so many ways they can go with it
• I’m thinking we can give them the template, then instead of giving them an example of just another column, we give them an example of a whole set of buttons
• I think it would be good to save space by adding hover/disabled states the way I use them here
• I’m still adding the details to the example, but really think this (or something similarly modifiable) is smart way to do it. This way it’s flexible based on whatever types or numbers of buttons they are using, but still has all the important info that Bonnie believes developers need.
• I also added a component set with variants to use in the design. I guess the question is where to put it, and what annotations of instructions to give in regard to using it.
• If the designer changes the button in the component set, it will automatically update the button in the dev-friendly table. They would only have to change the annotations of whatever changed (the color, padding, etc), and the css. The usage would likely be the same.

[khanhcao17]

3/17/2023

Khanh - Component Template V3

• Added the states as variants
• Added the color hex onto the template as well for the different variants
• Gave the three different basic button size examples

[khanhcao17]

3/20/2023

Khanh’s Update from the meeting with Bonnie

• Rather than a “Universal Design System Template” that can be adapted by all the teams currently under HfLA, Bonnie wanted something more along the lines of a “HfLA Design System Starter”
  • Meaning that she wants a whole design system that can be copied and pasted for any new projects that has components already built out with code that other teams can just tweak
• For the component list, we’ll look at the “Materials UI” to help us decide what to build out
• From “Khanh’s Template Update (3/17/2023)” Bonnie would like us to add:
  • “Base published date”
  • We need to make the descriptive details component accurate
  • Any repetitive details will just live in the same box

[khanhcao17]

3/23/2023

Khanh's thoughts for next steps

CONTENT

• Work with content team to figure out the correct name for this template
  • My suggestion is “HfLA Design System Starter”
• Figure out how we are going to combine the previous project of “HfLA Design System Template” with this new “HfLA Design System Starter”
• Work with content team to create a side-by-side guide for using the starter

DESIGN

• Create a table for color with needed basics

  • 499

• Create a table for typography with needed basics

  • 500

• Go through and list out the components that each of this project utilizes and then seeing what components can be combined/are the same to create a full list of components that we’ll have to build out in the next couple of weeks

  • 507

• Refine the base component table to build all the other components similarly

[khanhcao17]

3/29/2023

Khanh - Component Template V4

• *This is still just an example of the buttons sticker sheet.
• Updated for the base template to be the shaded example in order to offer a slight explanation to what each category is filled in for.
• Added the publish update date - Does it make sense? Does it feel needed?
• Each button column is easy to copy and can be deleted easily as well.

[khanhcao17]

4/6/2023

Khanh - Component Template V5

• *This is still just an example of the buttons sticker sheet.
• Added mobile version of one of the buttons.
• Added arrows to denote same information is being used across multiple variants.
• Arrows point towards the information instead of away from information.

[khanhcao17]

4/13/2023

Next steps

DESIGN

• [x] [COMPLETE] Create a table for color with needed basics @liz-zheng
  • *May go back to update stylistically to match entire component library.

  • 499

• [ ] [In progress] Create a table for typography with needed basics @mklmrgn

  • 500

• [x] [COMPLETE] Component audit to prioritize component templates to build @TobyShanti @Natalie-Aguilar

  • 507

• [ ] [In progress] Create "Menu" component template @liz-zheng

  • 511

• [ ] [In progress] Create "Button" component template @khanhcao17

  • 498

• [ ] [In progress] Create "Text field" component template @Natalie-Aguilar

  • 513

• [ ] [In progress] Create "Select" component template @TobyShanti

  • 514

SUGGESTED RELEASE SCHEDULE

• Component templates to create for first release:
  • Button
  • Text Field
  • Select
  • Icons
  • Button Group
  • Checkbox
  • Accordion
  • Card
  • Menu
• Component templates for V2:
  • Radio Group
  • Tabs
  • Grid
  • Autocomplete
  • Avatar
  • Chip
  • Divider
  • Material Icons
  • List
  • Tooltip
  • Backdrop
  • Drawer
• Component template release for V3:
  • Floating Action Button
  • Link
  • Badge
  • Bottom Navigation
  • Stack
  • Date & Time Pickers
  • Table
  • Alert
  • Dialog
  • App Bar
  • Pagination
  • Stepper
  • Box
  • Container
• Component template release for V4:
  • Slider
  • Switch
  • Progress
  • Skeleton
  • Paper
  • Breadcrumbs
  • Grid v2NEW
  • Snackbar
  • Click-Away Listener
  • CSS Baseline
  • Modal
  • Data Grid
• Component template release for V5:
  • Rating
  • Transfer List
  • Toggle Button
  • Speed Dial
  • Image List
  • Hidden

[khanhcao17]

4/20/2023

Next steps

DESIGN

• [x] [COMPLETE] Create a table for color with needed basics @liz-zheng
  • *May go back to update stylistically to match entire component library.

  • 499

• [ ] [In progress] Create a table for typography with needed basics @mklmrgn

  • 500

• [x] [COMPLETE] Component audit to prioritize component templates to build @TobyShanti @Natalie-Aguilar

  • 507

• [x] [COMPLETE] Create "Menu" component template @liz-zheng

  • 511

• [ ] [In progress] Create "Button" component template @khanhcao17

  • 498

• [ ] [In progress] Create "Text field" component template @Natalie-Aguilar

  • 513

• [ ] [In progress] Create "Select" component template @TobyShanti

  • 514

• [ ] [In progress] Create "Card" component template @mklmrgn

  • 516

SUGGESTED RELEASE SCHEDULE

• Component templates to create for first release:
  • Button
  • Text Field
  • Select
  • Icons
  • Button Group
  • Checkbox
  • Accordion
  • Card
  • Menu

[khanhcao17]

4/27/2023

Next steps

DESIGN

• [x] [COMPLETE] Create a table for color with needed basics @liz-zheng
  • *May go back to update stylistically to match entire component library.

  • 499

• [x] [COMPLETE] Create a table for typography with needed basics @mklmrgn
  • *May go back to update stylistically to match entire component library.

  • 500

• [x] [COMPLETE] Component audit to prioritize component templates to build @TobyShanti @Natalie-Aguilar

  • 507

• [x] [COMPLETE] Create "Menu" component template @liz-zheng

  • 511

• [x] [COMPLETE] Create "Button" component template @khanhcao17

  • 498

• [ ] [In progress] Create "Text field" component template @Natalie-Aguilar

  • 513

• [ ] [In progress] Create "Select" component template @TobyShanti

  • 514

• [ ] [In progress] Create "Card" component template @mklmrgn

  • 516

• [ ] [In progress] Create "Icons" component template @fuzjan81

  • 505

• [ ] [In progress] Create "Navigation" component template @Jiyon

  • 506

SUGGESTED RELEASE SCHEDULE

• Component templates to create for first release:
  • Button
  • Text Field
  • Select
  • Icons
  • Button Group
  • Checkbox
  • Accordion
  • Card
  • Menu
  • [NEW] Navigation
  • [NEW] Header and Footer