Pascal mobile.png

PASCAL /// Mobile Interaction Design, Information Architecture

Interaction Design: Pascal Mobile Flow

 
Phone Angle 2.png

The Project

As part of my Interaction Design & Prototyping class at the University of Washington, I explored affordances, feedback, and feedforward. Through multiple iterations, I tied my design decisions tightly to a pre-provided persona and to tie both micro-interactions and design's gestalt to it.  

Unlike its sister project, which was only focused on a single sign-up feature, the mobile app went deeper, incorporating three user flows: 
a) Account creation
b) Car-finder
c) Service reminders

 
 

The Company & The Persona

Pascal is a high-end electric car company banking on its environmental credibility to sell to customers. It believes the best way to bring about change in the automotive industry is to create demand for electric cars by creating desirable electric cars. The persona provided for this project is shown below: 

 
 
 
 
Claudia.png

After additional market research, I outlined Claudia's personality and the attendant app characteristics.

  1. Image conscious - the app has to be aesthetically pleasing
  2. Aspirational - the app has to have a "high-end" feel
  3. High-spending (she's in one of the highest spending age-ranges) 
Facts about Pascal.png

The Pascal app designed would have to cater to these personality traits while balancing the concerns of general customers.

Wireframes

Using the existing persona provided for Claudia, I built out wireframes for each function I had chosen to build out. This involved more than 10 pages of wireframes, so shown below is the process for reaching just the home page. Each iteration moved closer to justify Claudia's persona. 

Wireframe evolution.png

The Scenarios

Feedforward1.gif

SCENARIO 1: Claudia signs up after buying her car

This scenario (available in full here) was created for the sign-up flow. Claudia relies on her brother to send her app requests. Her brother tells her about Pascal and she's excited enough to have bought one. 

A large part of this scenario was making the account creation as seamless as possible. To that end, the password requirements are handily provided, and the user's attention is drawn to the instructions in case she provides an inadequate password. This provides valuable feedback. 

Feedback1.gif

In addition, two types of feedforward are provided: 
a) An arrow on the top right, showing that the home screen is only a few keystrokes away
b) A "dead" log in button telling Claudia that the element isn't clickable until she provides all the information needed. 

SCENARIO 2: Finding the car
The second scenario (available here in full) deals with the customer having to find a car parked in a multi-story car park.

The aim is to reduce the amount of inconvenience for Claudia since she doesn't like details too much. She would just be able to click on the locate icon to find her own orientation in space relative to the car. 

If she has forgotten where a particular lot is, she can turn on her headlights and honk the horn a few times to locate the car.  

 

SCENARIO 3: Getting important information

Notification flow.png

The final scenario (available here in full) deals with something a little more complicated: Ordering service for a car when it's batteries are flat. She is provided feedforward with the little red bubble marked “2” on the home screen notifications tab. On the notifications screen, she is provided a list of all the firmware and physical updates the car has received, and the news that her car is ready for service.

The challenge here was to provide her the information she needed without giving too much of it. However, as her profession is that of an auditor and is comfortable with graphs and numbers, I felt it wouldn't be too far out of her comfort zone to couch the option to contact service within a series of interactive graphs. 

Information Architecture

The point of contention with my professor was whether I should've put the performance statistics three levels down. My logic is that while Claudia isn't interested in details, she is also an auditor, which means she might have some skill in reading graphs. 

As a result, I put the "Set up next service" button below the graphs. 

App IA.png
 
 

Final prototype & design rationale

Colors and Typography.png

The idea of feedforward is incorporated throughout the app to tell Claudia not only where has been but where she is going.

iOS guidelines have been followed in the design. This is seen at the top level, with the screen header having the familiar network and time options. It’s also seen in some lower level mechanical elements, like the translucent keyboard.

The architecture of the app is mostly hierarchical with a few Experience-Driven navigation elements e.g. Notifications directly leading to relevant screen.

From the high-level principles, depth and hierarchy are provided by sparing use of drop shadows, gradients, and typography. Negative space is also used to highlight these effects E.g. user can “see through” the car icon to see the purple bar below.

Purple is also the main color scheme of the app, distinguished by its frequent use in high-end contexts, which Claudia aspires to.