MessageMedia UI component library

Skills

Design leadership Facilitation

Background

  • The organisation had a new product team with new UX designers working with existing squads of developers.
  • Design had been previously outsourced and was generally poor with little consistency.

Challenge

There were several challenges to this work:

  • The  UX and development teams had no view of any of the components used in the user interface and this lead to problems when discussing and working UI elements as there was no shared language (i.e “Select” vs “Dropdown”)
  • Development time was slow due to lack of any framework; all components were individually developed.
  • There was no scope to stop feature development; any plan had to allow for new feature development at the same time as migrating to the new framework.

Actions

I brought together different teams (front end and back end developers along with product managers) to select a React framework that would give us a basis for future work.

Once a framework was selected by this group, I created a process to review components and move to new components.

Results

  • The new framework lead to improvements to the visual design and improved relationship with developers.
  • The migration of UI elements to the new framework was factored into the new product design process which was created at the same time.
  • The framework sped up development which allowed us time to get more user involvement in the design process.
  • Used the React visualisation tool – Storybook.js – to create a single code/design styleguide.

 

Product portal before framework