Ericsson
a BIG DATA VISUALISATION project
CLIENT
Ericsson, Karlskrona
TEAM
A total of six UX Designers
MY ROLE
Rapid prototyping, user testing and UI Design
YEAR
2020
“How might we visually represent data of groups with thousands of profiles in an intuitive way?"
Who was the client?
Ericsson is a well known actor on the gobal stage with years of experience in the forefront of technological development. To them, Great designs are essential in their product creation process in order ensure that their their products and services remain user friendly, fit for purpose and high quality. To them, it is just as much bout the hardware and physical artefacts as it is about software and UX Design.
What was the target group?
The target group of Ericsson was in this project defined as people using their platform, specifically businesses who are selling live services such as phone operators, internet providers and more. Organisations of this kind use the platform to keep tabs on how the status of their collective services, with a need to be able to pinpoint outliers and trouble shoot shortages. The same goes for Ericsson themselves who needs to do the same to keep track of their clients to ensure a functioning system all the way down to a single user.
What was my role?
The team consisted of six eager UX designers who all worked in what we liked to call parallel unison to ensure efficiency and quality. This meant that we had internal design sprints to pitch concepts, present takes and standpoints to each other and to the client. Once this was created and a green was given to the team, we moved forth with takes on the style, execution and takes on the material provided with the approved path in mind. I was therefor involved in everything from client meetings, conceptualisation through low fidelity sketches, UI prototyping and user testing with the contact person within Ericsson. That being said however, I took an extra responsibility over the visual elements of the UI to ensure a fluent design that remained responsive in the mock-up demonstration in the end.
What was the challenge?
Our challenge was to come forth with a way to optimise their platform which they use to monitor user profiles, ranging from organisations to individual devices of each client. It is an organisation with a significant number of data points and set style guide - but to get a fresh set of eyes on the matter, they could get the direction they needed to move forward in transforming the platform in a more intuitive, scalable and user friendly way. Even though they gave us a detailed brief as well as the style guide and values, we still had daily meetings to ensure that every idea was well examined before moving forward to ensure quality that meets their standards.
How about some more Miro?
As Miro has proved us with a clear understanding of what this project is about, the team then decided to dive back into Miro in order to analyse the priority lists of this brief, create a user journey to further deepen our initial understanding of the user experience we're set out to create.
Priority list
Simple and clear navigation with proper zoom and hierarchy functionalities with while still providing a clear overview.
Implement a search and filter feature that is flexible based on the current level with a status visibility to provide the user with relevant information at glance.
Implement maps to highlight or to more easily pin point geographic location.
Notifications that alerts in case of outages or larger status changes.
Node level clarifications
Global view / or localised view (e.g. companies such as Volvo or Telia). Highlighting status, progress etc.
Sub level, could be department or regional offices of larger companies, think smaller than previous level on a organisational and hierarchal scale.
Provide a detailed overview of all departments.
Billing information and status.
Access information and see it in a detailed overview.
User journey
User logs onto the platform, gets to the landing page, enters client section, navigates through sub-nodes to the desired one, examines the leaves of sub-node and clear navigation with proper zoom and hierarchy functionalities with while still providing a clear overview.
Implement a search and filter feature that is flexible based on the current level with a status visibility to provide the user with relevant information at glance.
Implement maps to highlight or to more easily pin point geographic location.
Notifications that alerts in case of outages or larger status changes.
Three of a number of Miro boards created by the team. These boards in particular were about identifying MVP, what exists o each level and a user journey to get a greater understanding of our users
Nodes and users
To fully grasp the scope of the project, we had to generate an understanding of what information each user category can be, what information can be accessed by said profile as well as what I data structure local administrators have. Enter, the Root and sub node system.
Root Node
Consists of Internal ID (given by backend team)
External ID (given by external system / CRM / agreed name from sales, etc)
Organisational legal (Tax) id number ('none' means it is not a local organisation)
Name of organisation
Address
Legal contact person (name, phone number , email)
Total subscribers
Status (active, inactive, terminated)
Consumption history
Invoice information
Different roles (payment responsible, contract owners, admins, information invoice receiver)
Other Nodes
Internal ID (given my external system)
External ID (given by external system / CRM / agreed name from sales, etc)
Organisational legal (Tax) ID-number ('none' means it is not a legal organization)
Address
Legal Contact person (name, phone number, email)
Total subscribers
Status, (Created, active, inactive, terminated)
Consumption history
Invoice information
Different roles (payment, responsible, contact owners, admins)
Ready, Set, Sprint
With a understanding of the brief was created and a common understanding of the terminology, it was just a matter of getting the relevant UI library in our hands provided by the client. This, however, took some time and the team settled on moving forward anyway with design concepts that could potentially work as a foundation of how a platform could look like, solely by the information received within the brief and first meeting.
The picture below illustrates one of several design prints in regards to the navigation and information display methodology we should proceed with. Each element was then peer reviewed within the team as well as with the Ericsson team to highlight positive aspects, shortcomings as well as areas of improvement with each prototype.
The outcome of a design sprint where pros, cons and areas of improvement were discussed.
Down the UI Rabbit Hole
Once a design approach was decided upon, or rather approved by the contact team at Ericsson, we then dove into the UI library and style guide which at that point just had reached us due to delays in regulation of third party access to the design files. Nevertheless it was chocking that it was somewhat similar to some of our sketches to begin with, and with NDA's signed and libraries to our disposal, I would be no understatement that the team dove straight into it to make up for lost time.
Oh yeah, it’s all coming together
Once a design approach was decided upon, or rather approved by the contact team at Ericsson, we then dove into the UI library and style guide which at that point just had reached us due to delays in regulation of third party access to the design files. Nevertheless it was chocking that it was somewhat similar to some of our sketches to begin with, and with NDA's signed and libraries to our disposal, I would be no understatement that the team dove straight into it to make up for lost time.
The first screen created was a dashboard which will be the one seen by the vast majority of the intended userbase. Our target was to provide the user with all the necessary information about their client and the designated node tree of clients and departments. The question we asked ourselves was simple:
“How can we create an overview of the relevant information of a client that still can be applicable if it covers tens of thousands of data points?”
After much discussion, we created a grid-based widget system on the dashboard. The idea behind this system was to make clear visual indicators over the status of the collective node and sub nodes within the selected category. Using this system, the user could decide for themselves if they wanted to use the navigation view, the visualisation widget view or a tree hierarchy view to navigate around within all the branches of the client organisation (or within your designated department).
The Client selection screen was designed to quickly get the essential data in a compact overview without navigating into the client/primary node of the system. By bringing up the company name, a node status report and the subscriber count, we can provide the user with the information that they need about the client. The idea was that by highlighting the ones that you want to keep, you could either navigate through the list of all the clients /primary nodes that you’re in charge of, or you can highlight your favourites and keep them just one click away at all times in the favourites tab.
The third core component was to visualise where the nodes are located, which is a highly desired functionality within any larger organisation up to global enterprises and corporations. The initial stages started with putting the map front and centre with search features to show the desired node locations or having it as a subtle effect behind the grid view and zoom in as you worked your way through the nodes. However, after extensive elaborations, it became clear that the best way was to have a separate display setting for the selected node instead. Here the user will have the exact node count and status and a list of the most recent alerts and locations of said sub-node.
Outcome
The result of this project (that despite its limited time frame) ended with great success. A number of late night shifts were required and at the time I was also working in a remote setting, which didn't affect the outcome since we all saw this as an opportunity to work remotely - very much to our advantage.
“The prototype looks professional and the concept is quite generic such that it could be applied across various use cases with minimal effort […] Great work!
- Contact person at Ericsson UX Team
Our goal was to create something that they could use. Our mindset walking into this was; "Is Ericsson happy, we'll be happy. With that in mind, let's impress them." This was the theme throughout the project, serving as a constant quality check to ensure that everyone would love the outcome.
We carefully followed their style guide even though they expressed that we could be creative and explore other alternatives. Reason being that we wanted something that would generate as much familiarity as possible and reduce any resumption lag after a potential implementation.
Shorter daily check-ins provided us with the indications whether or not we were onto something or if certain aspects were to be reconsidered. Even though this came from their side, we still appreciated this initiative immensely.
A focus on easy implementation allowed us to keep the user in mind, being workers at Ericsson or any of their clients. By focusing on their brand and taking full advantage of their UI-library we achieved something that they considered implementable without much additional effort.
We also focused on scalability, ensuring that regardless of how big or small a client is, the platform could still work as intended. This turned out to be our biggest obstacle and provided the team with plenty of headaches, but in the end, we came up with a solution allowing users to easily get an overview of statuses, reports as well as node specific information on any level.
Simple, scalable and familiar
In the end it ended up exactly where we wanted it to land, our client really appreciated that we took their current UI library and style guide to heart rather than coming up with something new and unfamiliar. Our philosophy was that if something isn’t broken, don’t fix it. In this instance however it was the designs that wasn’t broken. The client had a solid foundation to start from, something that would ensure familiarity, all that needed to be done was to shed some light on new possibilities and allow for a smoother user experience regardless of scale. The fact that this is exactly what they addressed in their final feedback to us just further proves that we were successful in the task we took on - something we all wear as a feather in our hats.
My takeaways
My personal takeaways from this project all comes down to being humble. This project ended up on my table fairly early in my UX career and to this day it is still something that I think back on with great pride. I have learned that if I just take a step back and absorb everything, I won’t be overwhelmed or get stuck in because of a complex brief or intricate design system. To be able to openly communicate and not be afraid to do so while practicing an agile work methodology is something I have taken with me from this project and it has been serving me well. Lastly, I take with me from this project the importance of note taking, the fact that large organisations don’t feel as scary anymore and it has given me an ambition to always try my best to one day hopefully end up in a role like that.