Manufacturing client
The context
Our client—a respected manufacturer of high-quality BBQ grills, fireplaces, and more—came to us seeking design for a new, streamlined suite of mobile apps that would control and monitor several of its products ranging from data-tracking BBQ accessories to remote-controlled fireplaces. Because each piece of hardware had different objectives and use cases, our task was to create a design system that would give these very distinct products a feeling of cohesion, better user interface (UI), and reinforce our client’s brand identity. Here’s how we did it.
Project details
The challenge
A design system is a set of standards that allows brands to manage design at scale. It becomes a source of truth for developers who build the product—one place where they create a shared language that will be spoken across applications—defining reusable components such as text sizes, buttons, cards, dialogues, menus, and more. When these are updated in the Design System, all of the screens using the corresponding components can also be easily updated in one go. In our client’s case, this allows the applications to achieve visual cohesiveness, regardless of whether a user is grilling, heating their home, or setting the ambiance in their living room. We were challenged to build out components that drew from our client’s recognizable colour palette and would look good for years to come.
The biggest challenge in the project was ensuring we understood the long-term vision in order to create a system that would be flexible enough for all the smart home apps to come.
The task at hand
We started with a vision workshop to establish our client’s vision for a suite of apps and to understand the benefits each of these apps would bring to their end-users. From there, we began with a Discovery phase. Using Miro, we broke down the workshops and talked about each product, prioritizing the features, user journey flows, and made sure we understood the product map. We then separated the products and sketched out the screens in tandem, to get a feel of how they could look. Figma was our main tool for building UI. During our work, the hardware was still in development, so we had the opportunity to work closely with our client’s product engineers throughout the project. Good communication was essential for us to understand the products’ capabilities and limitations. At Osedea we’re always focused on how Design and Development go hand in hand. We never want to design anything in a silo—always making sure that we have everyone in the room when validating big design decisions to determine whether what we’re proposing is doable.
The end result
Both parties are really pleased with the consistent approach, look, and feel of the suite. The finished apps aren’t just remote controls either. To create a compelling experience and bring in a level of complexity beyond the barebone functionality, we added elements of personalization to draw in the user. They can create profiles, upload photos and images, save programs under a custom name, regenerate those settings, and share recipes on social media to make things more interesting and playful. This project really drove home for us the power of a design system—what a vital part of an app ecosystem it is, and that building one as the backbone of a cohesive branding strategy is essential for any digital platform. Design systems are a way to build smarter, and to facilitate creative changes down the line, even across a big product range like our client’s. For example, should the company ever need to make an adjustment to a font or colour within their brand identity, we can easily update the relevant component in the design system (the one source of truth) and it will be reflected across the board.
What’s next
Our collaborative relationship with our client is ongoing and we look forward to future projects with them where we can leverage, and expand on, the design system we built together.
Did this project give you some ideas? We’d love to work with you! Get in touch and let’s discover what we can do together.
Insights
.jpg)
We’re on a constant quest to broaden our horizons and spread wisdom. It’s all about pushing boundaries and elevating our game.