A UI kit creation guide: 0 to complete (3-part series)
Part 1: Discovery
✨ Intro: How to build a UI kit ✨
Just kidding. There are a thousand ways to build a UI kit, so I won’t bother telling you how to build one. But I will share how our team went about building one for Figma’s design community.
Some of you might be asking, “What is a UI kit?” A User Interface (UI) kit is a downloadable file that anyone can use, typically including custom color swatches, font styles, icons, components, and complete screens for a digital product. Whether mobile, tablet, and/or desktop designs, they can be used for inspiration, customization, and research. There could be any number of reasons why someone would download a UI kit, but they’re predominantly for designers to use when they need to turn around a quick design product or need inspiration/pre-made designs for whatever they’re working on.
Context is everything, so I’ll start at the beginning. Our mobile solutions agency, Atomic Robot, was in the midst of landing a huge client for a very well-known brand specifically for a new Internet of Things (IoT) feature to be added to one of their products. It was a project so big we would’ve had to hire a few more designers — yea, that big. Anywho, we made it through interview after interview, until we didn’t. We were runner-up. So needless to say we didn’t hire any more designers, boooo!
In spite of this, or rather, inspired by this, our CEO created a product brief for our design team to create an IoT lighting product to be shared as a UI kit for the Figma community.
There were some key requirements to consider before we dove into our research phase.
🔷 Support iOS & Android
🔷 Support Apple Watch
🔷 Onboarding
🔷 Manage lighting for scenes
🔷 Support widgets
Sounds fun right? It was.
In the Beginning: Research
Our team started from what we consider the beginning. Competitive Research. Lots and lots of research on existing IoT products. We divided and conquered six different IoT apps, signing up for accounts and diving head-first into each product. We took screenshots and screen recordings, from our onboarding journey through the entire product experience.
From there, we took notes on what was working and where we could find areas of opportunity to improve the experience. We broke it down into key takeaways and other takeaways. Key takeaways were features we strongly considered including in our product, the other takeaways were features that we thought were interesting or nice-to-haves, but not necessarily needed for our scope of work.
In addition to competitive analysis, we also created a survey for IoT lighting users to get their take on the best products on the market, as well as ones to avoid. This feedback was great because we had first-hand accounts from users that gave us valuable insights into what features they liked and why. This encouraged us to include popular features in our product that we might not have otherwise.
Using all of the features from each product, we created a feature list table so we could clearly compare and contrast which products had what and how successful those features were.
Personas
Who are our users? Once we had a good idea of what our feature list would likely include, we created two very different personas to keep them in mind while designing, to help ensure we were indeed designing for our users.
🧔 George, an IoT product consumer, doesn’t fully understand IoT devices, but he can usually figure it out after some basic troubleshooting.
🧑🏻💻 Meghan, a young tech engineer, with an expert level of IoT knowledge wants to improve the connectivity of her IoT devices at her home so they streamlined as one smart system.
User Journeys
With the personas defined, we began using our feature list to map out how the users might use our IoT lighting product in four different user journeys.
💡 Onboarding: George sets up his first IoT light in-app and in HomeKit.
💡 Adding a Widget: George needs a quick way to view his Lumen lights.
💡 Replacing a Bulb: Meghan is replacing an old smart bulb with a new Lumen light.
💡 Customizing a Room: Meghan wants to set up her sunroom with adaptive lighting.
Crazy 8’s
Having personas and user journeys are the perfect tools to launch a crazy 8’s session. Crazy 8’s is a fun inclusive activity to bring in everyone on your team to participate. This is great for managers, developers, and designers alike.
You don’t need to be a good artist or designer to participate. We created a FigJam board utilizing a Crazy 8’s community template where everyone could edit the file. We all worked remotely and called in to play and ideate on the same FigJam board.
In the sketch below we based our user flow on the idea that “Meghan needs to add a whole new room to her setup with an adaptive lighting schedule.”
Debrief
Let’s do a quick recap of what we just discussed. From the product brief to the crazy 8’s, these activities are your early research and discovery phases of what your product will ultimately become.
🔷 Product Brief: What are the requirements for your product?
🔷 Research: What is the competition doing or not doing?
🔷 Personas: Who are your users? Who are you designing for?
🔷 User Journeys: What is the main goal of your users? What problems are you trying to solve?
🔷 Crazy 8’s: This brainstorming exercise is optional but highly recommended.
Make sure to check out Part 2: UX | UI of this 3-part series, where we discuss our approach to hierarchy, information architecture (IA), wireframes, mood boarding, and high-fidelity design exploration.
