EVERY COMPANY NEEDS A UI KIT.

EVERY UI KIT TAKES A VILLAGE.

Swift development. Unified visual style. Portable tech. Future-proofing.

The benefits of a UI kit are easy to understand, but the effort and time involved is not. There is a definite recipe for success, and we had that success at InMarket. Here are some lessons I’ve learned along the way, and represent what the teams I led at InMarket did successfully.

CROSS-PRODUCT DESIGN SYSTEM

INMARKET • 2022

Because of a signed agreement with InMarket, I must keep most details vague around this project, so as to protect proprietary processes, prototypes, and designs. Instead, I’ve chosen to write about it like a how-to blog post.


KEEP A Commitment

It will take a while. Engineering and design must commit to the project, and hang in there until it is done. That means the company itself must buy in as well, so they don’t shutter the project halfway through.

You must also commit to a tech stack early – a future-proof one that has enough alignment with the talents of your people, and alignment with your technology to make overhauls as easy as possible.

Avoid fad libraries and frameworks. Stick with the ones you know work well, and that have an active and robust support structure.

ITERATION is your best friend

Your first version won’t be great, and nothing is going to get replaced all at once. Use the inevitable delays and pushback to your advantage. Hands down, this is product management. Think and rethink the steps that will get you to the finished product.

Design and build in tandem. You will have time to play with visual styles and trends while engineering builds the bones. Let stakeholders take their time weighing in on and settling into a new visual system. Remember that in the early phases it won’t matter what the colors, fonts and corners are, but that the components are in place and do what you want them to do.

Find the starting place – is it one full application, or is it a few key elements across all of them? I recommend the latter, but every company is different. What if the header is replaced on all your products – what challenges and learning do you gain before you get too far in? Which products need it most? What internal product is a good testing ground? These are good questions to be asking.

Start with out-of-the-box. From the basics, you can always modify to the particular needs of your products. The big frameworks have robust features and components that have undergone countless iterations. You might as well not start from scratch, when all this great work has been done for you.

Modify to make it yours. Chances are, you don’t want your visual system to look like any other. But if you do it right, your customers won’t notice or mind that it’s based on the same guts as many others.

HIRE AND DEDICATE TALENT

At the bare minimum, you need one great designer and one great developer. Any less than that, and the project is likely doomed. But with that small of a team, you can overhaul an entire suite of interfaces in one year’s time.

Use the same team all the way through. Time and again, I’ve seen that context-switching an engineer between UI Kit tasks and the tasks of other product teams does not work. In the same vein, switching from one engineer to another risks the new engineer derailing all the decisions that have been made thus far, and having too critical an eye on someone else’s work that they must then finish.

Documentation? Yes. Remember that the design system will be a product in itself that multiple teams will need to make a regular packet in their deployment. They must keep track of versions, and keep frontend efforts to a minimum so that they can focus on building the underlying software.

HAVE PATIENCE

The truth is that the frontend kit will be ready and available long before teams build it into their roadmaps.

Keep inspiring them with demos. Keep showing off POCs and design mockups using the kit.

When built right, you should be able to quickly build working prototypes instead of clickable mockups. The time and effort at the beginning pays off in the end with much more impressive, real-component mockups that engineers can whip up with one or two points worth of effort.

All the effort, delays, complications and mistakes along the way will be worth it – for the customers and the company alike. A design system is, in many ways, the Olympics of UX projects, because it touches upon every corner of a product design team, testing its capabilities, constitution, and clout within an organization. You can do it.

Previous
Previous

My Management Style

Next
Next

Emovi • Minimal Game App