search

LACMTA / design-system

https://lacmta.github.io/design-system/build/
0 stars 0 forks source link

Looking into potential Front End Design Systems #2

Closed albertkun closed 3 years ago

albertkun commented 3 years ago

Spreadsheet for comparison

https://docs.google.com/spreadsheets/d/1HYUQqiiOYfnGOO61yg-3PpjxMKN7gyapm4i-8ErH29w/edit#gid=0

matikin9 commented 3 years ago

Chat with Scott from UCLA

Before choosing Fractal they looked into PatternLab (didn't like) and Storybook (React-based). Fractal made sense, is easy to use for front-end developers, and was being regularly updated. Started with a component library with the intention to stay CMS-agnostic.

Design System uses a grid - but with WordPress and Gutenberg, the grid goes out the window so had to make the components work without a grid. Does have a UX person, but they are more involved in choosing what components to build. Took a lot of back and forth over 2 years to build. Accessibility impacted what they built a lot.

What did the team look like? A whole design team, a UX and a graphic designer building in Sketch. A lot of people have come and gone. Usually at any given time 4 full time, 2 contractors, 3 students - all junior to senior developers. Plus 1 UX designer and a 1 graphic designer Would like a full time QA person. Feels even this team is not enough.

How to get everyone on the same tools? A page in the documentation about contributing. Keeping it open to whatever tools.

Has instructions for reporting bugs, has a slack discussion channel that is linked to. Proposal submission and approval process is defined. Hard to find someone with time to manage the issue board and make sure things move forward. Tried to build a community around the component library - over 40k domains used at UCLA.

Launching beta release candidate at webcomponents.ucla.edu next Wednesday, and v1 released 2 weeks later. Next up will be the next level - WP & Drupal themes, then will integrate with Pantheon as the new host for their websites. Pantheon handles multi-sites for educational instituions really well.

They also have situations with websites contracted out, the idea is to provide the component library so they can stay in compliance with accessibility.

For the CSS, uses version numbers that have to be updataed with each release, and uses this in a separate repo in order to test. image

Built mockups within Invision. Some of the mockups didn't make it because they're too complicated. Can be hard to keep up-to-date. Grid used in the component library and within Invisino didn't match.

SplideJS - ADA compliant carousel

Advice - keep it basic and don't re-invent the wheel. Scott started with a grid, breakpoints, and colors. Then added in typography. Built slowly. Then added in ribbons, cards, etc. Worth it to create a grid - gave it a UCLA-specific class name.

For us - how would our roadmap look like? Base CSS, then a WP theme implementation. How long would this take over all? Quick wins before the WP theme?

Goal of the Design System - reduce overhead by not re-designing things over and over again.

Onboarding process - make it easy for new developers to get started.

matikin9 commented 3 years ago

Chat with Harlan

Tools shouldn't matter.

Who is Product Managing? We need to build X because users need to Y - generate the user story - "As a rider I need to be able to see upcoming trips so that I can make sure I get to work on time." Can act as the balance between design and engineering.

Simultaneously: Designer - design discovery Engineering - tech discovery

Align early in the process! Have the transition from design -> dev last longer so that it's not a toss over the wall.

At Mass.gov - worked on design system and content system simultaneously. Held design reviews twice of week (40+ designers)

At MBTA, built their own user panel. Had a team that only did surveys and data. Can advertise via digital screens. https://www.mass.gov/user-panel?utm_source=chalkmark&utm_campaign=annoucement-demo-test https://mbtabackontrack.com/performance/index.html#/engagement Ask data people to see if we can borrow their panel.

Nina's thoughts:

Lessons learned from initial collaboration within Figma: as the developer, I did not create enough dialogue to determine intended content behavior. I did not bring in the HTML prototype into our collaboration sessions for feedback.