Overview

To continue expanding our practical skill set, let’s explore the necessary steps for designing a transaction.

Instructions

1. Pick a multi-step transaction you encounter online. The transaction should have several different pages and input fields (so, no mailing list sign ups). Here are some good examples: Purchasing airline tickets, Signing up for a recurring service, Signing up for a medical website (such as zocdoc). Your transaction should be for a fictional service/company, but you should research existing products for a general idea.
2. Create a list of all the pages you’ll need for your transaction.
3. Create a mobile wireframe (use the dimensions of your device) for all the pages you’ll need to design. Wireframes should feel organized, but design is not the focus. Create a type system with scale and limit yourself to 1-2 legible typefaces. Be sure to catch all the screens – for example, what happens when someone enters an invalid address?
4. Refine your wireframes with a light pass at design. The design shouldn’t feel like the finished product, but should feel consistent and easy to use. For examples – consider incorporating a meaningful color pallet (active links and titles are all the same color, links are treated the same way on all pages, all image placeholders are treated the same way). Create a functional prototype that takes you from screen to screen

Due

October 9