Introduction
Smart Home App
For this project, I was tasked with designing the app UI for a Smart Home device that was mounted on the wall. This app could control the lights, speakers, thermostat, and cameras of the home. As the Visual Designer, it was my job to make sure this interface was pleasant to look at and easy to understand, yet complex enough to provide adequate control of the various systems.
Key Project Data
Role: UI/Visual Designer
Tools: Figma
Ideation
Research + Sketches
The first step of my process in designing the Smart Home app was to research other similar systems and note UI patterns. These patterns helped inform my initial sketches and ideas for the layout of the interface.
Mood Board + Style Tile
After I had a general idea of the layout for the design of the interface, I began to design a mood board to inform the aesthetic direction of the project. I was inspired by organic forms and a warm, sunset color palette. To clarify how this aesthetic would translate to the design of the project, I created a style tile which included more specific design choices such as fonts, textures, icons, and buttons. Both of these helped guide my decision-making later in the project, when I began adding color and detail to the design.
Design Process
Wireframes
After my initial ideation was complete, I began converting my sketches into wireframes to get a better sense of how they would work digitally. I adapted some of my original sketches for consistency across screens. Specifically, I wanted the lights and speakers screens to mimic each other, so that the user could easily understand the patterns of each. I also initially started with a much more complex home screen, which included weather, music, thermostat, and light widgets.
Feedback
I presented my wireframes to some fellow designers and got feedback on some of the layout choices. I decided to shift the master volume and light buttons from the bottom of the screen to immediately below the “All Lights/Speakers” section. This made it more clear to the user what this slider was for. I also decided to clean up the home screen, removing some of the unnecessary widgets such as the weather and light control. This made the home screen much more glance-able and prioritized what was on the screen.
Visual Design
After making some adjustments to my wireframes, I moved on to the visual design phase of the project, where I would add color, texture, and personality to the design. Using my mood board and style tile as a guide, I created a soft, organic feel to create a distinctive brand for the client.
Final Design
Reflections + Takeaways
Challenges
It was challenging presenting all the necessary information while keeping the interface simple and understandable — there was a lot of information that I needed to convey but I didn’t want to overwhelm the user. In order to accomplish this, I broke the various pages down into easy to view parts that were organized by room. Another challenge was making sure the design could fit any type of house with any number of rooms and any number of devices. I also had to make sure that the design could account for longer room names or device names. I made sure to account for these different scenarios when I began my design by ensuring any number of rooms and devices could fit by scrolling off the page. I also made sure my design accounted for long names that could fit on multiple lines.
Simplicity is Key
After having finished this project, I’ve realized the importance of simplicity in designs like this that are packed with lots of information. The most important part of this project was that the user understand how to use the product and not get confused or overwhelmed. By using design principles such as Gestalt’s law of similarity and law of proximity, I was able to organize the information on each page in a way that made sense. Using repetition across the pages was also important, so that once a user understood a pattern on one page, they didn’t have to figure out a new pattern on a different page.