IIoT PaaS
A core product of the company's IoT department, the platform is the data processing center for other SaaS. All IoT things can be tested, and users can check their status and data on the platform.
2020
My Work
Lead and solo designer
-
Research: analyzing competitive products, user research
-
UX design: user flows, wireframes, site map
-
UI design: style guide, interface design
Project Background
The platform has a previous version that was developed and designed by the engineers. The scattered and disordered functions were difficult for users to find them out. Besides, without UI design, the developers only used the components from the UI framework, which caused confusions for users.
Work Process
Problem Refinement
Know-how
Having done a couple of SaaS projects, I know better how IoT systems work, what functions are users looking for, and where the previous PaaS can be improved.
Interview
Apart from my personal experience and the feedback collected from daily works, I also design a semi-structured interview, ask users to complete tasks through the think-aloud method to get a deeper understanding of the problems.
Key problems
-
Uses have to jump between pages to complete a task
-
Inaccurate icons and wording make users confused
-
Inconsistent UI design
Goals of Redesign
-
Create a consistent user experience
-
Improve usability across the platform
-
Build company's UI Kit
Site Map
Through the data collected from the interviews and the discussion with platform developers.
-
'Thing' related information and actions are put on one page since the features which users mostly use are all related to 'Things'
-
The order of menu pages based on the users' frequency of use
-
Incorporated the pricing service on the platform
User Flow
Login
Before
-
There were a lot of unused accounts on the platform because the registration step is too simple. Some website visitors just wanted to check but registered a non-activated account accidentally.
-
Users did not notice that the organization name was needed when logging in. Users gave a random name and do not remember it, then they needed to ask developers to check the organization name or delete their account from the back-end.
After
-
Put the password setting step first to reduce the possibility of random registration.
-
Clear wording. e.g. Instead of using ambiguous words, ’Name’, ‘User Name’, and ‘Organization Name’ are better for users to identify.
-
Add the tips and provide clear instructions. e.g. Remind users of not closing the window before receiving the mail
Before
After
Rule engine
Before
-
The conditions of each rule could not be seen on the list. Users have to enter 'Edit mode' to check the rules.
-
The condition page is not easy to set and read.
-
Users need to click tabs one by one and some tabs are hidden unless the users scroll right.
Rule List
Rule condition setting
After
-
Users can expand the accordion list to see the condition.
-
When users want to disable a specific rule, they can turn it off on the list without going deeper and complicated setting pages.
-
The compulsory columns are marked so users can use the basic rule engine without understanding all features.
-
Users can set two-layer conditions and change them easily. Most PaaS users are engineers so I use 'and' and 'or', which matches their cognitions.
.png)
.png)
A mechanism that users can set conditions to an IoT ’Thing’ and trigger customized events.
Wireframes
I conduct user testing by giving the users (mostly are engineers and product managers in our company) tasks to observe if there is anything they can not understand.
UI kit
Colors are defined according to the existing Corporate Identity System (CIS) file. I reduce color chroma to make users feel more comfortable viewing information.
Mockups
Results &Takeaways
As a result of its delicate design, the PaaS has satisfied users. The new visual design and improved user experience make the sales team more confident when promoting the platform.
I refer to many design guidelines to build our own. There are many factors to consider. Since every element I defined at the beginning must be applied to every other component - if I wish to change an initial design, it will affect all of the other related components. Based on this UI kit, the front-end developers have created components that can be reused for the following SaaS system.
Apart from that, I have a solid understanding of how the platform works, and its limitations. Knowing Ruby on Rails, Javascript, CSS, and HTML helps me communicate effectively with developers.