top of page

BP2I Trivia Platform

date. 2019

client. French Bank - by IBM MSC

 ï’ž   Deliverables​

Sketches. UI. Prototype.

 ï“¼   My Role​

UX/UI Designer

   The Team​

Squad: UX/UI, Game Designer and Devs

BP2I is a learning platform developed for finance managers in which they can measure their employees' knowledge of specific topics.

Trivia-Bp2I.png

Goal

​

Our IBM team was hired by this Bank client with the following problem already stipulated: "How to ensure greater learning efficiency from the IT team?"​

​

​

Challenges

​

  • Test knowledge - After unsatisfactory events within the Bank, the need to retrain the IT team, but they wanted to do this in a more attractive way;
    ​

  • Collect data - Was super important to make it possible for managers to collect metrics in personalized ways;
     

  • Lack of access to employees - For contractual reasons, we did not have direct access to employees and managers to do interviews or tests;​
     

  • Timezone - While the game designer and I were in Brazil, the development team was from Bratislava, Slovakia, so there was a 5 hour difference of work.

​

​

Process

​

Since we did not have the access to the employees, the way we found to work was through iteration process.

​

That means that for each feature we defined a functionality, prototyped, valideted with the client, started to develop and send them for testing.

design-iteration.png

Research

Even though it was not possible to have contact with real and end users, it was possible to map the two fronts that had different needs through the following proto-personas:

Proto-persona (employees).jpg
Proto-persona (manager).jpg

Ideation

The solution

​

​The BP2I Trivia Platform was then created. A learning platform that uses trivia methods in which the user can choose the questions they want to answer based on how many points the questions give, with the aim of guaranteeing minimum grades in each of the courses.

​

​

As part of the main scope was the "attractive" aspect, we used gamification techniques as trivia to learn the modules, avatar customization and ranking. In other words, when employees enter the platform they could choose their avatar, choose the courses they want to take in the order they want, tracking their progress and their position in the company ranking.

​

On the managers' side, we designed 4 types of techniques to extract metrics, which I present in more detail below.

​

​

User Flows

​

Through the user flow of the two proto personas, it became clearer to understand functionalities and their connections.​

USER FLOW - EMPLOYEE VIEW.jpg
USER FLOW - USER FLOW - MANAGER VIEWEMPLOYEE VIEW.jpg

Prototype

Hi-Fi Prototype


As the project developed over time, we made the screens in high quality after validating the flows. The big difference here was that, as we were talking about an immersive, timed, gamified experience, we suggested to the client the adoption of the dark theme and it was well received.

​​

​

Home page and Topic Selection page

​

Home page with customizable avatar showing progress the progress and with two buttons for continue the trivia and the results already achieved and the topic selection page on the right

e18a5682446251.5d1d9940cd77d.png
50497282446251.5d1d9940cd9ea.jpg

Question level selection page and Question page

 

After selecting a topic, on the left is the question level selection page with its corresponding score and on the right the question page itself.

28c1a082446251.5d1d99414fc7a.png
8f8d7082446251.5d1d994150315.png

Results page

 

Below is the spider graph of results. It presents the employee with their performance on the topics already answered and the comparison in relation to other employees.

e4574282446251.5d1d9941987e6.jpg

Login page and Home page for the administrative panel

 

Administrative panel for managers showing the login page and the home page with access to reports, users management and management teams.

admin_bnp_paribas-1.jpg
admin_bnp_paribas-2.jpg

Reports page

 

And here we have the types of reports created: Spreadsheet (focus on each employee), Spider Chart (allows one-time performance comparison between teams, between departments, between employees), Topic Details (demonstrates an overall performance of each of the topics) and Question Perfomance (demonstrates the performance of each question within a selected topic).

d684b382446251.5d1d99423ba09.jpg
3e0b0382446251.5d1d99423bd70.jpg
admin_bnp_paribas-5.jpg
021ec382446251.5d1d994284aa7.jpg

Validation

Conclusion

​

After implementing the first themes on the platform, the response was positive, especially from managers. They liked the dynamic way they could not only export different reports, but also compare: entire teams, direct employees and employees in relation to teams.

 

Unfortunately we didn't have feedback from employees as to whether we could really do something more fun, but with engagement we hope so.

Learnings

​

This project brought a lot of learning in:

​

  • The creative way of testing and validating the solution without direct contact with users
     

  • In the way of applying gamification in a slightly more serious project
     

  • In being able to explore new ways of displaying reports in more interactive graphics
     

  • And mainly working the agile methodology globally since our client was French, the developers from Slovakia and myself and the game designer in Brazil.

​

kelly-sikkema-xcvXS6wDCAY-unsplash.jpg

All illustrations presented here are by Giovanna Zanettim. Template by Urban Artist.

bottom of page