User-Centered Map Visualization of Career Growth
Bachelor thesis project
April 2020
Embedded Files
Energy Guardians — Gamified Employee Onboarding
Client: energy consulting company Optimal Energy
Duration: September 2019 to April 2020
My responsibilities: user research, UX design, front-end programming
What was my task?
Context
Optimal Energy offers its new employees a gamified application that helps them with onboarding and career growth. During the onboarding, employees grow their client base from a few people in their region to many households across the whole country. The gamified onboarding application should thus offer a visualization of the client base and its growth.
Thesis research topic
The thesis studies information visualization in games and gamification in information visualization. My question was: How can we gamify a map visualization of career growth? How can we make it playful and fun?
Goal
Provide an energy consultant with a visual overview of their client base and motivate them to grow.
Users
New employees of an energy consulting company Optimal Energy.
Technology
Figma & Vue.js. I coded an interactive web-based prototype of the application.
1
Link together visualization, gamification, and UX
2
Design a map visualization of an employee’s client base
3
Document the design process
4
Implement an interactive web-based prototype
The Process
I researched information visualization in video games and showed several examples of how modern games use visualization
I studied how information visualization can be gamified and what game principles can be used in playful visualization
I gathered requirements from the company and conducted user research with their employees
Based on the research, I proposed a playful design of client base visualization for gamified employee onboarding
I implemented an interactive web prototype that we later tested with users
Research & Requirement analysis
The project included various types of research:
I looked at playful visualizations and games. How do games use visualization? And can visualizations adopt some game principles? Take a look at my findings directly in my thesis in the 2nd chapter.
I analyzed the company’s requirements and the context of the map visualization. To read about gamified onboarding application Energy Guardians and the requirements analysis, check out the 3rd chapter here.
I conducted user research and described my user persona, which you can find in the 4th chapter.
Prototyping
During the design process, I followed the design thinking approach. I started from paper sketches, continued in Figma, and finished with web-based interactive prototype. In each phase, I discussed my designs with the company representatives and potential users.
Low-Fidelity Prototype
In low-fidelity prototyping, I addressed the following design problems:
Information hierarchy
What information about the client base should be displayed, where, and how? I considered various layouts of the information, and I proposed several types of progress visualization, such as pie charts, sparklines, and progress bars.
Visualization of Progress
Based on the client base size, an employee can have a certain level of a region. I considered various ways to show the levels in the map: The first versions (on the left) included an icon over each area indicating its level. Later, I chose to use a choropleth map—to indicate the level of a region with its fill color.
Map Aesthetics
The map visualization should adopt game aesthetics: in games, maps are often tessellated with polygons that divide the area into smaller regions. The map visualization of the client base also consists of regions and districts of the Czech Republic which could be mapped to polygons or tessellated.
The above picture shows three different approaches to representing the area with polygons: (1) each area is represented by a hexagon; the polygons are of different sizes and are not connected, (2) each area is represented by one hexagon; the hexagons are all the same and are connected, (3) each area is represented by a compound polygon which is tessellated with small hexagons.
Medium-Fidelity Prototype
After discussing the low-fidelity sketches with the company and potential users, I continued designing a medium-fidelity version in Figma. In medium-fidelity, we mainly focused on map aesthetics and the information layout.
Map Aesthetics and Tessellation
After comparing our options, we agreed to tessellate the areas with small hexagons and outline each area with a bold stroke. The other option—big hexagons representing one area each—was rejected because it would damage the readability of the geography which was based on the actual map of the Czech Republic. The picture below compares these two approaches on the map of the whole country, with regions highlighted with corresponding colors.
Information Layout
Information about the client base is positioned on the right of the screen, and further details about a specific area appear when the user hovers over it (see picture below). Moreover, the information about the user’s client base is separated from the statistics of the whole company, and the alert message is highlighted with a color that is used across the application for warnings. Colors indicate the levels of areas in the map and specify which area provoked the warning message.
During testing the medium-fidelity prototypes, we discovered several drawbacks:
The hexagons were still too big, and they distorted the geography.
It was difficult to read the levels from the colors—there was no legend to guide the users.
With a warning color over an area, the user could no longer see the blue color indicating the level of the area.
High-Fidelity Prototype
The next step was implementing a web-based prototype. This was no longer a clickable Figma mock-up but a fully interactive prototype coded in Vue.js. In this iteration, I focused on the following problems:
Indicating State
Every region has a game level (indicated by its fill color) and a state—normal, warning, error. The warning and error states indicate that in the area, there is a client that requires service (warning) or whose contract will end soon (error). In the medium-fidelity prototype, I used a specific fill color for the warning and error state—the user could see the area’s status but lost the information about the level. To avoid information loss, I experimented with various types of status indicators, which you can see below.
Later, I considered using icons placed over areas, but some areas’ geographies were too narrow or irregular to accommodate an icon.
Finally, I used an animation: the area’s fill changes from level color to warning or error color in set intervals.
Navigation through Zoom Levels
The implementation showed that some needed to be further elaborated—like the interaction of zooming the map. The user could click an area to easily move to a lower zoom level (i.e., from the country to a region and from a region to a district), but there was no obvious way to go back to the upper level (e.g., from a region to the country).
I considered several solutions: to return to the upper level,
the user would click outside the selected area,
scroll out with the mouse,
or click minus-plus navigation buttons on the screen.
Eventually, I opted for an alternative to the navigation buttons: clickable miniatures of the map visualizations. Not only the navigation allows the user to move between zoom levels, but it also keeps visible the context of the selected area. The user can examine the area they selected without losing the overview of the rest of the map.
Below you can see two layout versions of the legend and navigation. The first one, with the navigation below the map, felt less natural to most users. During testing, some of them described the position of the navigation as counterintuitive and odd, so I moved it to the top left, where there is usually a back button or a breadcrumbs navigation in other systems. Further testing showed that this layout was easier to understand and faster to navigate.
Final Steps
After several rounds of testing and improvements (those described above and a few others that you can read about in the thesis), the major sources of confusion were removed, and the users could perform all assigned tasks without difficulties.
All the test users liked the visualization’s aesthetics, and most appraised the interaction as pleasant and engaging. Employees from Optimal Energy shared many valuable insights during testing. Using the high-fidelity prototype, they could better imagine the possibilities and started inventing new desired features for the Energy Guardians application. The testing sessions generated new insights; I gathered the feedback and suggested a possible future extension of the map module, where additional information would be displayed below the map.
If you made it down to this point… Thank you for reading! 🤗 Or scrolling, at least.
Next, you can check out the actual thesis (if you haven’t already) or try to play around with the interactive prototype at market-map.surge.sh. (Only in Czech for now, sorry!)
Any remarks? 💡 I’d be delighted to discuss gamification, visualizations, design, life, universe, and everything! Reach me at LinkedIn or via email.
Google Sites
Report abuse