UX & UI project
Global IoT Paas portal
Simfony has an elaborate IoT portal for managing SIM cards and data connections.
I was given the opportunity to redesign it based on stakeholder research
Problem
Customers don’t know how much data they have used, so they are afraid of both high cost and getting disconnected if they exceed their data limit.
Solutions
Give the customer predefined data consumption reports that can be easily read.
Give customers control over their data usage by setting limits and data notifications.
Process:
- Empathise Survey, User Interview
- Define User Persona, User Journey Mapping
- Ideate Brain Storming, User flow, Sketches.
- Build Wireframes, Prototype, UI
Role:
- UX research
Thanks for helping Pieter Koenis - UX design
Thanks for helping Arjun Mali - User testing
- Prototyping
- UI design
- HTML SCSS
Tools:
- Pen & paper
- Sketch
- Invision
- Visual Studio Code
Duration:
6 months – from research to high fidelity prototype (UI)
Personal stuff I learned
He has been working on the portal for years, so it makes sense to be reluctant to changes. With the right arguments, backed-up by research, I was able to include predefined data usage graphs, remove excess pages/features and increase the usability of the online self-support.
Highly requested features can stroke against commercial benefits. In this case: enabling data limits in the platform will cost money. After discussions with the CCO we’ve decided to make those features available but optional. Meaning resellers can show or hide the feature to their customers.
The CEO is a busy man, I didn’t want to give him details of the usability test results. So I made a presentation of two slides – showing if the users were able to perform the Top tasks or not. It was appreciated and gave him confidence to push the changes.
It’s important to pause after the interviewee has given the initial answer, as this is often a superficial answer. Giving them time to think a bit more will result in deeper and more meaningful answers.
Not all research results have to turn into a new feature, you mention the outcome to the right person and leave it with them. Of course it can also be added to the backlog and brought up later.
My customer centric approach and research documentation has helped to get an ISO 9001 certification.
Interview and survey
Research
“I am afraid that one SIM card will use all of my data without me knowing it”
Based on interviews and a survey, I found out that customers …
- Want to know how many SIM cards are online/offline
- Are afraid to get high bills as a result of high data consumption
- Want to see how much data a SIM card or group has used
- Want to be able to set a data limit for individual SIM cards and groups
- Want to receive an email when they reach 80% of the data limit
Meet Dmitry everyone
Persona
Dmitry Vitalla
- Age 38 years
- Software engineer
- Romania, Bucharest
- Lives with wife and 2 children
Bio
He has been a Software engineer for 10 years at a Track & Trace company called KnowWhere. It has a fleet of 500 vehicles and is growing.
He logs into the portal almost every day to check how many SIM cards are online.
Goals
- Activate SIM cards
- Configure SIM cards
- See how much data has been used
- See how much data is still left
- Help customers with technical issues
What makes him happy?
- Easy to use platform
- Data insights
- Activate SIM cards fast
- Low costs
- Good coverage
- Working SIM cards
- One contract for multiple networks
What metric determines his happyness?
- Understandable and predefined data insights
- Activate a SIM card within a few clicks
- Costs per month
- Number of networks per country
I used Sketch wireframing
Wireframing
What are the main reasons to log in?
- See how many SIM cards are online/offline
- Activate sim cards
- See how much data is left in my account
By knowing the top tasks of the customers I can prioritise my design and answer questions like:
- What data should I show on the dashboard?
- What content should get the most attention?
1. A dashboard with an overview of the SIM cards that are online/offline- placed in the top left corner of the screen so it gets immediate attention.
2. In that same section I’ve placed direct links to inactive SIM cards for quick activation. Activating SIM cards is the second reason for customers to log in – so it is also placed in the top left.
3. The data consumption overview is important for customers because they are afraid that their data will run out. The previous portal doesn’t show this information out of the box, instead customers have to create a difficult report from scratch.
What issues are customers facing when using the portal?
- Can’t see my data usage (of the previous month)
- I don’t know which SIM card is using the most data
- I don’t know when my SIM cards went online/offline
This gives insights in the pain points of the previous portal. Without knowing the problem, you can’t design a solution.
1. A line chart with data usage history. The chart has a dropdown with predefined date and a date picker so customers can choose the period they want to see the data usage.
2. Next to that, I’ve created a Top 5 of the SIM card or SIM card group that used the most data.
3. Finally, a table that shows when the SIM cards went online/offline
Sim management overview page
- Customer want to be able to set a data limit and a data notification on both a SIM card and on a group of SIM cards
- Customers want to manage their SIM cards on a group level. They want to see how much data a group has used
- They want to be able to reconnect the SIM cards to the network
A noticeable outcome was that several customers asked for features that already exist. On top of that- the same customers gave a high rating for ‘finding features’ in the portal.
Usability testing
After creating the wireframes and prototyping them I’ve run usability tests
Issues that require ideation:
Issue – What does change status mean?
Solution – I added a short description per action item
Issue – Is a monthly notification on the first of the month?
Solution – I added a small information icon with an explanation
Issue – What is the total amount of MB’s of the pool?
Solution – Add a column with the total amount of MB’s from the pool
Issue – Of what is it a percentage (a single SIM card? a group? a pool?)?
Solution – Show MB’s instead of %.
A some questions I asked in the test:
- How would you activate a sim card?
- What steps do you take after activating a SIM card?
- How much data is still left on your account?
- Can you set a data limit and notification?
- Which SIM card is using the most data?
- And more general questions like;
- Can you tell me what you see on this page?
- What do you expect if you click on that?
UI design
