Platform Design System
Crafting the backbone of a new smart home platform
Project Overview
Resideo set out to shake up the smart home industry by helping users understand and control the core systems in their home: air (comfort and health), water, energy, and security. To support this vision, Resideo needed to build a new mobile platform from the ground up.
The Team
The core team was comprised of a design director, 3 UX/UI designers, including myself, and a researcher. We had sporadic support throughout the project from several UX/UI designers, visual designers, product owners, and business owners.
The Challenges
Build the core components of a platform design system for a smart-home app in just 2 months.
Design an entire product experience within 4 weeks after completing the system.
My Roles & Responsibilities
Creating a platform design system is a massive undertaking. I simultaneously balanced various roles and responsibilities while designing and applying core components of the system.
Platform Building
My Role
I helped design, refine, and document the new design language with a focus on product controls and data visualization that could scale based on product and context.
Collaborative Documentation
With team members across the globe, we used a collaborative cloud Adobe XD file to create our documentation and conduct asynchronous design reviews.
Validation Testing
To ensure the documentation was clear and useful, a designer unfamiliar with the project was given an early draft and asked to complete a small design challenge. The feedback we received identified a few sections for refinement.
Example documentation pages
My Role
I led the design of foundational interaction patterns, including primary navigation; implicit saves; and shallow, modular controls.
Rapid Iteration Evaluation
I designed in Adobe XD so I could concurrently create and test prototypes on my phone using XD’s companion app to get a real-time feel for the interactions I built.
Research and Testing
To ensure I selected the best interaction patterns for the system, I partnered with our research team to conduct heuristic evaluations, comparison tests, and usability studies.
To support testing, I built simple prototypes using Adobe XD and highly interactive prototypes using HTML, CSS, and JavaScript.
Navigation example
Documentation of interaction patterns
My Role
Working alongside a pair of consulting content experts, my team and I provided direction for key strategies for our app’s voice and tone, brand persona, and messaging/style guidelines.
Content Audit
I audited existing content and identified deficiencies (like lack of cohesion between product categories) and key areas to prioritize for the new content strategy (like how we communicate when something is wrong).
Content Brief
My team and I participated in a content brief with the experts to define a vision of the future for our brand and how its content and messaging is perceived by users.
As a subject-matter expert on our users and industry, I answered questions and provided context on topics like user goals, motivations, and expectations.
Vision for brand persona and messaging
My Role
I built the architecture for app, user, and product settings. Additionally, I provided direction in developing the full information architecture by serving as the subject-matter expert on our existing product portfolio.
Sorting Settings
The platform’s ambitious scope meant that there would be dozens of unique settings to place in the architecture. To better understand how our users intuitively group and navigate settings, I partnered with a researcher to conduct a card sort on UserTesting.com.
Modular Architecture
Given the diverse products and features of smart home apps, one of my priorities was to ensure a cohesive experience across the system. I collaboratively established blueprints for system and product screens with a consistent layout to help users find predictable navigation and interaction patterns on each screen.
High-level overview of the app’s main navigation
Platform Application
My Role
I handled the UX, UI, and visual design of the comprehensive in-app experience for six smart thermostats, including:
Feature conceptualization
Wireframes
Prototypes
Research
Design specifications for developers
Design Approach
Evaluating User Needs
This project gave me opportunity to review unmet user needs from previous smart home apps. I identified several deficiencies that I could address, leading me to create original features (like data visualization of thermostat information) and simplify others (like using layman’s terms instead of technical terms to describe certain functionality).
Transparent Design
Since the platform was so new, it was important for me to be transparent with all stakeholders while designing. I held frequent peer reviews throughout the design phase, and I posted documentation on large boards in the office. This allowed stakeholders of all levels to see progress at-a-glance, from my peers to investors touring the office.
Usability Testing
While designing fresh features and concepts, I created numerous web-based and Adobe XD prototypes for our research team to use while conducting usability tests.
Developer Collaboration
My years of experience as a developer gave me the understanding to recognize our design capabilities. Whenever I designed novel functionality, I could easily bridge the gap between developers and designers to collaborate effectively.
Thermostat scheduling documentation
Thermostat core functionality documentation
Thermostat secondary feature documentation
Outcomes
The core components of the platform were all completed on time
The platform and new app concepts were showcased during Resideo LIVE, an industry event held to showcase how the app would propel Resideo’s vision for the future of the smart home forward
I handed my full design specification documentation to the development team of the in-app product experience for six thermostats