Jayson Cheung

Knowledge Consultant |
UX Designer

Presto Smartphone App

- User Experience Design -

School Group Project

Project Role

Low Fidelity Sketches - Sketcher (All)
Mid Fidelity Prototype - Designer (All)
High Fidelity Prototype - Designer (All)

Methodologies

This project's objective is to design an iOS application for the Presto contactless payment system. This system is used for fare management on public transportation in the GTA region of Ontario for services including the GO train, TTC buses and subways, and YRT/Viva buses.

Iterative Design was the methodology used for this project. We began with a brainstorm and functional specification outline for the four requirements of the project:

  • 1.) Creating an Account
  • 2.) Loading / Reloading Account Balance
  • 3.) Retrieving Account Balance
  • 4.) Fare Payments

Low Fidelity Sketches

We began with hand drawn sketches on an iPhone template to mockup our ideas for each requirement. The emphasis of these sketches was on function completion and content placement. For example, we included drop-down menus, forward/back buttons and pop-ups for contextual navigation within steps in a function, and designed a bottom menu for global navigation.

Mid Fidelity Sketches

The next step in our iterative design process was to validate our design, and we received feedback from our instructor on our low fidelity sketches. He noted that our sketches should include more annotations on the interaction design, as it is otherwise hard to tell what interactions would take place. We took the recommendations and created a mid-fidelity prototype on Balsamiq Mockups 3. On this platform, it afforded the viewer to interact with the prototype, and we included new elements such as colour and layout as well. We focused on interaction design in this prototype, and made sure all functions could be escaped, and that users can successfully navigate between functions.

High Fidelity Sketches

The final step in our iterative design was to again validate and reiterate into a high-fidelity prototype. An important note on function feedback was given to us by our instructor, so we made sure to include feedback for function completion in our new prototype. For our high-fidelity prototype, we used Figma, a cloud-based prototyping tool on web browsers. The aim of this prototype was to deliver a prototype that was as close to the final product as possible. We focused on concepts such as interface design, colours, margins, padding, brand identity, and consistent hierarchy of fonts. We included new elements such as opacity and image assets in our high fidelity prototype.

Skills Developed

User Interface Layout

Our prototypes had to include the elements to complete the four required functions in an intuitive and easy-to-use manner. For example, we placed the section displaying a user's balance at the top of the screen to increase visual prominence, and increased the font size of the balance amount for easy visual reference for users travelling to their destinations.

As well, when users choose a payment method, we visually separated the options to choose a pre-authorized card and entering a new payment card so users easily understand that they are mutually exclusive choices. Constraints are used to guide the user through the payment information input process.

Placemaking in Design

In our medium and high fidelity prototypes, we had made sure that users were aware of where they were in relation to the application. Although we did not have access to animations such as swiping from one screen to the next to indicate directional navigation, we used other elements of visual placemaking such as opacity overlays to show users that they were configuring sub-options within a functions, and would return to the function once complete.

UI Design

We wanted to work around the key interaction of using the near-field communication (NFC) tapping action to pay and transfer between buses and subways. As a result, it was imperative to indicate the state of the NFC chip reader to the user explicitly. Users are more confident that their card will not be read in error unless the 'Ready' state is displayed.

Disclaimer: This project was developed for a class assignment in a group of two other students


External Resources Used:
Mockup psd created by D3images - Freepik.com

- Project Date -
SEP - DEC 2017

Back to Top