IOT PaaS Portal

IOT PaaS Portal

Redesigning Simfony's IoT portal so customers can finally understand and control their data usage.

Back to projects

Back to projects

Back to projects

ING-SparQ website

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.

Solution

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 — Brainstorming, User flow, Sketches

  • Build — Wireframes, Prototype, UI

Role:

  • UX research

  • UX design

  • User testing

  • Prototyping

  • UI design

  • HTML & SCSS

Tools:

  • Pen & paper

  • Sketch

  • Invision

  • Visual Studio Code

Year:

2020

Personal stuff I learned

He had been working on the portal for years, so reluctance to change made sense. With research-backed arguments, I was able to include predefined data usage graphs, remove excess pages, and improve usability.

Highly requested features can conflict with commercial interests. Data limits cost money to implement, so we made them optional — resellers can show or hide the feature.

The CEO didn't want test report details. Two slides showing whether users completed top tasks or not was enough — and it gave him confidence to push the changes.

After the initial answer, pause. The first response is often superficial; silence gives space for deeper, more meaningful insights.

Not every research finding needs to become a feature. Mention it to the right person and leave it with them, or add it to the backlog.

My customer-centric approach and research documentation helped the company obtain an ISO 9001 certification.

Research

"I am afraid that one SIM card will use all of my data without me knowing it"

Based on user 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 · Role: Software Engineer · Location: Bucharest, Romania · Lives with wife and 2 children

Bio

Dmitry has been a software engineer for 10 years at a track & trace company called KnowWhere, which operates a fleet of 500 vehicles. 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 happiness?

  • Understandable and predefined data insights

  • Activate a SIM card within a few clicks

  • Costs per month

  • Number of networks per country

I used Sketch to wireframe

Wireframing

What are the main reasons to log in?

What are the main reasons to log in?

  1. See how many SIM cards are online/offline
  2. Activate sim cards
  3. See how much data is left in my account
What issues are customers facing?

What issues are customers facing?

  1. Can’t see my data usage (of the previous month)
  2. I don’t know which SIM card is using the most data
  3. I don’t know when my SIM cards went online/offline
SIM management overview

SIM management overview

  1. 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
  2. Customers want to manage their SIM cards on a group level. They want to see how much data a group has used
  3. They want to be able to reconnect the SIM cards to the network

Usability testing on wireframes

After prototyping the wireframes, usability tests revealed these issues and solutions

Testing on wireframe

Some issues that surfaced

Issue: "What does change status mean?"
Solution: Added a short description per action item


Issue: "Is a monthly notification on the first of the month?"
Solution: Added an info icon with explanation


Issue: "What is the total amount of MB's of the pool?"
Solution: Added a column with total pool size


Issue: "Of what is it a percentage?"
Solution: Switched from % to MB values for clarity

Some issues that surfaced

Issue: "What does change status mean?"
Solution: Added a short description per action item


Issue: "Is a monthly notification on the first of the month?"
Solution: Added an info icon with explanation


Issue: "What is the total amount of MB's of the pool?"
Solution: Added a column with total pool size


Issue: "Of what is it a percentage?"
Solution: Switched from % to MB values for clarity

Some issues that surfaced


Issue: "What does change status mean?"
Solution: Added a short description per action item


Issue: "Is a monthly notification on the first of the month?"
Solution: Added an info icon with explanation


Issue: "What is the total amount of MB's of the pool?"
Solution: Added a column with total pool size


Issue: "Of what is it a percentage?"
Solution: Switched from % to MB values for clarity

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

The findings in the usability tests are implemented directly into the UI design

Styleguide
Styleguide