Laying the foundation
We didn't have a basic foundation. We didn't have a style guide. We had a vague idea of what typography, colors, icons, spacing and information architecture we should based on existing designs.
We worked on designs separately and reviewed our work daily to: (a) identify patterns and (b) course-correct when divergences surfaced. We standardized components and left room for creative freedom.
As the library grew, we organized each component into an artboard: typography, colors, buttons, dropdowns, input fields, tiles and more.
We knew that this was a challenging project. There were things we wish we would have done differently.
There were sets of components that repeat often. For us, these components are tiles and progress trackers. Looking back, I wish we had taken more time to think about the progress trackers and come up with a stronger component and more explorations.
- Documentation: Delineate what you should use as well as what you shouldn't use. Elaborate on why.
- Active Maintenance: We automatically sync our libraries in real-time.
I worked with our front-end engineer and we came-up with a simplified approach by scrapping the mousetrails. We moved forward with the implementing the mouse hover and mouse click interactions.