Presto Redesign

In Collaboration With:

 

Ruben Meitardjian

www.rubenxdesign.com

Objective

The root of this project was within Heuristic Evaluations. It was about choosing an application, and assessing how well it met usability principals and standards.

What is a Heuristic Evaluation?

A method for finding usability problems in a user interface according to recognized usability principles (heuristics).

Brief

We started out by looking at the applications we use daily. Then we found Presto, which had a 1.5/5 star rating on the app store, with such a modern and simple interface we were rather perplexed how it could be so bad. The app was designed to allow the user to check their balance, load funds to their card, and check transaction history, simple right?

Intro Screen

The first screen that greets you when you open the Presto app was the terms and conditions, followed by the Privacy Policy. Both of which are just massive fields of text, back to back, overwhelming the Presto customer. To fix this we took them away, replacing them with check boxed and drop-down menus. Creating a less overwhelming page of the new customer.

Original
New

That was not the only issue with the home page, however. Once they got past the home page they were greeted by the sign-in screen. Now sounds simple right? However, the sign-in page seems to give you 2 options sign in with your account or sign in with your card info. In fact, all the copy on the card side says sign-in. We all tried it just to get a message that we have an account and need to sign in with that account. The card number side is a registration. To fix this we made it a designated sign-in page and added a CTA to brin the Presto Customer to the register page.

Original
New
Consistency & Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing.

Registering Card

The original registration screen within the Presto app asked you to give all your card info then the bottom button said sign in. Confusing any customer thinking that they could log in without their username and password. To then just give them an error message saying this card is linked to an account please sign in with that account. Causing a lot of frustration. We made the register page accessible by a button as shown above and created a separate page for registration with the appropriate copy.

Original
New
User Control & Freedom

The emergency exit of the user experience world, allowing the customer to go back should they click the wrong thing.

Forgot Password

Accidental taps happen a lot especially on phone screens since the touchpoints can be so small and out fingers are often larger. The customer could also be like us and have forgotten their password. The Presto app would take you out of the app without any warning if this happened to you, it would also give you no way back to the application if you did this by accident. To fix this we wanted to move forgot password into the application, as well as use SMS verification codes to approve it.

Original
New
Trying to Load Funds

We ran into this issue of the customer not having an emergency exit on the loading funds page as well. Once the customer has entered the amount they wanted to load onto their card, and they went to make a payment they were greeted by a very different looking screen. Without a back button. If they changed their mind and wanted to use Appl Pay over their credit card they would have to quit the app and start over.

Original
New
Aesthetic & Minimalist Design

The Design is free of unnecessary content that is rarely needed

all aspects are consistent and visible

Card Loading Payment

Referring back to the previous heuristic issue of the payment screen, it has a very different aesthetic of the rest of the application. It is extremely coloutful, the buttons and tap points have no relation to the main app. The buttons to confirm payments or cancel are very skinny making them hard to tap. These buttons also have a terrible gradient making them hard to read. In order to fix this, we needed to start from scratch. We took the aesthetic of the rest of the app and created all the components to make the customer more familiar and less confused by the different screens.

Original
New
Autoload

Another feature of the Presto application is the ability to set up Autoload. Having your card automatically refills itself when the balance drops below a certain amount. Now this feature was there the whole time, however, the payment screen is a completely different one from the Load Funds screen. Which will create a confusing experience for the customer. The original screen also includes input fields that cannot be filled out, and are unnecessary. To fix this we removed these input fields creating a less cluttered experience for the customer. Then we took the format and layout from the Load Funds screen and adjusted it to work with the Autoload setup.  

Objective

The root of this project was within Heuristic Evaluations. It was about choosing an application, and assessing how well it met usability principals and standards.

What is a Heuristic Evaluation?

A method for finding usability problems in a user interface according to recognized usability principles (heuristics).

Breif

We started out by looking at the applications we use daily. Then we found Presto, which had a 1.5/5 star rating on the app store, with such a modern and simple interface we were rather perplexed how it could be so bad. The app was designed to allow the user to check their balance, load funds to their card, and check transaction history, simple right?

Intro Screen

The first screen that greets you when you open the Presto app was the terms and conditions, followed by the Privacy Policy. Both of which are just massive fields of text, back to back, overwhelming the Presto customer. To fix this we took them away, replacing them with check boxed and drop-down menus. Creating a less overwhelming page of the new customer.

Original
New

That was not the only issue with the home page, however. Once they got past the home page they were greeted by the sign-in screen. Now sounds simple right? However, the sign-in page seems to give you 2 options sign in with your account or sign in with your card info. In fact, all the copy on the card side says sign-in. We all tried it just to get a message that we have an account and need to sign in with that account. The card number side is a registration. To fix this we made it a designated sign-in page and added a CTA to brin the Presto Customer to the register page.

Original
New
Consistency & Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing.

Registering Card

The original registration screen within the Presto app asked you to give all your card info then the bottom button said sign in. Confusing any customer thinking that they could log in without their username and password. To then just give them an error message saying this card is linked to an account please sign in with that account. Causing a lot of frustration. We made the register page accessible by a button as shown above and created a separate page for registration with the appropriate copy.

Original
New
User Control & Freedom

The emergency exit of the user experience world, allowing the customer to go back should they click the wrong thing.

Forgot Password

Accidental taps happen a lot especially on phone screens since the touchpoints can be so small and out fingers are often larger. The customer could also be like us and have forgotten their password. The Presto app would take you out of the app without any warning if this happened to you, it would also give you no way back to the application if you did this by accident. To fix this we wanted to move forgot password into the application, as well as use SMS verification codes to approve it.

Original
New
Trying to Load Funds

We ran into this issue of the customer not having an emergency exit on the loading funds page as well. Once the customer has entered the amount they wanted to load onto their card, and they went to make a payment they were greeted by a very different looking screen. Without a back button. If they changed their mind and wanted to use Appl Pay over their credit card they would have to quit the app and start over.

Original
New
Aesthetic & Minimalist Design

The Design is free of unnecessary content that is rarely needed

all aspects are consistent and visible

Card Loading Payment

Referring back to the previous heuristic issue of the payment screen, it has a very different aesthetic of the rest of the application. It is extremely coloutful, the buttons and tap points have no relation to the main app. The buttons to confirm payments or cancel are very skinny making them hard to tap. These buttons also have a terrible gradient making them hard to read. In order to fix this, we needed to start from scratch. We took the aesthetic of the rest of the app and created all the components to make the customer more familiar and less confused by the different screens.

Original
New
Autoload

Another feature of the Presto application is the ability to set up Autoload. Having your card automatically refills itself when the balance drops below a certain amount. Now this feature was there the whole time, however, the payment screen is a completely different one from the Load Funds screen. Which will create a confusing experience for the customer. The original screen also includes input fields that cannot be filled out, and are unnecessary. To fix this we removed these input fields creating a less cluttered experience for the customer. Then we took the format and layout from the Load Funds screen and adjusted it to work with the Autoload setup.  

Original
New
Asset Library 

With all the changes made within the app, it was time to update the UI library for the Presto app to the right of the page you can find the PDF file of all the assets used within the redesign along with dimensions, in order to hand the project off to someone else or refine further in the future.

Jesse Martini Designs