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 was going to 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, which at the time of the project contained users, clients and customers adding up to a total of 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, and that remained our top priority as well as getting a clear understanding of what the brief was about and what assets we could use. This however took quite some time and we had to start the experiment without receiving much information in order to take advantage of the time we were given as much as possible. As the final pieces of information finally arrived, we were faced with 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 be able to get in touch with what the client needs, who is 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 important to know their exact needs, visions and assets in order to make as good of a product as possible. This was done through 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.

Approach

To determine how to best visualise the vast amount of data that is used by Ericsson, 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 have already created several iterations from the small about of resources that were 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 get an overview of 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. Following these meetings, an additional visual hierarchy were created as well as an overview for the node that you were within as well 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 as well as a watch companion for the consultants to be able to get notified wherever they may be during office hours.

Design Language

Since the team was fairly large, with the professional addition of the Ericsson team as well on a semi-daily basis, it was more important than it normally is that we stuck to shared design principles and design languages. Thankfully, our client was already a well-established actor and has a design language and guidelines of their own already - so for us it was to sign the NDAs, look at the plethora of assets that they provided us and then get to work with analysing the current system as well as identifying the pain-points as well as 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 the following: What margins are we going to keep, what will we modify and what will our new solution 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 concept 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 did not only give us the space to be creative but also 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 really lucrative and time-efficient. We did lack some important information from the client during the first week of the four-week project - which in our eyes were a quite 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 as well as 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, refined and merged 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 with this 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 create clear visual indicators over the status of the collective node and subnodes within the selected category. By 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 in such a way that you could, easily get the most essential data in a compact overview without having to navigate into the client/main 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 can either navigate through the list of all the clients /main nodes that you’re in charge of, or you can highlight your faviourites 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 all the way 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 by having it as a subtle effect behind the grid view and having it 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 same node count and status along with 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. Not only did we create something that is right up their alley based on the insights that they gave us during the various briefings we had with them - but we also created a system that the client liked, considered to be 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