As a UX designer within the mobile app team, my main job is to specify all interactions and flows with technical notes on my delivery to our development team. By working with our product manager, I transferred his requirements to a visible functions on the app screen. By collaborating with UI designer, we discussed what the best and clean visuals should look like for our end users. By assisting quality assurance engineers, I checked out the final product is what I expected and improved the app.
OVERVIEW
For IoT products, on-boarding experience is an important piece to make a great first expression and keep users exploring more on the platform. As a UX designer, designing smooth and simple process is necessary. However, sometimes it does not go as well as designers thought. How to bring users back to the happy path from error conditions is another challenge I faced.
This is my first task to design on-boarding experience on KASA app – An iPhone and Android App which connects TP-LINK Smart Home Device and end users.
BEFORE START
This is the first time for both TP-LINK and me to launch Smart Home platform on the market. Since we are new to the market, I did some research on the competitors. The primary competitor is Belkin’s WEMO Switch. Both of us are Wi-Fi Smart Plug and use Soft AP mode for users to install the device.
The onboarding path for BELKIN Wemo’s devices
However, there is a lack of clues for users to know what they can expect. Also, only showing instruction will let users feel not engaged with the process. We would like to provide what users can expect and interact with users to make them feel friendly. By following this principal, we tell users what action they should take step by step when installing the device on our platform – KASA app.
INITIAL DESIGN
Step by step and simple description is what we want to achieve on our platform. Therefore, we defined what actions users need to take first. Four phases are defined as the following.
We defined four stages for device onboarding
Based on the four phases we defined, we then go deeper into the details. What action users need to take under different phases is the most important thing we should know in advance. Based on these facts, then we can build wireframe to display the message we would like to deliver to users and ask them to respond.
The detailed process for each stage
FURTHER ITERATION
In what condition the error will happen is the first question we would like to ask. We need to guide users back to the regular path if the scenario happens. On the other hand, if the error can be avoided in the beginning, we should notify users and prevent them from seeing the frustrated moment. To understand issues, I communicated with QA and developers back and forth to have a larger picture for the entire on-boarding process. Error cases are defined as the following.
Turn off Wi-Fi
Possibility: Low
This case is rare. Users might turn off their Wi-Fi and use their cellular data for their phone. Because Wi-Fi is required for onboarding, if users turn off their Wi-Fi, they cannot connect to the device and start installation. We need to check it in the beginning and remind users if their phone’s Wi-Fi is off.
Not in Soft AP mode
Possibility: High
If the device has already been used before, it cannot automatically go to configuration (Soft AP). However, if users fail to setup and restart the process, they also reach this stage. We ask users to check light status first. If the plug is not in soft AP, we tell them to manually start the configuration.
Cannot detect / connect device
Possibility: Medium
Two issues might result in this situation. One is preconfigured device and another one is users install their device far away from their phone. We tell users to manually start the configuration or install the device nearby for their smartphone to detect the Smart Plug’s Wi-Fi.
Reset Past Setting
Possibility: Medium
If users got a second hand device, they should been noticed this information. Once they got notified, they can decide whether they want to erase previous setting. No matter users reset past setting or not, we help them remove account association to make sure no one can remote control their plug.
Router Issue or Weak Wi-Fi Signal
Possibility: Medium
The Smart Plug will detect wireless networks that are in range to join. If users cannot find their network, it might be router’s issue or out of network range. If users decide to move their plug, we direct them back to configuration screen without deleting any input data and restart the process.
Cannot Join Network
Possibility: Medium
After sending out all settings, users need to stay on the same network for checking condition. If it is still failed, normally it is because users typed the wrong Wi-Fi password. Users need to restart the process, and we direct them back without erasing their previous data input.
REVISION
Android and iPhone App system perform in different ways. That means we also need to show different messages for two groups of end users to make sure they can enjoy the boarding experience.
For iPhone, unfortunately we cannot control the smartphone Wi-Fi traffic and automatically connect to the Soft AP device. In this case, we need to tell users to leave the app and manually connect to the device Wi-Fi first. Our first design want to let users feel gentle when asking this intrusive action, so we show one page to tell them we need their help. However, during testings, we found testers feel annoying because they need to spend time reading the page. Therefore, we cut the page but still put “Need Your Help” as a title message on the screen we want them to leave the app and connect to the device Wi-Fi.
We cut redundant screen on iPhone app based on internal feedback
On the contrary, Android users can enjoy better experience since the system allowed us to connect to the Soft AP device directly. However, one issue we found from internal testings is that if users install multiple devices at the same time, they don’t know which one they connect to since we randomly select one and go ahead. To solve this issue, we then create a screen for users to select which device they want to proceed.
We allowed users to select the device to continue setup
CURRENT RELEASE
The following is the whole interaction flow I specified for Smart Plug device on-boarding. Also, please try on using the prototype which describes the positive flow for iPhone users.
FEEDBACK
Our Smart Plug launched in the market in the end of 2015. Right now we have a good start for this initial product. More features and products are planned based on users feedback. Check out how users rated our product.
TAKEAWAYS
Software + Hardware + UX
An IoT company which is doing both hardware and software needs to think more than software focus company in regards how to properly on-board new customers. The successful path is quick but the error path needs time to think through and find out.