Alexander Stevens
Dark mode

UX and UI for short engagement with for U.S. State Park

2020-07-02 — 10 min read
Mockup of website on phone
Hocking Hills is a U.S. State park offering log-cabin style accommodation booking

Hocking Hills were looking for a new and improved UX to be delivered in a fairly quick time scale and budget. Their initial focus was to address the part of the site that allows users to search and book park cabins. These were often luxurious cabins in stunning locations but the existing website wasn’t doing them justice.

Project deliverables

  • Make UX recommendations to improve booking flow
  • Provide design options for search and book
  • Design search and book and a handful of key landing pages
  • Timescales - part time over a few weeks

UX recommendations

To understand the current situation I performed a heuristic review of the existing site. This takes the form of applying a standard set of criteria against a website or system and seeing how they perform against a standard set of criteria. I identified and documented a number of usability concerns. Of the more pressing concerns I found that the navigation could be confusing for users, making it difficult for potential applicants to complete their task.

With this in mind I put forward a proposal for improving the screens through to the checkout.

Diagram showing screen flow
My recommendations were to make better use of the existing content they had - allowing their accommodation to speak for itself, and help users highlight the bits that are important to them.

Design and prototype

I produced a couple of design concepts to give a feel of the direction that Hocking Hills wanted to go with using the same information architecture and content elements. From a UI and design point of view I always like to start with the most complex screen first. By starting with the most complexity patterns are identified early and it makes it easier working back to simpler screens like search.

Accommodation page screen design
The accommodation page has to do all the work for customers. inspiring a purchase whilst making details easy to find.

Prototype search flow

There were various interactions which cannot be well described by a static visual, particularly sticky pricing panels which are key to a good travel UX, and good calls to action. In order to communicate the interactions and get a feel or the ew user journeys I started designing out the pages into a prototype. I use Loom to create video walkthroughs of the functionality so I can share the designs and design rationale with the clients.

Final set of designs

With the confidence that the flows were working I went on to produce the final set of designs. I worked to ensure calls to action were clear and consistent. Whilst still providing links to external websites these were made a lot more subtle. The booking flow was brought in line with the search design to make the whole journey cohesive.

Design mockup
The new search screen is much less intimidating, whilst inspiring people as to the natural beauty of the park
Design mockup
A much more recognisable search results. New icon set for facilities, highlighting most important on search results. Sticky search panel.
Design mockup
Pared back new accommodation screen letting the accommodation photogaphy be the star of the show.
Design mockup
Mobile versions of the accommodation screens.
Design mockup
Checkout now feels like it is part of the same flow.
Design mockup
Suggested optimisations around checkout information minimising friction

The design suite also included designs for key landing pages like cabin provider pages and logged in reservation details. To help with development I recorded a loom for all the screens to document interactions and functionality

Document design system and designs

Given that development was yet to start it was important to document the designs and design system. I used notion to document the design work from typography choices and how to implement them, through to colour systems, stock photography and of-course the prototype and screen designs.

Screenshot of notion wiki
The notion design system screen which covered the icon suite, photography suite, colours and typography.

Outcomes

  • A full suite of mobile and desktop designs delivered with a prototype and documented in notion ready for delivery.
  • Interaction walkthrough videos were provided in Loom
  • Documented designs, design system and photography

Learnings

Although I was able to source a couple of great free stock images it was worth the investment to purchase the right images, which were even specific to HH state park.

Although I would like to have optimised the checkout UX for a ‘sunny day’ scenario there were requirements which meant that there were still some steps that had to go in there. I could have saved time by establishing the extra user stories earlier in the process.

Back to case studies ⤴