Audit the style of the website.

[KPHowley]

Overview

In order to achieve consistent styling and a working style guide, we should come up with an Audit of components of the site. After this is done we can then create a consistent style guide and work on standardizing components.

Action Items

• Perform Audit of site
• Determine standards
• Determine which changes need to be made
• Create style guide #972 - action items listed below for ease

Create detailed information about:

• Notifications
• Popups
• Errors
• Close Crosses
• Tooltips
• Colors
• Menus
• Buttons
• Fields and Labels
• Typography
• Iconography
• Margins/Padding (CURRENTLY READJUSTING CURRENT SCREENS TO FIT)
• Logo
• .... all other components deemed necessary (CURRENTLY ADDING MISSING SCREENS TO SYSTEM)

Resources/Instructions

Current Design System

Sample documents from other projects:
https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website

https://www.figma.com/file/BJL6ZHfjrxVhU8jvD9gB3P/HomeUniteUs-Everything-Figma?node-id=1%3A934

[KPHowley]

@anamsha - have you been actively working on this? if not I'll just un-tag you for now on this until you are

[mojimoh]

Please provide update by Wednesday

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (if necessary): "Add any pictures that will help illustrate what you are working on."

[Noushie]

Please provide update by Wednesday

All responses are bolded

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"

We still have to complete the unchecked options above (will be updating those each week accordingly)

In terms of what we are currently working towards: We are updating the 'website facing screens,' collecting what we need dev to change (in terms of typography/style of on-page warnings), and getting layout/grid information sorted (to scale the designs according to the current website)

2. Blockers: "Difficulties or errors encountered."

I think busyness/time is a big blocker... we will try to get this done ASAP

3. Availability: "How much time will you have this week to work on this issue?"

Estimated 2-5 hours

4. ETA: "When do you expect this issue to be completed?"

Aiming before 2/25 (as discussed in the last meeting- giving about a month to complete but will try to do it before then)

5. Pictures (if necessary): "Add any pictures that will help illustrate what you are working on."

[Noushie]

Checklist updated

[Biuwa]

@Noushie please add a link to the current figma file here

[Noushie]

Link to Current Figma File

[Noushie]

@Biuwa @mojimoh @entrotech

Just for reference - once all of it is fully organised it will be in the 'full design system' tab. Above is a screenshot for a general idea of how it will look all together (not yet fully populated - but we are in the process of that)

[Noushie]

### 3/8 Update
Progress: "What is the current status of your project? What have you completed and what is left to do?"

Working on updating screens to the new grid and organising all of the design components we've worked on into the 'design system' page. Also annotating screens with visual changes that need to be done to be more consistent

Blockers: "Difficulties or errors encountered."

A lot of this work is time consuming/busy work, so a) carving out the time to do it has been a blocker

Availability: "How much time will you have this week to work on this issue?"

5-6 hours

ETA: "When do you expect this issue to be completed?"

If I can grind it out, hopefully by next week - design systems have to constantly be updated anyway, but to at least have something more current/up-to-date to show would be helpful

Pictures (if necessary): "Add any pictures that will help illustrate what you are working on."

Example of readjusting wireframes

Example of write-ups for components (i.e., how they're used/what they look like, etc.)

Example of annotated screen (the updated version will be next to it)

[Noushie]

3/15 Update

Progress: "What is the current status of your project? What have you completed and what is left to do?"

Finishing dev changes to match current design system

Blockers: "Difficulties or errors encountered."

Have been really sick these past few days

Availability: "How much time will you have this week to work on this issue?"

N/A

ETA: "When do you expect this issue to be completed?"

End of week

Pictures (if necessary): "Add any pictures that will help illustrate what you are working on."

[Biuwa]

• Anousha has completed the documentation in Figma and EPIC: TDM UI Adjustments #1340 will be the documentation issue for the website audit