SaaS Platform
What is TIMtalks?
The telephone company TIM annually organizes an event for its collaborators with lectures and workshops in several capitals of Brazil where the company operates. In 2019 they wanted to renew their internal portal of the event, with lectures, inscriptions, agenda and more.
The challenge
The presence control and the communication of the event were done in spreadsheets and by e-mail. The goal was to create a tool for the TIMtalks lecture cycle, aimed at its collaborators. Develop simple and intuitive navigation for employees to access event information and make their entries so that managers coordinate the participation of their teams and so that the company has a list of attendance and control of subscribers in each event.
Discover
Initial Direction
The previous portal and all its contents have been analyzed, we gathered company feedback regarding their pain and their employees and we revisit all the user flow and their levels of access. After that, I started scratching screen options and possible results in a generation of hypotheses to solve the problems to be attacked.
Survey
We had the opportunity to collaborate with TIM in the process of gathering information with their employees.
When TIM asked us to create the new portal, we asked them if we could write a questionnaire to the employees and understand their pains and what they already liked. So we did a short form with 15 questions regarding the TIMtalks previous event and portal. We had 132 forms answered and a nice amount of data to start with. We learned that the main problem with the portal was to track events and inscriptions. People had no way of seeing which lectures they were enrolled in, nor were their managers able to manage the teams. So we redesigned the user journey to better fit their needs.
Prototype
Sketches
I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.
The first sketches were made for brainstorming and the generation of ideas. With the research results, I saw the necessity to make a page for the user, with their enrolled lectures and also an admin panel, for the managers to see their employers' enrollment.
I sketched (pen and paper) about 5 versions until achieving a propper layout with all the architecture of the user needs well resolved. The main changes between these versions were in the user area and in the management screen. Without those sketches, I wouldn't understand the user flow and the decision path they had to make. I wouldn't be able to get the results I expected because some functionalities (as live videos) were not planned from the beginning.
Wireframes
At the beginning of my design process, I created wireframes for testing purposes.
Thanks to that, I was able to run some internal tests and mobile resizes and adjustments. First, with low-fidelity wireframes and then with some high-fidelity ones. The wireframes were created in Adobe XD, both design and prototype. Most of the tests were made inside the squad and with stakeholders. In total, we had 7 iterations in that part of the process, until reaching the final version, ready to be deployed to development.
Ideation
With the results of our tests in hand, it was time to make some adjustments and course corrections.
I created a navigation flow based on the agenda of the event, with easy links so that the user could find the desired area and also have access to the events in which already it is enrolled. I also recreated the event search and tagging filters. A flow for managers was also created and for the visualization and management of the presence lists of the events, by the company.
Design
UI Design
Following our structure, with all the tools needed for this project put in place, it was time to refine the design and to create all the screens for the new experience. All of that respecting the company guidelines and design components.
The whole layout was also reimagined for its mobile version, providing a pleasant and fluid experience that does not detract from the functionality or end-user experience.
.png)
Analyze
What have I learned?
When starting a UX project always ask yourself, “Am I taking the right direction based on all information I know about the project?” and, “Do the business goals support the user goals?”.
When working on the TIMtalks portal redesign I came up with a nice retail visual design at first. It synergized perfectly with the client’s branding, but I kept asking myself “Will this really make an impact on the employees or am I doing this just because I like it?”. With those doubts in mind, I used the feedbacks and user testing results to design another approach and came up with a new style that was even more effective. It still complements TIM’s branding while giving the website a highly desired, modern look.