Checkfront
Who's Checkfront?

Checkfront is the leader in the online booking space. Anywhere from Tours and Activities, to Rentals, and Accommodations. It provides merchants the ability to manage inventory, create invoices, process payments and ultimately bring their business online.

Item Builder Redesign

Checkfront • 2015-2016 • My role: User experience designer, information architecture, onboarding, meeting & process facilitation.

As the team’s only UX Designer, I led the Item Builder through a major redesign. This laid the foundation for future designs at Checkfront that would elevate the product to an enterprise level.

The Challenge

Checkfont’s inventory creation process was scattered across the software, so information and functionally needed to be consolidated: education and guidance opportunities needed to be acted upon and the usability and functionality needed to be addressed. Given Checkfront’s powerful and intricate options, a simplified streamline process needed to be created.

Team & My Role

I led the design of this project and was supported by an amazing team of three: a Customer Success Manager (Ravenna McColgan), Senior Developer (Ben Allison), and Product Manager (Stephanie Brachat). I was responsible for the user experience, and I personally created the deliverables that you will see in this case study, including the visual designs. I saw the project through from the kickoff meeting to the launch.

Phase One

Gather

Analytics Review

I began by digging into our historical data, surfacing user pain points and barriers in creating inventory. Data was available through our support tickets and backlog. The main challenge was sorting through the data and finding meaningful insights & patterns.

User Interviews

Key users were interviewed and we confirmed the usability and functionality issues that our historical data surfaced. Through talking with users we noticed they were doing the heavy lifting in terms of calculations, ordering, and organizing their inventory. I used this information as the basis for building a case that our software needed to be smarter and carry the burden for merchants.

User Flows & Journey

By looking at individual user journeys, we uncovered most users would visit 2-3 additional pages in conjunction with creating their inventory. Tons of thrashing between pages caused several issues where users were bouncing around, getting lost in the software, and abandoning creating inventory.

Content audit

Despite the fact that Checkfront possessed many powerful options to create inventory, it still caused confusion and abandonment from users. We set our sights on opportunities to collapse complex and unique configuration options and present more basic merchant preferences.

Phase Two

Build

Code development

Ben, the Developer on this project, did an incredible job of putting together clean code that was compatible across all devices. I paired with him to properly execute all interactions and ensure that the design translated well to the code. QA testing was also performed along the way.

Challenging Bits

We had struggles with some of the proposed changes around the different states the item would go through. A big debate between auto save or manual save was discussed, and we settled on manual save and system messaging for a feedback loop.

Streamlined

Coming up with the idea of redesigning the tabs into logical steps along the bottom bar was a big moment for the team. We maintained the functionality, but evolved the inventory creation into a helpful, guided experience.

Drafts

We also had a heated discussion around the item being in a draft state and eventually, when the merchant was ready, to bring it to a published state (visible to their end-customer). We compromised on a simplified preview button.

Wireframes

Once we had a solid direction for the design, I began to produce multiple different variations of wireframes. I then put the designs in front of users and internal stakeholders for testing and feedback. This helped me to narrow the design down, which I used to establish a design framework, and then move into visual design.

Copy & Content

High level, simple and educational messaging was used to construct the supporting copy, which went through several rounds of feedback and iteration.

As copy began to harden, it was placed into a structure to visualize how it would be presented. During this time, design exploration was also under way, working in conjunction with copy.

Copy was a critical part of the design. We wanted to focus on creating helpful and instructional content for our users to help them throughout their experience building inventory.

Mockups

During the visual design phase, I used a mix of clean lines, strong typography, simple colors, flat icons, and a two column layout structure to elevate the design for Checkfront.

I wanted to create a place where the user could really focus on creating their item, and I was able to achieve that by placing a frame around their viewport creating focus on their steps and progress.

pHase Three

Teachings

Real Value

This was a really exciting and fun project for me to work on as it provided real value, involved research, and detailed work. As well, I gained important product and business takeaways relating to processes.

Hidden Complexity

In this project, I really learned that our small team worked great together. We had a ton of challenges and hidden complexities, and it was through respectful and constant communication that we pulled through and shipped a great product together.

Growth

It was extremely rewarding to work on a project that generated such collaboration and growth in our culture at Checkfront. Respect the work that you build on top of. Don’t dismiss it or judge it. You don’t know the whole story and its challenges and constraints.

Phase Four

Final Designs

Next Case Study

Impacting the Industry

Walk through my process of designing a waiver system that would impact the activities industry and lead to increased sales for Checkfront.

View Case Study

The views expressed here are entirely my own and are not those of my employer
© Demetre Papaiakovou • Disclaimer