Robin Bahlenberg
UX designer

Big Data Visualization

An Ericsson x Hyper Island Project

Brief and Challenges

Starting a new project can be both daunting and exciting depending on the client; in the context of Ericsson - we were all amazed and blown away that we got Ericsson on our hands. After a quick check-in with the group, we all concluded that we couldn’t have asked for a better team to take on this behemoth of a client. While looking at the brief, we all could agree that this would be the perfect opportunity to show our front feet, work together as a team and create something that would hopefully leave the Ericsson team amazed.

When debriefing the case given to us by Ericsson, we realised that this would require A LOT of work, and we were all starting to feel a little overwhelmed. Our client wanted us to create a new solution to visualise the data throughout their entire database. At the time of the project, it contained users, clients, and customers adding up to hundreds of thousands of nodes globally. Immediately we came to the first dilemma; “How do we create something that visually represents the data accurately yet intuitively despite the large numbers?”

Early on, we got on good terms with the Ericsson team, which remained our top priority, and we got a clear understanding of what the brief was about and what assets we could use. However, this took quite some time, and we had to start the experiment without receiving much information to take advantage of the time given as much as possible. As the final pieces of information finally arrived, we faced a new dilemma; how do we use the assets they have given us to create something that the creators of the current system would like to use.

"How might we visually represent groups with thousands of profiles?"

Research

When approaching a new project, it is of the essence to get in touch with what the client needs, who their target audience is, and how it is imagined to be used. In scenarios when there’s a global organisation on the line, it is crucial to know their exact needs, visions and assets to make as good of a product as possible. A vast number of meetings and daily check-ins with our contact person at Ericsson, debriefings through Miro and thorough investigations of their provided branding XD file helped ensure just that.

Approach

To determine how to visualise best the vast amount of data that Ericsson uses, we created a series of ideation sprints within the group as we waited for directives from the people above our Ericsson crew. By the time we got said directives, we had already created several iterations from the small number of resources handed to us.

We chose to adopt a grid system, making it a data navigation panel but with the new implementation of interchangeable widgets to get your relevant data at first glance as a user. This will allow the administration for each task force, region and continent to quickly understand what nodes are active, who’s in charge of what and where they operate.

After experimenting with this concept, we presented it to our team at Ericsson, who showed great interest in our new approach - granted, some were sceptical, but they did ask questions and asked about the functionality and opportunity areas nonetheless. The insights from these meetings allowed for the creation of a different visual hierarchy, an overview for the node you are checking and the status of corresponding subnodes.

To finish this off, we created a presentation including new iterations unbeknownst to the client, including a polished phone concept, trailer video, and a watch companion for the consultants to get notified wherever they may be during office hours.

Design Language

Since the team was pretty large, with the professional edition of the Ericsson team as well on a semi-daily basis, it was more important than it usually is that we stuck to shared design principles and design languages. Thankfully, our client was already a well-established actor and had a design language and guidelines of their own already. This meant that it was up to us to sign the NDAs, look at the plethora of assets they provided us, and then work with analysing the current system, identifying the pain points, and finding design solutions to ease their workflow.

The shared design language consisted of a large Adobe XD document with everything from margins, fonts and spacings to actual elements, HEX codes and philosophy. With the NDA signed, and the agreement to not stray too far away from the current design, we had created an initial design language within the space of an hour-long meeting. From this point forward, we all had to decide on what margins we will keep, what we will modify, and what our new solution will look like for our client.

As a result of this, we separated ourselves for an hour and came up with design solutions and concepts, with the purpose to analyse each idea and single out both high and low lights of each concept. This later became the core of the discussion, brainstorming in a group and eventually the core of the second round of brainstorming - only this time, it was in teams of two people. These rounds gave us the space to be creative and to get a lot of perspectives on the same problem, all of which had some element that came to be a part of the final product.

Development

The results of these brainstorming sessions were all lucrative and time-efficient. We did lack some critical information from the client during the first week of the four-week project - which in our eyes were a pretty significant amount of time. This reason alone made us keener to get the ideation started even without the proper foundation from the client. Fortunately for us, during one of many check-in meetings with the client, we were given the last information that we needed, and it turned out that we were about 80% correct in our assumptions. This did not only save us some time, but it also gave us a significant confidence boost and increased trust in us as a team from the client’s side of things. This excellent news allowed us to get our hands dirty with our first sketches, refine and merge them until we eventually had the core triad of screens for our concept.

Big Data Visualisation

The first screen was the client/node dashboard. 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 square-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 subnodes 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).

Big Data Visualisation

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.

Big Data Visualisation

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. We created something right up their alley based on the insights they gave us during the various briefings we had with them. Additionally, we created a system that the client liked, considered implementable, and would fit clients of ten people up to tens of thousands of people. As this project was over, the team received the following message from the UX team at Ericsson:

“What you have managed to accomplish in almost 4 weeks, is quite remarkable! The prototype looks professional, and the concept is quite generic such that it could apply across various use cases with minimal additional effort. This forms a solid foundation to build upon all the feedback gathered. Great work, students!”
- Contact person at Ericsson, Sweden

Client

Ericsson

Agency

Hyper Island, Karlskrona, Sweden

Date

2020.11.23 - 2020-12-22

My Role

Conceptualisation

Product Definition

Design values and standards

Creating the Sketch UI Kit

Usability testing and validation

Design workflow management

Providing directions to the design team

Design Tools

Adobe XD

Adobe Illustrator

Adobe Photoshop

Credits

UX TEAM

Damon Asadi, Robin Bahlenberg, Nimeeta Bansal, Benjamin Gabernig, Guðmundur Björnsson, Ninian Tersmeden

ERICSSON TEAM

Patrik Algotsson, Shiva Abdi Farzaneh Pour,

VIDEO CREATOR

Guðmundur Björnsson