Electric Imp - impCentral
"How might we onboard new customers and help them build their first Proof of Concept hardware product using imp devices?"
Overview
Overview
The Electric Imp Platform is a powerful and comprehensive edge-to-enterprise solution for secure IoT connectivity. It securely connects devices to the cloud over Ethernet, WiFi, and Cellular. The platform features fully integrated hardware, software, OS, APIs, and cloud services. Marquis customers with large production installations rely on impCentral web application to manage their IoT devices on the platform.
EI’s impCentral has powerful yet flexible code, device and product management functionalities. The challenge was to redesign the user interaction and flows for prospect users to be able to build their first out of the box IoT enabled Proof of Concept using imp enabled Device Kit.
Role
Solo Product Designer
Enhance current onboarding flows.
Research, user interviews, Personas, UI testing, Low-Fidelity and Hi-Fidelity mockups, wireframes, prototypes.
~2+ months
Process
I focused on the five-stage of Design Thinking model proposed by the Design at Stanford. The five stages of Design Thinking are as follows: Empathise, Define (the problem), Ideate, Prototype, and Test. Let’s take a closer look at the five different stages of Design Thinking.
UX Design process
Research
First, we started by analysing the existing applications to identify key problems and issues. This was compared to Forum feedback for impCentral.
We chose to research and gather data from existing customers and developers who were trying to build their PoCs with impCentral and had a lot to say about the product on a daily basis. They were frustrated enough to complain and seek help on the forum or slack channels of impCentral and were identifying opportunities where ElectricImp’s products can improve.
Goals of the Research:
- To understand the user’s need, what do they have when they start with impCentral for the first time.
- To understand the day in the life of users who were trying to build a proof of concept for the IoT imp enabled device.
- To understand the information developers were looking for to get started with the IoT products.
Heuristic Evaluation
To quick start this project, I started with Heuristic evaluation of the existing impCentral Design to do a thorough assessment of the current UI’s and to find the usability issues and identify ways to resolve them. I evaluated of the current UI design against Jakob Bielsen’s 10 general principles for interaction.
Walk in customers shoe
Since we had limited resources to gather enough data to understand the users behavior, test the design solutions and measure success rate we depended on the internal resources.
We started with "Eat your own Dog food sessions" where we invited cross platform team members to act as a user and try to set up out of the box PoC of IoT product using Electric Imps offering of impExplorer Kit. Basically to taste our own cooked meal concept.
Trade show interviews and research
We capitalized on every opportunity that we had to ask users need and wants. We met with prospect customers at Trade shows (Makers Faire) and gathered data of users needs and wants. We asked questions to passer ane buyers about their IoT needs and wants.
Research findings
We found that we have made a lot of assumptions about our users knowing the system inside out. Lot of terms that we had used were not industry wide known and needed explanation. impCentral did not provide easy out of the box user experience for users to be successful.
- We were not successful to setup PoC using impExplorer Kit on our own. At least on the first go.
- The flow of building PoC was disconnected and did not have any guide or contextual help available.
- We found that the whole process was disconnected. It had too many external dependencies. We needed to use multiple systems to complete the task at hand, physical hardware (imp devices), BlinkUp mobile app, impCentral and Dev center for documentation.
- All possible help and resources were external hosted in the Dev Center for which we needed to go through many extra steps including relying on the Google search.
Define requirements
So, the question we asked...What does the perfect world look like? How can we get there?
How can we help users build their first IoT enabled Proof of Concept using electric imp platform that is easy, seamless and not time consuming?
How can we reduce the external dependencies of different system so users can feel confident and not feel overwhelmed throughout their experience with EI Platform?
How can we make our UI intuitive so users can find the right solutions for building and scaling their IoT products' development without ever looking for help?
Affinity mapping
Our exercise of Affinity Mapping diagram allowed us to organize ideas of our collected data. To define and prioritize the User Interface needs and feature requirements. This exercise helped find users asks and pain points. It allowed us to understand why user will not consider using a 3rd party solution.
User persona
Based on the groups and patterns identified in the affinity map, we came out with multiple personas — a group of existing users, and a current prospect users / Hobbyist who like to toy with the idea of IoT product and who is a potential user of the Electric Imp offering. These personas described a typical potential user, their habits, problems, pain points, and other details.
Empathy mapping
First we created empathy map based on the data that we had gathered, It was a lot of information about users' behaviors and feelings and knowledge. It helped us have a deeper understanding of our users. It allowed us to understand users pain, feelings and gains. What mattered to our users? What distracted our users? Why?
User journey
Armed with all these data, we started mapping user's journey of provisioning the impExplorer kit. It helped us understand existing pain points not unearthed so far.
Feature prioritization
Through the Design Process, Research and Define Steps, we came up with various new features that were prioritized for implementation for design revamp. We narrowed down to few MVP (minimal viable product) solutions based on Business Goals and Requirements as follows.
Defined requirements
-
Prospect users who were trying to build PoC of IoT products needed a Checklist of external dependencies, what was required to get started with their first set up, hardware and mobile application dependencies, Software code samples. Simple step by step guide on how to build the 1st POC with default concept product.
Solution / Feature Recommendation: For newly created accounts, along with Welcome message show users Step by Step guides and checklist of how to build their first PoC.
-
Users needed to use BlinkUp Mobile app to link imp enabled devices to their account to get started with software development aspect of IoT products.
Solution / Feature Recommendation: Build BlinkUp feature as part of the impCentral Web Application so user does not have to depend on the external app. BlinkUp process required precision so to avoid error show how to videos to user before they start the process. Created a video to show the BlinkUp of imp enabled devices.
-
Users needed detailed help on the next step of PoC once wizard was complete. Users needed help with sample code and having trouble with familiarizing with the impCentral’s IDE UI.
Solution / Feature Recommendation: ToolTip driven new UI introduction that will guide users to take actions and understand the features of impCentral and building their first PoC using impCentral.
Ideate
Workflow
Based on the information collected during the research and defined phase, I started working on a User interaction flows. We realized existing flow requierd 20 steps for user to sucessfully finish building the PoC. Based on the original User Interaction we realized only improvising the landing page for getting started will not help the user for whole experience. We need to reducing Steps by more than 50%. We decided to built the external dependecies to activating the imp devices using the BlinkUp mobile application inside the impCentral web application.
Whiteboard designs
Next, I began generating ideas for the features and layout by creating low-fidelity wireframes for distinct approaches. With a small team and having fast scrum cycles we did a lot of our Ideation work using whiteboards.
Sketch / Low-fidelity designs
After getting initial feedback from the team I transfered my designs to low-fidelity mockups. And gathered feedback from the extended team.
Hi-fidelity designs
Once we agreed on the flows and user interaction I moved my designs to Hi-fidelity designs using sketch and Adobe Photoshop and illustrator.
Validation
The purpose of the test was to determine if users are receptive and successful with the building their first IoT enabled PoC without any obvious hiccups in their end to end experience.
The main objective was to find out:
- How easily can users get started using impCentral?
- Do users understand what features impCentral offers?
- Can users navigate the Developer account of impCentral easily?
- How intuitive are the interactions for the various features?
- How easy or difficult is the learning curve?
Participants were given multiple tasks to complete. Task 1 was conducted on both the existing web application and proposed new design to measure quantitative data. We timed and counted steps that users took to complete the task on the existing app and proposed new design. The new design allowed users to complete the task more efficiently and successfully.
Assigned Task for usability test
You are researching for IoT solutions providers. You have an idea to build your own IoT enabled connected product. You heard about Electric Imp’s IoT offerings. You want to build a prototype of your own idea of a connected product using Electric Imp’s platform. You have already created an account for impCentral. You are logged in to impCentral account.
-
Do you know what it requires to build the prototype?
-
Can you find your way to get started building IoT PoC?
-
Can you try to build your first IoT enabled PoC?
Task Success
- Users were able to easily find and identify how to initiate the process of building PoC.
- Users were able to easily go through the wizard and successfully build the PoC.
- Users loved and welcomed the new feature of Home / overview landing page.
- Users also welcome the instruction and information rich empty state of Product and Device Pages.
- Users who were new and unfamiliar with IoT concepts loved the idea of having sandbox / First Time Here feature concept.
- Loved the feature of sample products templates.
Task Fails
- Though users loved the newly introduced feature of Home page, they found it too generic. They wanted more customizable and data driven Dashboard as a landing page.
- Advanced users wanted Freedom to explore things and tweak and build their own PoC products.
- They needed to have an access to imp Libraries, APIs and contextual Help on an ongoing basis.
- Users had a hard time understanding the BlinkUp process. They chose to ignore watching the video and had failed at the first attempt to BlinkUp a Device.
- Users found getting started page very wordy and overwhelming to start the wizard with.
- New Users has complained about not knowing what they needed to get started to build PoC. They were looking for a checklist.
Design improvements
Once we agreed on the flows and user interaction I moved my designs to Hi-fidelity designs using sketch and Adobe Photoshop and illustrator.
Final designs
Once we agreed on the flows and user interaction I moved my designs to Hi-fidelity designs using sketch and Adobe Photoshop and illustrator.
Next steps
- needs a clear direction and focus for different account types
- needs to be less generic for all user and account types and be more direct to the users and their needs for creating a more personal experience.
- Explore a vision for wizard that can be saved and continued later.
- Though wizard UI pattern to build PoC was an ideal use case for new users however advanced enterprise users wanted to know how Electric Imp can help them scale their IoT products and needs. We realized that we had missed the opportunities to upsell and educate users about their next move of IoT business which is manufacturing and managing IoT devices in mass.
- Advanced Users needed a Sandbox environment as a feature. Users wanted to build their own PoC as well as know how can they scale the process to bring that PoC to market via Electric Imp provided manufacturing process.
-
The Overview / Landing Page:
-
Wizard vs. Guided Workflows:
-
Paid customers and Advanced users feature requests:
Key Takeaway
- Less is More: Original Flow was about 20 or more steps, Proposed interaction was reduced by 50% having only 9 to 10 steps.
- Heuristic evaluation: By doing heuristic evaluation early in the process helped the whole team understand the value and importance of hand holding and UI interaction. Team was able to prioritize the MVP based on their own experience and research.
- Software + Hardware + UX: IoT offerings has external dependencies on the hardware. To have a good end to end user experience IoT company needs to focus on detailed on-boarding flows. Could not stress enough about learning the importance of the lessons that our team learned hard ways by not implementing the on-boading flows and empty screens scenarios.
- If I were to improve something in my future projects -- I will always make sure to have “Be a user” / Heuristic Evaluations sessions with the whole team on a regularly and will make it part of the Design Process.