My Responsibilities:
The UX team knew that simplifying Bluprint's e-commerce experience would improve conversion.
Because I had been performing QA testing on the website for nearly a year, the UX team asked me to use my extensive understanding of Bluprint's e-commerce experience to map the current flow for purchasing physical items. In addition to mapping the current clickstream, I also created responsive prototypes for what I felt would be an improvement to the process.
I identified my own pain points and areas where I felt the experience could be streamlined without requiring developers to build out brand new functionality. This resulted in fewer actions for a returning customer to complete a transaction, increasing likelihood of purchases and less frustration for the user.
I began with the Desktop view, sketching up a few low-fidelity wireframes/mockups and translating them into a Sketch prototype. The Desktop prototype consisted of 18 different artboards. Once these were consistent and reflected Bluprint's existing design system, I created new files for Tablet mode (18 boards, following the same flow as Desktop) and for Mobile (24 boards).
I used InVision's Craft plugin and Sketch's native prototyping functionality to create clickable prototypes for each resolution, which can be found below.
The UX team knew that both external users (customers) and internal users (the Bluprint associates who create and maintain the items in the web store) were having trouble navigating the web store. Since I had a thorough understanding of the current user experience from performing Quality Assurance testing on the website for the prior eight months, the team asked if I could help out in my off time by documenting the current iteration for them.
I began by created annotated user flows using screenshots of the website, as requested by the UX Manager.
.jpg)
For my first pass at these flows, I started by cataloging the types of physical products that existed in the store. Each listing had a number of ways they could be set up in the system, each with slight differences in the purchase experience. I began by listing out the five main configurations, and finding live examples of these on our test site.
Then, I went through each flow, documenting every screen between landing on the listing detail page (LDP) through to checkout. For every step, I included documentation on what happened when a user interacted with each main CTA. I also included annotations that would provide clarity to what the user sees, such as noting when the Cart icon in the primary navigation bar updated or what determined where the user is taken when they click "Continue Shopping." Every aspect was color coded - green, unfilled boxes and arrows indicated what I clicked and where it let me, whereas my additional notes were indicated in magenta.
These user flows are phenomenal! I love the notes you made about the cart icon changing and the order summary updating. It’s really helpful in understanding how things function. Great work!
The only helpful addition I can think of is to label each page (LDP, Cart Confirmation, etc.). That will give us a foundation for speaking the same language across departments
Other than that, I think this fidelity is fantastic. It’s a great level of detail without being overwhelming or confusing
- Katie Ausdemore, UX Manager, Bluprint
.jpg)
Full documents can be emailed upon request.
Once I had implemented Katie's feedback - indicated in the flow above with purple labels for page types - I was ready to start brainstorming improvements.
In a perfect world, we could have dedicated all of our developers to fixing each of the three problems above. However, fully re-architecting the backend and a total redesign of the LDP were gargantuan tasks due to how the system had been set up and updated over the years.
Therefore, I recommended a redesign of the checkout flow - everything after adding an item to the cart - using existing functionality that had already been built out for other areas of the site.
Click each tab below to see the existing version of each page, the usability issues I discovered, and how I addressed them in my redesign.
This flow starts on a listing detail page; the user would make any necessary selections (such as size or color) and click "add to cart".
While there is ample room for improvement on the LDP, redesigning this was already an ongoing project for the UX team, so I decided to exclude it from my own project.
The user is navigated to a separate Cart Confirmation page, which displays basic information about the item that was added to their order, a summary of their order as it currently stands, and a few modules of recommended upsell items.
The CTA options for their cart are "Continue Shopping" or "Proceed to Checkout." There is also a very small text link under the CTA buttons to "Edit Cart," which took me longer to notice than I'd like to admit.
This information could be presented better by presenting fewer targeted recommendations, making the user's navigation options clearer, and utilizing existing modal/pop up functionality instead of navigating the user to a brand new page.
If the user clicks "Continue Shopping," they will be sent to wherever they had previously been before opening the LDP. While this makes sense when the system can determine where exactly they were last, there are many situations (such as navigating to Bluprint from an external link) when the system is unable to determine where to send them. This creates inconsistencies in the user experience.
While I did not address this in my redesign, I chatted with the UX team about possible areas of improvement in this part of the flow.
The shopping cart page is simple and sleek - I didn't have any trouble navigating it or understanding the information presented there. The only improvement I found was to make it look a bit more polished, and to present some recommended upsell items sleekly and unobtrusively.
Even though information is saved for returning users, the Checkout page requires them to click through every section of the page (Shipping, Delivery, and Payment information entry areas) with individual CTAs. This makes sense for new users for whom we have no information; however, for returning buyers, it creates more steps than is necessary.
I wanted to make it so that returning customers could presented with all saved information in a way that allowed them to edit what needed to be edited, and accept everything that was good to without having to check each individual box.
Additionally, there was no way to dismiss the membership upsell module at the top of the page, taking up valuable real estate (particularly in mobile).
Finally, the Order Confirmation page displays a success message, basic information about the transaction, and more upsell recommendations. I didn't see any major usability issues here, so I just updated it for simplicity and to match the visual design of the rest of the flow.
To simplify the checkout flow, I focused on two main improvements: reduce the number of pages users visit in order to checkout, and limit the number of required interactions along the way.
I debated whether or not we should care about the total number of clicks, because I know that's a slightly contentious design rule. Steve Krug notes in Don't Make Me Think that "three mindless, unambiguous clicks equal one click that requires thought." However, I still included it as a goal due to our customer demographics.
Many of Bluprint's customers are located in areas that have poor internet access; therefore, simplifying the number of individual actions it takes to complete a checkout makes it easier for customers to check out. Additionally, the majority of Bluprint's customers are older women who report low levels of tech savviness. Because of this, I suspect that simplifying and streamlining the actions expected of customers would increase sales and customer loyalty.
This redesign does not include:
The existing user flow requires more individual page views than necessary for a returning customer to complete a transaction. The first small update I made was changing confirmation pages to confirmation modals that would pop up on the current page, instead of loading a new page for every item added to cart or to confirm their purchase.
The bulk of the changes I made were on the checkout page. The four required steps on the existing checkout page display information that doesn't necessarily need to be updated for an existing user, but which the user must still click through individually. Instead, I presented all saved information on the same page. Users can then click into individual information to only update what has changed since their last transaction.
If you like what you see and want to work together, get in touch!
alygombos@gmail.com