Day 2 - Checkout Page
(or pages)
(couldn’t just do one)
Today, I was tasked with producing a checkout page for an app. I chose to complete 5 pages for my final product in order to make the checkout process more modular and intuitive.
Let’s start with my process. I chose to first list out desired features for this app. this consisted of:
separate shipping and billing information pages
a review page
vertical user flow
numbers to come up when typing card #, date, zip code
save/continue buttons and options to go back if necessary.
Next, I developed the ideal user flow for this checkout process. This diagram helps me understand how the users will move through the process, and it allows me to visualize how many pages I will need. This process requires 5 pages. The circle around “place order” depicts an action the user takes, and does not signify the need for its own separate page.
I decided it was time to start designing. Here is the low-fi wireframe I created:
After some adjustments with size and spacing of text and buttons, I created the final high fidelity wireframe (shown below). This process features collapsible steps and options to save information.
While I am trying to get out of my comfort zone and incorporate more color in my designs, I like the idea of certain processes (checkout, sign up, etc.) to have a super clean UI so the user only has to focus on the task at hand—no fancy graphics or distracting colors.
