hackforla / hackforla/311-data

UXD - Design System Updates: Main components

Open
#1,968 27 comments 0 reactions 1 assignee Claimed by @greenishviolet View on GitHub
Complexity: Small Feature: Style Guide ready for design lead role: UI/UX Design size: 3pt
Dominant language
JavaScript
Stars
73
Forks
74
PR merge metrics
No merged PRs in 30d

Description

### Overview

We need to audit and evaluate the main components in our design to ensure they are effective and to see if we need to add any more components.

### More Information

The other goal for design system audits is to ensure we have a uniform and cohesive design that can be easily expanded and replicated in the future.

### Action Items
- [ ] for the following tasks, utilize the new Figma page: `Design System Review: Main Components` (link in references)
- [x] find the following Main Components present in the hand-off page (link in references)
- Navigation
- Footer
- Search and Filters Modal
- Info Modal / Action Required Modals
- Data is loading
- data was loaded
- search confirmation
- system messages
- Cookies Notice
- Privacy Policy
- Service Request Details Modal
- Map Labels
- [x] identify any other components that should be included in the above list
- [x] document your suggestions in a comment: [Version 1](https://github.com/hackforla/311-data/issues/1968#issuecomment-4340513650) | [**Version 2 (Final)**](https://github.com/hackforla/311-data/issues/1968#issuecomment-5149966003)
- [x] create an [informal guide](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=27938-10216&t=KjtqTZpErknXqRf6-11) with examples of when to use each component
- [ ] confirm your identified Main Components library with design lead
- [x] move ticket to In Review column
- [x] add label `ready for design lead`
- [x] in a [comment](https://github.com/hackforla/311-data/issues/1968#issuecomment-4998150993), outline considerations for expanding Main Components as needed
- [x] in a [comment](https://github.com/hackforla/311-data/issues/1968#issuecomment-4998160459), provide an assessment if the current "Main Components" are sufficient: should more components be added in the short-term?

### Designer Resources

311 Data Figma Pages
- [Handoff Page](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=4081-9245)
- [Design System Review: Main Components](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=4081-9252)

External References
- https://www.geeksforgeeks.org/7-main-components-of-a-website/
- example: [Uber Design System Components](https://base.uber.com/6d2425e9f/p/556814-components)
- component library section [Design Systems 101](https://www.nngroup.com/articles/design-systems-101/)
- examples to consider: [10 Essential Design System Components](https://www.uxpin.com/studio/blog/design-system-components/)

### Links
- [Component Inventory and Evaluation](https://docs.google.com/spreadsheets/d/1-b5yfOsvietX4lR98AllDhzzR1zGOtqaccgUQxhqnus/edit?usp=sharing)
- [Component List (version 1)](https://docs.google.com/document/d/1qt7MKOqEbtj8pTcZd0xL5oiPRWlT7Vl2VI9AnayTwWE/edit?usp=sharing)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.