Sign Up Interaction - Web

Interaction Design: Pascal Web Sign Up Flow


I did this project as part of my Interaction Design 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 persona and to tie both micro-interactions and a design's gestalt to it.  

Header image.png

Tools used

Web tools used.png

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. 

Screen Shot 2017-11-27 at 1.49.14 AM.png

By doing additional market research, I outlined Claudia's personality as: 

  • Image conscious
  • Aspirational
  • High-spending (she falls into one of the highest spending age-ranges)
  • Unconcerned with details

Creating a Scenario

Claudia presented a unique challenge in that she wasn't a fit for the key selling point of environmental concern. So the focus was on her aspirational nature and her desire to be admired. 

→ Claudia gets an email at work from her brother informing her about a new high-end electric car company called Pascal and its website. He likes the Car Configurator function, because he knows Claudia likes to try out clothes from high-end brands. 
→ Claudia is excited because of the high-end status and environmental credentials the company carries. Though she drives to the gym four blocks away, she is still concerned with the prevailing status associated with environmentalism. Plus, she could get a healthy saving on petrol bills.
→ She goes to the configurator and creates a car, which is shown under “Configuration Complete” page. She likes that it require too much information. She is asked to save it, which doubles as an account creation flow and it also allows her to share the car on social media.

Wireframes & Feedback

Iteration 2.png
FInal web wireframe.png

The feedback received dovetailed around the general lack of feedforward. The third and final flow above was eventually the one that was combined with the first flow, but it lacked several elements: 

a) The create account flow needed several more tweaks in terms of feedforward. The customer needed to know what was coming next. 
b) To reduce friction, Claudia needed to have as few steps as possible, or at least make the end result more enticing. 
c) The final steps to account creation were unclear. Would Claudia have to sign in to her email to make it work? Would she have direct access after entering her information? 
d) There was no login needed, as if the person creating the configurator would have had a password/username, pressing "Save" would take them to the login page. 


Design Rationale

Feedback & Feedforward.png
Vogue font vs. Pascal font

Vogue font vs. Pascal font

There are two main principles incorporated through the design: flow and feedforward. They are prioritized because of Claudia’s personality and what she aspires to. The idea of left to right flow, which characterizes the form exists so Claudia knows that she’s signing up for something special and “progressive.” She wants to be seen in as progressive and forward thinking, and liked at the office for her tastes. The Pascal is the perfect expression of this sentiment. This is why every screen moves to the left to indicate forward movement.

Inactive vs. Active.png

Feedforward exists in two forms: The first is the progress bar at the top of every form element. It tells Claudia that she is closer to her goal, and builds anticipation to the point where she will finally be able to share her Pascal. From Nielsen’s viewpoint, it provides visibility of system status. However, she is always provided user autonomy because she can go back by clicking on the previous form element name, or escape the process altogether by clicking the Pascal icon.

Errors are discouraged by making inactive elements a translucent grey (like the “Enter” button or the feedforward on the right). She is clearly told what the password must consist of, thus anticipating errors. But if she does make an error, the same error message is red, to draw her attention to it.

Visually, the entire experience is anchored by Claudia’s preference for high-end brands and the actual car she has created. The two main pictures are the outside of the car she created and the inside of it, which is shown when she is “inside” the account creation flow, which places her in the driver’s seat. Much like Vogue, the header font is serifed to make it feel like a high-end magazine. However, sans-serif fonts are used for smaller blocks to ensure readability on screens. Serif fonts are always large to alleviate readability.

The final page allows her to access her email. If her email is Yahoo or Gmail in the form, it will open that page. If she is logged in, it will go directly to her inbox. Further, she is shown the share icons to socially share her preferences.

Prototype video