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.

Redesigning Booking Form

Checkfront • 2017-2018 • My role: Product Designer, User Experience, Research, Visual design, Prototyping & User testing

Worked on the initial designs of the Booking Form project, a next level advancement that would help merchants capture customer information, build customer profiles, and create a competitive advantage for Checkfront in the booking reservation space.

The Challenge

The aim of this project was to solve the problem of the ever increasing number of merchants that were missing out on important customer data during the checkout process. In turn, this burdened daily operations with the manual collection of reservation details.

Team & My Role

I worked on this project as a Product Designer. I was part of a small team alongside, Developer Eli Reale and Noel Anstey, Product Manager Ravenna McColgan and Director of Product Stephanie Brachat. I led the designs, research, visual design, user experience and user testing.

Phase One

Gather

Competitive Analysis

I conducted a competitive analysis and used it to figure out which elements our competition had in comparison to us. We actually had a great position with our ability to integrate and report on the customer information in the booking.

Stakeholder Interviews

I conducted interviews with Product, Marketing, Sales, and Support teams to understand each part of their unique needs and concerns for the design. I collected a lot of feedback and referenced it with user feedback.

Scenarios

Keeping the scenarios at a high‐level allowed us to work fluidly and explore concepts that we could easily communicate with our team and merchants. They formed the backbone of our requirements and allowed us to express concepts from both a functional and emotional perspective, allowing for further empathy with our users.

Phase Two

Build

Brainstorming & Whiteboarding

We had weekly sessions where we took turns brainstorming ideas and drawings on the whiteboard to go through the possible flows and configurations.

User flows

Aided by the scenarios we created, we could map out the user flows and the different ways people could possibly configure their activities. We spent a great deal of time making sense of workflows and existing content which was further complicated by the many different touchpoints merchants had with different people. We also faced interesting challenges with labelling and terminology as we found that business language varied between merchants.

Storyboards & Sketches

Rapid sketch iterations and storyboarding were used for fluid discussions. We took feedback from our multiple different departments, and although one department’s interests would sometimes conflict with another department’s, we were able to begin closing in on a design.

Prototype

InVision proved to be the best tool of choice for prototyping. I chose to develop a high‐fidelity prototype which had both benefits and drawbacks. On a positive note, the prototype was a powerful tool in creating transparency in our design process. Our what you see is what you get approach strengthened our communication with merchants and allowed us to gain feedback and approval from both our merchants and stakeholders early on.

Wireframes

Our aim was to improve the organizational hierarchy of the booking forms. We organized the logic with conditional elements and filtering. As well as created and introduced symbols to add affordance to the design.

Form Elements

We created immutable fields, like the name, email so that users would be less likely to stumble or cause any unwanted errors. I designed a controlled set of default form elements that would help in user prone mistakes.

Usability Testing

I was able to easily capture and share usability sessions with the team to create empathy and understanding. I tested the product at various stages of the project.

Moderated User testing was conducted with the merchants to get feedback on the functionality, content, and interactivity of the product.

Beta Testing -  We conducted a series of alpha and beta tests with merchants. Finding a great deal of minor issues that I brought up to the Product team.

pHase Three

Teachings

Impactful

We improved the software by pruning inefficient hacks, ultimately giving our merchants a bigger advantage in the management of their business operations.

Goal Driven

As designers, we are often lured by attractive, trendy and out of the box designs, but we must always remember the ‘why’. The primary goal is to understand the user and their problem, and then to come up with a design that solves for it.

Continual Feedback

Seek out feedback early and continually. The trouble with most of us is that we would rather be “ruined by praise than saved by criticism” (Norman Vincent Peale). Keeping the stakeholders/users looped in and testing solutions in whatever form, as early as possible, saves time and re-work.

Phase Four

Final Designs