UI Design Process: Checkout
Challenge Two of the Daily UI Design Challenge is to design a checkout screen. But, in my usual fashion in order to design a good screen I had to know where the user was coming from and where they might be going.
As an online shopper I am familiar with the experience so in this instance I was looking at it from a user who had made an account and was logged in.
Where to Start
I began by making a list and asking questions, what would a user want to do? See the price, apply discounts, pay, ship and change things.
Then I moved on to the sketches, very high level of the flow. You can see here how I diagrammed the flow for completing an order. You can also see a mini flow for the process of adding a card.
You can see in the sketches I notated some placement, but focused mostly on the buttons and the type of information that might be seen. Writing down different steps helped keep me focused, and drawing out the screens helped me think about progression and solidify how I would move back and forth between the screens.
Wireframing
With my rough sketches as a guide I moved on to wireframing. At this point in the exercise I hadn’t thought about any branding or graphic design, the focus was only on layout and information hierarchy.
If a user can navigate through the wireframes they can navigate through the finished high fidelity prototype. I find myself losing sight of objectives if I move straight into making things pretty. I did go ahead and click through the wireframes to ensure the flow made sense and would work.
Doing so made me realize, what would happen if I clicked on an item? Shouldn’t I be able to modify it or delete it? So, I added that as an option.
Design
When I was happy with the wireframes and their flow I moved onto the design. Now I had to think about the site, what was it for, what was the theme?
I decided it would be a small, pet-centered site where you would see featured unique items that you could purchase. I would be modern and cheery, to sort of speak to the younger pet parent crowd.
Logo Design
First, I played around with a logo.
Here is my design process as I was trying to come up with something slick but also friendly that had some character. Options were caricatures and simple line drawings, but ultimately I decided upon a negative space logo concept that featured a cat and a dog.
The first silhouette was a good starting place but seemed too abstract and cold. This one might work for something more high-end and elegant, but not the friendly feel I wanted. I decided to focus on faces and concentrate on rhythm.
I focused on angles first, and while I was happy with how I resolved the negative space I wasn’t really happy about the feel of the two “characters”. I also hit upon a chance to use repeating elements, such as the eye curves and the nose shape. This made me focus on a more rounded look to the logo instead of the sharp one.
Round shapes read as more friendly.
Here is the logo after I converted it to vector. As you can see I used half circle shapes for the eyes, choosing to give the dog a happy expression. I repeated those circles for the cat choosing to give it a more contented expression. I repeated the nose shape for both and smoothed out all of the corners to give it visual rhythm. I think both animals read well while having strong personalities. I chose a fun sky blue that elicits the feel of a warm summer day while also projecting calm. I imagined a day frolicking in the sun-warmed grass with your pet.
Screen Design
With the logo decided, I moved onto the screen design and overall branding. I like to focus on the color palette, focusing in on the buttons, then move on to the Typography.
I started with the main screen. I placed the logo on the right-hand side as indicated in my wireframes. I decided to give a little depth to the header by giving it a gradient. I also mimicked the logo curve in the top shape, making it sort of look like a tab and bringing focus to the running total.
I also decided to include some color blocking and a pinned checkout button.
This is a full screen shot but the Checkout button will remain pinned to the right bottom of the screen as the user scrolls.
I wanted it to be easy for the user to know how much they were paying for each item and the entire total which would by dynamic as they made changes in quantity or by removing items.
I decided to go with a contrasting color palette with the blue and orange. Orange is vibrant and eye catching and the shade of blue is friendly but also slick. I put a focus on typography to help draw attention to things, something that carried over from the wireframes.
My assumption for this screen was that a logged in and returning user was making a purchase. This user would have stored their information on the site and would be able to choose options to make their process quicker. Here you can see that I have an option for PayPal, as well as cards with nicknames. I personally enjoy the nickname feature as it is easier for me to process then the last 4 digits. A new payment method can be added, or the methods can be edited.
On the add payment screen the card nickname is first, followed by the Name on the Card. I decided to group these together as they seemed related. I grouped the entry fields with a blue color block and made a clearly labelled button so the user would understand what this is only adding a card. I followed the same idea on the Address Page.
I added drop-downs for the billing address and shipping address and then grouped the money related fields together and made the grand total large and right on top of the Pay button so the user would know exactly what they were paying and what contributed to the total.
I chose to streamline the process by putting the payment and shipping options on the same screen instead of having them separate. This also allows the user to update shipping addresses and see how this might affect the shipping dynamically.
Here is the Order confirmation and the email receipt the user receives. As you can see here the total is prominent with the Payment and shipping details grouped together and the Order details Grouped together. Again, I made the order number and tracking number prominent and hyperlinked so the user can see details from this screen if desired.
Design Notes
The whole design’s purpose was to tell the user how much they were spending, so the focus is on the price and allows for dynamic updating. Thinking about my own shopping habits I wanted the ability to order with different cards and ship to different addresses. I also wanted human understandable names to make the order process much quicker.
For the confirmation I focused on: what did I buy, where did I ship it, and when will it get here.
By having questions and thinking about the most important info on the page it helped me with make conscientious design decisions throughout the process.
