Skip to content
This repository has been archived by the owner on Aug 13, 2024. It is now read-only.

Update Design System Template #487

Open
19 of 24 tasks
khanhcao17 opened this issue Feb 9, 2023 · 17 comments
Open
19 of 24 tasks

Update Design System Template #487

khanhcao17 opened this issue Feb 9, 2023 · 17 comments
Assignees
@joshfishman @liz-zheng @Natalie-Aguilar @mklmrgn @khanhcao17 @kangina-tech @allthatyazz @TobyShanti
Labels
B: DS Team Initatives 👤 Design Role: UX design skill set
Milestone
B.1 Component Res...

Comments

@khanhcao17
Copy link

khanhcao17 commented Feb 9, 2023 •
edited
Loading

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

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 khanhcao17 added the 👤 Design Role: UX design skill set label Feb 9, 2023
@allthatyazz allthatyazz added this to the Figma Components milestone Feb 9, 2023
@allthatyazz allthatyazz changed the title DESIGN - Update Design System Template Update Design System Template Feb 13, 2023
@khanhcao17
Copy link
Author

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".

image

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

image

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
Copy link
Author

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
Copy link
Author

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
Copy link
Author

khanhcao17 commented Mar 23, 2023 •
edited
Loading

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.

image

@khanhcao17
Copy link
Author

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 



image

@khanhcao17
Copy link
Author

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
Copy link
Author

3/16/2023

Asad - Component Template and Guidelines V1

image

image

@khanhcao17
Copy link
Author

khanhcao17 commented Mar 23, 2023 •
edited
Loading

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)

image

@khanhcao17
Copy link
Author

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.

image

image

@khanhcao17
Copy link
Author

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

image

@khanhcao17
Copy link
Author

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
Copy link
Author

khanhcao17 commented Mar 24, 2023 •
edited
Loading

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

This was referenced Mar 28, 2023
Closed
Closed
@khanhcao17
Copy link
Author

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.

image

@allthatyazz allthatyazz mentioned this issue Apr 4, 2023
Open
9 tasks
@khanhcao17
Copy link
Author

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.

image

@khanhcao17
Copy link
Author

4/13/2023

Next steps

DESIGN

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
Copy link
Author

khanhcao17 commented Apr 21, 2023 •
edited
Loading

4/20/2023

Next steps

DESIGN

SUGGESTED RELEASE SCHEDULE

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

@khanhcao17
Copy link
Author

4/27/2023

Next steps

DESIGN

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

@allthatyazz allthatyazz mentioned this issue May 1, 2023
Open
@ExperimentsInHonesty ExperimentsInHonesty moved this to ✈️ IN PROGRESS ✈️ in DS: Project Board Aug 13, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@joshfishman joshfishman

@liz-zheng liz-zheng

@Natalie-Aguilar Natalie-Aguilar

@mklmrgn mklmrgn

@khanhcao17 khanhcao17

@kangina-tech kangina-tech

@allthatyazz allthatyazz

@TobyShanti TobyShanti

Labels
B: DS Team Initatives 👤 Design Role: UX design skill set
Projects
No open projects
DS: Project Board
Status: ✈️ IN PROGRESS ✈️
Milestone
B.1 Component Research
Development

No branches or pull requests
9 participants
@joshfishman @liz-zheng @ExperimentsInHonesty @Natalie-Aguilar @mklmrgn @khanhcao17 @kangina-tech @allthatyazz @TobyShanti