ASRock Router

A New App Update, Design for the X10

In 2017, ASRock has just announced their latest V2 of - ASRock Router - and they asked us at, Orbweb, to disrupt current router’s identity and lay down a foundation for its future.

With the worldwide growth of IoT enhancing our in many ways on a daily basis, we certainly took hands in our own matter by successfully integrating IoT with ASRock Router X10.
Project ASRock X10 Router for iOS
Date Sep to Dec, 2016
Services UX Consultancy, Design
Responsibility My mission was to create a new and great experience into reality with the IoT (Internet of Things) at its very core of this project.
Tools Used Keynote, Omnigraffle, Sketch, Framerjs

Notes: The current design may not reflect the most up-to-date version, since the visual team may have some changes to it after my work with them was finished.


Allow me to introduce to you - Tom Sun, My manager, who called me for a meeting to discuss this project. They have been working extensively and reached out to me to complete the final key elements - ASRock Router X10 App. This model's main purpose was to show off its freshly added IoT integration.


To design for the masses, one has to not only think but understand in all customer different perspective. Numerous to countless hours of research was spent, hours of manpower was placed into checking and pinpointing the three main exciting facts of IoT: Security, Cost Savings, and Convenience.

To better understand the typical user(s), I collected the information from my research and created personas that reflect their characteristics. I then created scenaios that my personas might go through. (see slides in the presentation)

Job Stories

Due to a lot of variables and unknown to cost savings, I decided to focus on the other typical user who has motivations for security and potential convenience in home settings. I wrote job stories to help me wrap my head around this type of user’s situation and expected outcomes when hiring the application to achieve their goals.

Flow & Structure

With the full understanding of the users capability in the app, I structured the app to fit these wants and needs by writing use cases as well as sketching. I also built lo-fi prototypes to get a basic feel for user flows and layouts and then progress to a higher fidelity ones when it comes.

These three variations of tabs, responded exclusively to specific user actions: account users, router users, and IoT users. This placement of tabs varies upon the the user configuration.





The visuals below show mobile wireframes that accurately decipher the actions of various IoT users. It gave us an understanding of how the user moves from screen to screen to achieve their goal and how the system reacts to user actions, especially conveying dynamic content and process flow. The visual storytelling needs to be evocative, real and clear, to capture the intension of all users.


The IoT view makes it easier to access accessories. Toggle the light and power socket in one convenient list or get a signal of current sensors' stat. Tap into it to go deeper on accessory's settings and more.


Want your life convenient? Use scene to control multiple smart accessories with one touch. You can also rule those based on your location, time or activity of other accessories.


Looking for something happened that should not be happened? Browse your accessories activities - you can even trace back who made your accessories stat changed thanks to the location trigger.

A few Thoughts,

I learn a lot in the process of building IoT service. The most satisfying part of this adventure was the close study of relative-qualitative data and figuring out what motivates people to long more for IoT. And this concept of my design can be fully drawn up into reality, moving from testing hypothesis to building an action representation. Opposite to the past, I used sketching a lot in my design process to get my teammates feedback at early stage. And low-fi prototyping to validate my user flows in a limited amount of time. To me it is more about what medium is appropriate for what problem. I indeed acquired more experience of not just how to use these but when to use.