hero image for cyberflow


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.

research note  for cyberflow


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.

user flow  for cyberflow

Mood board

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.

moodboard  for cyberflow

Persona Cards

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.

persona for cyberflow

Style Guide

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.

Link to Style Guide

Style guide for cyberflow

App - Wireframe

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.

App wireframe  for cyberflow

App - Mock-up

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.

Link to App Prototype

app mockup  for cyberflow

App - UI Kits

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.

UI kits for cyberflow

Website - Wireframe

Our website design team, as well as the app design team, started working from wireframes using the guides received from the style guide team.

website wireframe  for cyberflow

Website - Mock-up

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.

Link to website prototype

website mockup  for cyberflow
hero image for cyberflow

Open Behance page

Interested in working with me?
┬ęTaito Iikura 2023