Twitch Payment Form Redesign

Ensuring a fast and clear checkout experience

twitch.png

Overview

This is a 3-day design sprint for Twitch focusing on an updated form design, implementing simple but effective design decisions into Twitch’s existing payment pages to create a faster and easier checkout experience for the user. 

Challenge

What to improve on Twitch’s checkout screen?

  • Remove Repetitive form fields to shorten checkout process

  • Add inline validation to minimize user errors

  • Resize purchase buttons so users can easily locate and identify

  • Add floating text fields to remind users what they are filling out, so users do not feel uncertain and confused

Twitch+-+Payment+Redesign.jpg

Solution

twitchinlinevalidation.png

Inline Validation

This new live inline validation feature will:

  • Help users locate errors more easily and immediately

  • Remove cognitive load and provide users with a feeling of accomplishment

  • Reduce the odds of skipping a required field by highlighting what is already complete

 

Floating Text Labels

This new floating text label feature will:

  • Give users context and a clear view on what field they’re on at all times

  • Provide a clean inline label experience for the user so the form is easily scannable

Twitchtextfields.png
 

Clear Call-to-Action Button

By increasing the size of the “complete purchase”button will give users clarity and direct them into taking the action you want them to complete.

Twitchbutton2.png
Twitchbutton1.png
 

Removing Repetitive Input Fields

Minimizing the number of input fields makes your form:

  • Less crowded creating a clean and minimal feel

  • More efficient for users by decreasing data input and preventing users from making more errors

 

Prototype