The power of the data:
OVERVIEW
This project was born from the client’s need to have the relevant data to evaluate user engagement and in this way, detect possible areas for optimization. Our goal as software providers was to provide an easy-to-use and intuitive platform that would allow for agile and user-friendly data querying and segmentation while building a flexible foundation that would be easy to scale and iterate.
Role
Lead Product Designer
Scope
Conceptualization | Information architecture | UI/UX design | Design system | Responsive design |
CHALLENGE
Before this project, the clients requested the usage data of the platform and the engineering team extracted the information available in the system. Subsequently, the compiled data was delivered in excel format and on some occasions it went through the design team for the layout as an infographic file.
The customer’s need was to have a tool that would allow them to query the data themselves to measure the user engagement and the platform usage, and in this way to improve the learning outcomes.
PROCESS
Research
Given that the project arose from the customer’s need, the starting point was the analysis of the feedback received after various follow-up sessions. Thus, we delve into the use case and identify the key objectives:
- The records should be consulted quickly and easily.
- The information should have a clear and understandable visual language for all users.
- The data should be exported maintaining a high visual impact to promote the exchange of information in the original format.
Technical context
At that moment, technically speaking, the system already tracked relevant information. Therefore, an early phase of the conceptualization was to inventory the type of data. In this way, we could cross-match the data with the user’s needs to define which outcomes could be viable, and what data needed to be added to the system
Ideation
After the analysis of the feedback and the technical data inventory, we conclude that the outcomes that we would include should provide relevant information to allow the customers:
- to analyze the engagement level of the users
- to have a record of countries in connection (user location)
- to measure the level of attendance in the sessions
- to measure the level of use of the e-learning platform
- to filter the data to facilitate the use and visualization
UI definition
Content architecture
The interface needed to be clear and intuitive. Therefore, the content structure was essential to facilitate the smooth user workflow.
Different versions considered for content architecture
Based on the use case of the e-elearning platform, we defined the following content blocks:
- Full overview of the organization data:
Where the data could be consulted at a global level and the list of existing rooms would be accessible. - Room detail view:
Once a room has been selected, its specific data could be consulted and two lists would be accessible from there:- the list of sessions created within that room
- the list of users that are members of that room
- Session detail view:
Once a session has been selected, its analytics and the users who attended it could be consulted. - User detail view:
This view can be accessed in two ways:- from the list of members of the room
- from the detail view of the sessions in which the user has participated
UI design
Layouts design
Once the architecture of the portal’s content was defined, we began to define flexible and scalable layouts that would allow an easy evolution.
Within each screen, independent information modules were defined, following an infographic aesthetic with high visual appeal that clearly marked the hierarchy of the information displayed. This type of structure would allow us to remove or add new blocks in the future in an easy way.
Responsive design
With the premise of generating a flexible layout not only to facilitate the scalability and evolution of the content, but also the adaptation to different resolutions and devices, a structure was established based on:
- four columns layout:
- one for the sidebar
- three for the main content area
- four breakpoints for the definition of media queries:
Ranging from desktop view to a minimum resolution of 320px for mobile devices
https://www.youtube.com/watch?v=4HzFqblpVDE
CONCLUSION
The portal has become an essential piece for clients who now have direct access to all the analytics instantly, and the feedback received has been very positive.
Working on data visualization makes it necessary, more than ever, to find the balance point between functionality and aesthetics, understanding the latter as a vehicle to achieve a clear and intuitive hierarchy of information.
