Bringing the booking process inline with the new visual language; more generous spacing, clearer calls to action, refined visual hierarchy and a reduction in visual noise - plus a few added extras.
Below are the four steps to check out process with the old and new designs contrasted against one another.
1. Review booking details
2. Billing address
This work gave us the chance to revisit some of the defining characteristics of the checkout process. One of the most notable being the introduction of clearer incremental header which helped communicate the progress of a Guest through the checkout process.
3. Payment information
The previous checkout suffered from an inconsistancy in how it presented forms - the new layout brought the presentation of forms inline with the new visual language and worked to let the page elements breathe. The previous page also made no use of a grid whereas the revised design worked to be aligned to the new 12 column grid that accompanied the new visual direction.
4. Booking confirmation
Taking out the number of potential links that could take people out of the flow helped keep customer focus. Reminding people at key points with information on the property they were booking was with the intention that it would instil confidence in the Guest making the booking.
Selected Works
Scaling Newsflare's Video PipelineResearch, Experimentation, Process Mapping, Information Architecture, UI Design
Brand refresh rollout at NewsflareProject Management, Design Systems
Leading growth hacking at NewsflareInterviews, Experimentation, Marketing
Scaling video processing at NewsflareProject Management, Research, Process Mapping
Breaking news content distributionResearch, Journey Mapping, Process Optimisation
Assessing Newsflare's AppResearch, Interviews, Product Assessment, Screen Flows
Redesigning Sainsbury's click and collectResearch, Onsite, Journey Mapping, Process Optimisation
Redesigning kiosk collectionsResearch, Onsite, Journey Mapping, Process Optimisation
Improving Argos collection ratesScreen Flows, Process Optimisation
Feedback mechanisms in AppsScreen flows, User Engagement
App navigation at ArgosResearch, Screen Flows
HouseTrip property listing redesignResearch, Information Architecture, Interface Design
Improving search conversion at HouseTripInformation Architecture, Interface Design
HouseTrip Tripmaker conceptConcept Exploration, Interface Design
HouseTrip email-on-enquiryInterface Design
Contact
Email
keith.stewart.mason at gmail dot com
LinkedIn
@iamkeithmason