Pix - Internet Banking
How I transformed a mobile app in a website decreasing the learning curve.
The challenge
In October 2021 I was faced with the challenge of continuing the work of another designer, in addition to transforming the app into a webpage.
How to transform an mobile app in a website decreasing the learning curve?
The concept of Mobile First
The concept de Mobile First, as the name says, refers to create projects focused firstly in mobiles devices and then in a desktop and other platforms.
The majority of the companies use to develop their projects thinking about desktop as the main device. From that, it is adapted to acomplish the demand of the mobile devices. With the Mobile First concept is exactly the opposite.
A survey carried out by the Internet Management Committee in Brazil (CGI.br) shows that almost half of Brazilians who access the internet prefer smartphones. Of the 120.7 million people who accessed the internet in 2018, 49% of them only used their cell phones. 47% of users connected via computer and cell phone and 4% only via computer.
This article wrote by William Leal says:
“The learning curve represents the initial difficulty in learning something new or in executing a task in a different way. The more time invested in learning a particular task, the greater the cognitive load generated.
When you create a new interface, which is different from the old standard, or which is unfamiliar, it will take much more time and willingness for the user to learn the new interface than to continue using the old one.
As designers, we have to get the user’s life easier, decreasing the cognitive load that results from the fact of the user having to learn something new. The less energy a habit needs, the greater the probability to happen”.
With all this information, the more similar the mobile app is to the website, the less energy the user had should spend to adaptate to the new platform.
Then the goal became:
To create a solution that helps the mobile user to use the desktop version, feeling familiarity with the interface and so decreasing the conflict during the use.
I choose the Pix functions to show my solutions.
Pix main page
I transformed the Pix dashboard into a hover menu in a side menu bar.
The hover menu can be accessed by a side menu bar, and the icons and names still the same. That way, the number of pages was reduced but the same functions can still be finds.
Key manager
The key manager in the mobile device consisted in a screen with a lot of informations and a modal that used to complement the actions with the keys.
Pix scheduling
The Pix scheduling in the mobile device has a revision page that guides you to a new page with a calendar. In the desktop version the calendar is a modal, so the user can set a date in the same screen and keep touch with all the informations about the revision.
Pix informatives
In the Pix informatives, in the mobile version, it used to open a modal fully covering the screen with some informations that the user needed, so the user had to close the modal to access one of the options. In the web version the informations are kept in the same screen, and the user keep having contact with the option it needs to choose to proceed.
The example below is about the differences between Dinamic QR Code and Static QR Code.
Conclusions
The concept of Mobile First takes us to a reality where great part of the population uses the cellphones to complete daily digital tasks, and because of that the mobile devices should be a priority.
As my first desktop project, understand this concept made the creation of the web version easier, besides gaving me a solid base to begin the project.