Checkout Redesign

Mockup of both desktop and mobile checkout screens

Intro

The purpose of this redesign was to improve the checkout experience for users of an ecommerce site. It made the checkout process easier by simplifying and shortening forms and ensuring best practices were followed. My role was to research best practices and industry standards, create wireframes and mockups, and assist with usability testing. I collaborated with product management and research.

Process

Image of Baymard Institute's checkout case study
Case study by Baymard Institute

Before starting any design work, I studied checkout best practices documented by Baymard Institute and Nielsen Norman Group to bring sound recommendations for improvement to product management and stakeholders.

After summarizing my findings from the best practice documentation, I studied other ecommerce sites, including both competitors and other well recognized sites, in to understand standards within the industry and beyond.

Checkout wireframe flow
Wireframe flow illustration

Once I was ready to start designing, I created wireframes using Sketch to show options for different layouts and flows to get early buy in from stakeholders.

After the wireframes were complete, I created mockups in Sketch. I used these high fidelity visuals to create a simple prototype in InVision, so that stakeholders could experience the proposed checkout flow.

Invision prototype of simplified accountholder flow
Invision prototype of simplified accountholder flow

View the guest checkout prototype.
View the accountholder prototype.

In addition to an InVision prototype, I assisted the UX researcher in creating a higher fidelity Axure prototype to use in usability testing. Along with the UX researcher, I helped facilitate usability tests to validate my design decisions with potential users.

Learnings

Through this project I learned how to effectively synthesize lengthy design studies and use the findings to defend my design decisions. I also got great experience facilitating usability tests.

Testing my designs with real users empowered me to push the designs further by validating what information was necessary, and where. I was reminded that showing less information for the sake of a clean design can actually introduce more confusion if a user can’t find everything they need.

I enjoyed getting to overhaul a vital part of a site that was in need of a redesign. In a way it was cathartic to lay out all of the updates that I had been wanting to make for quite some time. The biggest challenge of this project was striking a balance between an ideal design and what could realistically be accomplished with resource constraints. I was also surprised by how much I enjoyed stepping out of my comfort zone (and my usual role) to facilitate usability tests. Getting direct feedback from real users was both rewarding and humbling.

Color Picker Tool

Color Picker Thumbnail

Color Picker Header

August 2018  |  Through user research, it’s been revealed that many shoppers have a difficult time coordinating colors when purchasing multiple items, especially online. After identifying color coordination/palette building as a user need, I decided to build a tool that would take the guess work choosing the right colors when shopping online.

Color Picker Sketch

Color Picker Flow

In thinking through the user flow and working up wireframes, I wanted to match how people typically shop. I started with the assumption that most users would start with one item that they like, and coordinate colors around that primary piece. With the color picker tool, users can either choose a product on the site, or upload a photo of their own, then browse color palettes and shop products within that color scheme.

Color Picker Wireframe

After laying out wireframes, I created higher fidelity mockups and built prototypes to show both the desktop and mobile interactions.

Email Redesign

Email Thumbnail

 

May 2018 | I was given the chance to redesign Hayneedle’s marketing emails. Since the website had just undergone a redesign, I took this project as an opportunity to better align the marketing emails with the new site design for a more consistent brand experience. In working through the design, I ensured that the updates I made stayed within the website’s new design system to maintain a consistent look and feel.

To establish a more consistent experience from email to site, I reworked the email modules to more closely match their website counterparts. In reviewing all of the modules that are regularly used, I was able identify inconsistencies and establish a system of repeating elements.

I redesigned the event callouts to better match the event page headers (above). The event callouts in the old emails were handled inconsistently. Since the marketing team still needed different sizes of banners for hierarchy when using multiple event callouts in the same email, I created a consistent text treatment to be used with different sized images.

 

Similarly to the event callouts, I reworked the idea board modules to more closely align with the idea board page headers (above).

 

I also updated the category modules to be handled the same way as they are on site (above).

Overall, the redesign helped create more consistency both within emails and across the emails to the site.

Design Thinking Exercise

April 2018 | This project was for a Udemy course (Cooper Crash Course: Design Thinking in 3 Steps). This course focused on understanding the client’s target audience and their needs. The directive was to make the pre-flight experience more enjoyable for travelers.

I started by brainstorming ideas about pain points involved with travel in hopes of figuring out how to make them better. I landed on the idea of a suitcase that would make getting through security earlier.

After getting my own thoughts on paper, the next step was to establish the target audience for my client, UniversAir, and then define research objectives. I decided the best target audience would be travelers who fly regularly, but not too frequently, so they might describe the aspects of traveling that they struggle with without letting routineness impact their impressions. I refined research objectives based on what I wanted to learn from my target audience, then interviewed seven people ranging in age from 23-58 who travel at least twice a year for a mix of business and pleasure.

Once I had enough information from the people I interviewed, I was able to create a proto persona – Penny, the planner. Penny likes to feel in control, so she’ll do anything she can ahead of time. Minimizing the time she spends waiting at the airport is important too, since crowds make her anxious. Forming a proto persona with information gained from the interviews provided a lens to focus my ideas and solutions. I then brainstormed new ideas based on what I learned through the interviews.

From the list of ideas that came out of my second brainstorm, I chose one to expand upon. To help our users minimize the time they spend waiting at the airport, I decided it would be useful to combine traffic data with known airport wait times so users could know when they need to get to the airport. I created a storyboard illustrating this feature, then I was able to use the storyboard to validate whether or not this idea resonated with potential users.

This exercise was great practice in walking through the design thinking process. I enjoy getting to take the time to start a project from the very beginning. Defining research objectives and interviewing people to gather information was a great way to break down my own preconceived notions and design something valuable for users.

Make Sh*t Illustration

Make Good Shit thumb

Make Good Shit

January 2018 | This was my first lettering/illustration piece of the year, made to remind me of one of my main goals: make good shit. I started by drawing the piece out (several times) until I found a layout that worked, then tweaked and built it digitally in Illustrator, and pulled the layers into Photoshop to fine tune layering effects.

Hayneedle Loyalty Dashboard

Hayneedle Loyalty Dashboard thumb

Hayneedle Loyalty Dashboard

November 2017 | The Technology Department at Hayneedle was given the opportunity to work through and present an innovation for the company. The group that I joined presented a plan to update our loyalty program to be more engaging with users.

As the sole designer on the team, I identified all of the touch points we wanted to improve, created a customer flow that would both be a likely use case and highlight the improvements we were proposing, and sketched and mocked up what the Loyalty Dashboard would look like.

Dear Heart Illustration

Patience Illustration thumb

Patience Dear Heart

June 2017 | “Courage, dear heart” is an often-quoted phrase from C. S. Lewis’ The Voyage of the Dawn Treader. But the version that stood out to me, almost more, is when Aslan advises Lucy to have “patience, dear heart.” I decided to use this phrase to work on my illustration skills.

Hayneedle Department Flyouts

Hayneedle Department Flyout thumb

Hayneedle Department Flyout

July 2016 | I was tasked with creating a more consistent way to display special sales and categories within Hayneedle’s department flyouts.

The old flyouts lacked consistency in how they were displayed, and in user testing we realized that the promotional portion of the flyout was often confused for an ad or ignored completely.

Hayneedle Old FlyoutHayneedle Old Flyout

For the new flyouts design I created a grid system to maintain a consistent layout as users hover across the department tabs. Another key element to the updated design is the more minimal approach to content. Whenever possible, merchandisers are encouraged to only highlight one sale or category at a time. However, there is an option to show two at a time, and four on the sale tab. After the redesign we saw much better engagement with this area of the flyout.

Hayneedle New FlyoutHayneedle New Flyout

Magis Clinic Logo

Magis Clinic thumb

Magis Clinic Logo

February 2016 | I was flattered when asked to create a logo for the Magic Clinic, a group of Creighton University Medical School and Pharmacy School students who serve the homeless and uninsured in Omaha. Since this logo was to be used for multiple applications, from both print and digital presentations to enamel pins and baseball caps, I had to be sure it would translate well at different sizes. With that in mind, I opted for a block serif typeface, and focused on including just the right level of detail in the Rod of Asclepius for it to be recognized without getting muddied.

Apex Appliance Logo

Apex Appliance thumb

December 2015 | Apex Appliance is an appliance repair shop based in Vail, Colorado. I was asked to incorporate mountains, an icon of Colorado, while still communicating the core of the business. Because this logo was to be used in various applications (web, print, decals), I decided to create a system with variations that would translate across various mediums while maintaining a strong identity.

Premier Countertops Website

Premier Countertops thumb

Premier Countertops Site Redesign

June 2015 | I was given the opportunity to redesign Premier Countertops’ existing site. The original site was about a decade old, and wasn’t mobilized or responsive. Instead of trying to make sense of the DotNetNuke mess that was, I built a hand-coded site using Bootstrap from scratch. This was quickly converted to a WordPress site to better accommodate a growing number of photos and interactive elements.

Premier Countertops Site Redesign

In redesigning the site, I worked to keep the layout clean and simple so that information would be easy to digest. In addition to simplifying the hierarchy of information, I placed a larger emphasis on compelling images to capture the user’s attention. I decided to use images in the header on the homepage to represent the different categories of products offered.

Jwick Flooring Website

Jwick Flooring thumb

February 2015 | Jwick Flooring was the second eCommerce site I developed. After getting the first one under my belt, I was able to apply that knowledge and focus more on adding different customizations and functionality. Since there were essentially only three products being sold on this site (three different finishes of engineered wood flooring) I got to focus on close-up imagery to show the product detail.

Jaden Cabinets Website

Jaden Cabinets thumb

December 2014 | Jaden Cabinets was my first experience building an eCommerce site all my myself and it was awesome. This project was both a challenge and an opportunity for me to flex my developer muscles.

The site was built using Joomla (CMS) and an eCommerce plugin. Since I was the sole designer/developer for the company at the time, I quickly became self-sufficient in trouble shooting (and praying to the Stack Exchange gods), as well as working directly with third parties when I hit roadblocks in implementing their products.

In addition to developing the site, I also got to create all of the imagery and iconography used. It was fun to develop a color palette and have complete control over the style of icons/illustrations used.

Personal Story Website

Personal Story thumb

April 2014 | I created this site as an interactive visual portrayal of my journey to becoming a designer. This was my final project for Creighton University’s Honors Program, and was meant to showcase the skills I developed in my time there. It was a fun undertaking to develop a consistent style for the whole site, create every graphic element, and then incorporate those graphics into an engaging story.

The site uses skrollr, an awesome JavaScript library, to animate the elements of my story as the user scrolls. It took a lot of trial and error (and a bunch of math) to time everything properly.

Relationship Infographic

Relationship Infographic thumb

March 2014 | This tongue-in-cheek infographic was a collaboration with my friend and co-blogger, Evan. Over time he had developed a set of rules detailing when it is advisable (or not advisable), to start a new relationship. I decided it would be fun to turn this into an infographic that people could easily reference when considering whether or not they should take that next step with that certain someone.

This project was particularly fun because it allowed me to combine two of my favorite things: sarcastic humor and design. Translating the twelve months of the year into concentric circles allowed me to fit an entire calendar in one tidy graphic, with the key right in the middle.

Basketball Infographic

Basketball Infographic thumb

March 2014 | This infographic was a fun way to connect two seemingly unrelated subjects: NCAA March Madness and trains. Translating the amount of food transported by Union Pacific into food at a basketball viewing party was a novel way to convey its vast scale in a way that is more readily appreciated by the general public.

I created personalized versions of this infographic for the different college basketball conferences within Union Pacific’s territory. These were shared via social media leading up to NCAA March Madness. Minus the map of the United States, I created each graphic element myself, which was a fun opportunity to sharpen my illustration skills. After finishing the web version,
I created a printer friendly version for those who wanted a hardcopy.

Locomotive Infographic

Locomotive Infographic thumb

January 2014 | Part of my internship at Union Pacific involved creating infographics to share with the public, both on Union Pacific’s website and through social media channels. This project was to illustrate the huge scale of the “Big Boy” No. 4014 steam engine for those who haven’t been lucky enough to see one in person.

Given the widespread enthusiasm for the Big Boy, attention to detail in this illustration was crucial. Before the infographic could be released, I worked with experts to ensure everything was accurate and to scale. To my surprise (and mild amusement), this infographic was picked up by other sites and news stations when talking about the Big Boy’s restoration project.

Jays Army Logo

Jays Army thumb

June 2013 | The Jays Army is a soccer supporters group, and the loudest bunch in the student section at any Creighton soccer game. This logo became my pet project when the group decided that we wanted to have a consistent way to identify ourselves, other than the yelling, that is.

I wanted the logo to be simple enough that it could be recognized from a distance. Since we weren’t an officially recognized student group, I had to be careful to not use any elements specific to Creighton. This is why we decided to use a bluejay feather (instead of Billy Bluejay) on a shield.

Song Infographic

Song Infographic thumb

March 2012 | This is an infographic showing the top songs at the time, and just how repetitive they are. My goal here was to convey as much information as possible, as simply as possible, while creating a design that is both intriguing and aesthetically pleasing.

I liked the idea of using concentric circles to represent the song since the patterns they created resembled records, or ripples, or even sound waves coming out of a speaker, which all work for the subject of the illustration. I listened to each song (despite how painful some of them were), and marked the times they repeated their “hook”. Each repetition became a ring in the song’s circle, which created an interesting visual timeline.