FEDUP @ Flick Electric

Shaun & Sophie created their own design system to help enable them and their colleagues implement a robust and consistent UI throughout the Flick Electric Experience. They’ll share the important lessons they learned along the way, and inspire you to implement your own.

The setting

We’re at an interesting point in Flick Electric’s life, where the company is gradually shedding its young ways, and becoming a more mature company. We’re replacing the ‘move fast and break things’ mindset with one focused on producing higher-quality code, code that is more readable, and reliable.

It’s about the UI, and UX

The user interfaces within the Flick Experience are no different. This is where Sophie and Shaun come in. While our dev team struggles with a micro-services architecture we’ve inherited, we (the product design team) can make our Ruby developer’s lives easier, by preparing tools and documentation for them, while also helping our product managers communicate the work involved by producing research-tested, high-fidelity, and consistent wireframes that are easy to translate into functional UIs.

Scaling up product development

How do two people scale up and help 15 or so of their colleagues with all the front-end work? Well, we think in patterns. We work with the mediums that we’re effective with, in this case HTML and CSS. So, we built a pattern library, and it became our multiplier. It sucks in experience, cross-browser testing, prototyping, and some YAML. It then spits out documentation, HTML, and all the assets you need to succeed.

You’ve heard about pattern libraries before, but ours is a little different. We built it from scratch so that it can scratch our itches, and we love working with it.

Take aways

As with most systems, it’s the people-driven aspects within those systems that are the most challenging. We’ll share some of those challenges and how we solved them. We’ll also share our passion for design systems: we think their efficacy goes beyond just hammering out designs and front-end code.

Thank you! -Shaun & Sophie

Topics covered:

• Front-end development
• Design Systems & Pattern libraries
• Product design
• Cross-discipline skills working together
• Micro-services and their UIs
• Specialisation vs. generalisation
• Services within a product company
• Documenting, testing, and sharing UIs
• Static site generators (Middleman - made in Ruby)
• Gem + Node package development
• Implementing distributed UIs in Rails, React, and Middleman