User Requirements
The project was entirely focused on attending to the user's needs.
Work Type: Full-time job
Project start: Ago 2019
Timeline: 5 months
Services: UI, UX, User Flows, User Research, User Testing, Product Design.
Design tools: Figma, pen, paper and post-its :)
Client: Cielo
Context: Cielo is the largest Brazilian credit and debit card operator and the biggest payment system company in Latin America by revenue and market value.
The Project NGC
NGC means "Negociação Grandes Contas" (Big Account's Negotiation) was an internal system focused on the big players in the financial market, used by the Comercial Department.
The issues
The existing system was obsolete and only worked using Internet Explorer 6.
It was not responsive and it was built with no UX applied.
Another issue was the performance that the website had, it was extremely slow (the access to the database used to take up to 30 seconds.)
After user research, it was mentioned that the layout and the menu content were confusing and full of irrelevant information (according to the users).
Decisions & goals
The Product Owner didn't want to recycle any of the old system's database and wanted to build a brand new system with an intuitive and cleaner layout.
Need for a new user-friendly and responsive system with better performance and that any browser can display.
The first chunk of the system flow I created using Miro.
My role
I managed to work on the conception of the idea, which I was able to assist with from the beginning of this project. After understanding the business itself, the manager's problems and what was the users' pain points, I was able to apply some methodologies to help in the process of the development of this digital product.
The Research
First, I learned about the users. The Comercial Department responsible for selling the POS (credit card machines) to the big companies is known as "hunters", and they are the primary user of the NGC.
I applied a survey to capture some of their pain points and applied the results to improve the new layout. One of the new features was the display of information through tabs, which made navigation easier for the users.
File: Pesquisa de usuário para o sistema NGC.pdf
After user research, the unhappiness and criticism of the old system's complexity in displaying information were clear.
I also did a user testing session online and offline at the company.
I have applied the Double Diamond model, passing through each stage, from research to validation.
Teamwork
I am a strong team player, and I work closely with the developers, especially the Front End developers.
They decided to use Angular 7 (the current 2019 version) on the Front End so this decision made the whole UI prototype creation easier for me because I am familiar with this technology. I used the Angular components to create a simple and intuitive layout for the users on Figma.
I created a mind map of the current system so the team could visualise the entire system. After that, we split into parts to prioritise our deliveries.
The challenges
I had to schedule interviews with sellers of each retail segment, and access to them was not easy. They were busy, and I had to match their available time with the interview room's schedule. In addition, some users were only available for online interviews.
We were using Scrum, and the main challenge I faced was to maintain the UI ready two Sprints ahead of the developers.
It was not about the creative part of the process that I was concerned about, but the validation with the users. Of course, nobody is better than the user at validating the product; however, as mentioned, they were tough to reach, and, regrettably, I had to validate some of the features with the PM and PO so I could move on.
The outcome
I was able to do a final user testing, and the final result attended to the user's needs.
Finally, we have achieved the goal of building a user-friendly, browser friendly and with great performance after some slight adjustments.
I used Figma to prototype the system.
Good feedback
This was the feedback I got from one of my teammates that worked in this project:
"The UX work, facilitated visual functionalities of the system, in addition to boosting the understanding of business rules by the entire team, creating the system's visual identity and great user experience."
Daniel Chistovao
Front End Developer at Stefanini
Responsive log in page. Before and After upon request.