Cyberflow is a team UI-UX branding project, and we communicated on Figjam / face-to-face.
With the development of AI and the proliferation of IoT, the demand for Smart Home is increasing day by day. Therefore, we studied the current Smart Home UI and created our design.
Create a cohesive suite of digital product for an IoT smart home solution provider.
Oct 31 - Nov 24, 2022
App Design
Our research team first began by studying existing smart home assistants, and then summarized the four types of functionality that smart home users are looking for: security, lighting, refrigerators, and Thermostat.
Our research team considered the expected user flow for each of the four functions derived from the preliminary research.
We also made a list of each specific feature to give the basic ideas to the app design team.
After receiving the Figjam file from the research team, our Style Guide team first selected four keywords which is "Smooth", "Modern","Safety", and "Futuristic".
Then created a mood board along those keywords.
Our research team created a textual persona and gave it to our style guide team, and they used it to create two persona cards with a mood board design.
Here is the guide we created based on the research team and the style guide team's processes.
For more information, please see the Figma file.
Our app design team followed the functions list received from the research team and the design guide received from the style guide team to create a simple wireframe in a 14x14 grid.
Our app design team created prototypes for light and dark modes based on wireframes we created and mood boards / color guides received from the style guide team.
Our app design team componentized the UI Kits in the flow of creating the mockups, making it easier to modify them during the iteration phase.
Our website design team, as well as the app design team, started working from wireframes using the guides received from the style guide team.
In the website mockup design, our website design team uses a gradient with a style guide-specified color scheme behind the traced stock image to the home screen to keep design consistency with the app.
