Pascal Car Mobile

Interaction Design: Pascal Mobile Flow

Phone Angle 2.png

I completed this project as part of my Interaction Design & Prototyping class at the University of Washington. The intention was to explore affordances, feedback, and feedforward for an assigned (fictional) company and persona. Through the multiple iterations, I learned to tie 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: 

 The persona

The persona


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

  • Image conscious - the app has to be aesthetically pleasing
  • Aspirational - the app has to have a "high-end" feel
  • High-spending (she falls into one of the highest spending age-ranges) 
  • Unconcerned with detailsEven for important tasks, she needs to find the functionality needed easily without too much attention drawn to information 

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

The Scenarios


SCENARIO 1: Claudia signs up after buying her car

This scenario (available in full here) was created for the sign-up flow. The persona sheet mentions that Claudia relies on her brother to send her app requests. In the sister project, her brother had convinced her to check out Pascal's "car configurator." This scenario picks up from there and talks in a more detailed way about her signing up on mobile after she has bought the Pascal. 

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. 


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 here was 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. 

As a touch of convenience, she has the option of a notepad, where she can note the location of the car by lot number or by landmark ("Behind the red building next to the stop sign"). She needs this because she does a lot of travel by car, even a few blocks and needs to find the car easily. 

Another touch of convenience is honking and lights flashing, which enable her to locate her car in space in case she is in a multi-story car park. 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. As ever, feedback and feedforward are critical, as the corresponding buttons glow in time with the rhythm of the function. 

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 helpfully 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.

Since Claudia prefers to not have too many inconveniences, a 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 information architecture for the app buried some of the functions like Performance. The main point of contention raised by my professor was whether I should've put the performance statistics three levels down. My logic is that my persona was not that interested in details. Simultaneously she is also an auditor, which means she will 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

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

In the first scenario, she is told that the “Home” screen is next during her account creation. The notification icon shows not only that there is a notification, but also the number of notifications. In the Performance screen, she is shown how many miles to the next service (a negative value shows that the service miles have elapsed).

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.

The scenarios are apt because they indicate two different modes of “knowing” the car, as a brand new user and as someone who has lived with the car for a while. In addition, it takes everyday hassles like locating the car and remembering service times, and reduces them to the point where they can be incorporated into the app.