The Startup
Published in

The Startup

Sail Lofts — UX Refinements

Providing easier navigation to the websites deeper content.

The brief

Providing luxury award winning seaside retreats, Sail Lofts requested a review of their website to encourage a simpler navigation to deeper content.

The solution

Background

Sail Lofts provides luxury holiday homes in St Ives. Therefore the demographic is primarily holidaymakers, looking for high quality, self-catered accommodation. Due to cost and quality, the lofts appeal to clients with a higher than average holiday budget.

Larger accommodation is available which therefore appeals to larger families or groups. Also, many lofts are located near the beach at St Ives, making it desirable to amateur and experienced surfers and beach goers with active lifestyles.

The website presents a booking system via a range of properties based on a users search preferences. Additionally, the site provides information about what St Ives has to offer in terms of entertainment and dine.

Deeper content

Fig 1.1 — sitemap

My first task was to develop a sitemap (Figure 1.1) in order to define the current information architecture and to get a handle on the volume of the content.

Initial findings & recommendations

The deeper content positioned within Tier 4 was correctly placed within the sites hierarchy however it was not immediately visible.

Relative links were therefore recommended to join content that is structurally in a separate area of the site, but may be relative to the currently viewed content. For example, a user may decide to look at the lofts, but then may want to know more about the area. Or a user may want to do this in the opposite order.

It’s simply a way of creating a seamless journey through content as well as showing the user that it exists. A user may be unaware of certain activities e.g., have you tried seafood by the Harbour apartment?

Users should naturally be guided through as much information as possible to help promote the experience upon visiting a loft. Additional findings with regards to the site structure included misleading page names e.g. ‘Ocean Studio’. Initially, a first time visitor to the site may think this was studio accommodation for hire and not related to Spa treatments.

Bridging the gap

Fig 1.2— sitemap (bridging the gap)

Figure 1.2 demonstrates an example of how content in tier 2 links to tier 4. The hypothesis here being that reducing friction points between pages and making content more reachable will give users additional confidence in proceeding with a booking.

Proto-personas

Proto-personas were developed to evaluate potential user characteristics, behaviours and form further design hypothesises.

User scenarios

Abi (surfer)

Abi and her husband met on a surfing holiday in the early 2000s. Before having children, the couple always spent time on surfing holidays at Cornwall. The couple previously holidayed in a camper van but have not re-visited Cornwall for a number of years. The camper van suffered from regular maintenance issues therefore the couple decided to cut outgoings where possible.

As the children are now 3 and 5 years of age, Abi wants to have a luxury holiday to teach them how to surf. Abi knows the St Ives area extremely well and makes a booking using her iPad on the Sail Lofts website.

Leonard (elderly user)

Leonard has been married for 54 years and has mostly holidayed abroad. Leonard has been diagnosed with a macular degeneration in the last two years, which has had a significant impact on his life. E.g. Leonard is no longer able to drive.

Leonard will soon be celebrating his 55th wedding anniversary and would like to take his wife on a summer break in the UK given that travelling abroad has become increasingly difficult.

Leonard is a computer (iMac) user and has specially adapted equipment such as an enlarged keyboard to help him be self sufficient and navigate through content via the web.

Leonard continues to be independent as much as possible and has decided to book a holiday as a surprise. He finds several websites advertising accommodation in St Ives where they celebrated their honeymoon. He navigates to the Sail Lofts website and attempts to book accommodation with a sea view for 5 nights.

Rachel (housewife)

Rachel is married and her husband Mark has an extremely demanding, London based job. Mark regularly only spends weekends at home with his wife and 2 children and as a result, the couple spend little quality time on their own.

Rachel has arranged childcare for a weekend in order that the couple can have a relaxing spa break together. Rachel is keen to not travel too far from their home in Exeter. She has been searching the Cornwall and Dorset areas for hotels with self catering accommodation and spa facilities.

Rather than boot up her old computer, Rachel prefers to browse the web using her iPhone for improved speed and flexibility. She attempts to make a booking via the Sail Lofts website for 4 nights in August 2019.

Daniel (graduate)

Daniel lives in Brighton and has recently is a recent university graduate with a degree in Business Management.

He hasn’t had a holiday with his brothers for a number of years as they’ve been living apart. To celebrate Daniels graduation, the boy’s parents have offered to pay for them all to have a luxury surfing holiday in Cornwall.

Daniel’s brothers have been investigating potential holiday options. They shared a link to Sail Lofts website to further explore accommodation and make a booking. Daniel wishes to book accommodation for next summer once all his brothers have time off work. He uses his MacBook pro 13” to make a booking.

User journeys

Fig 2.1— user: Abi | device: iPad | task: making a booking

What?

Abi is not inclined to book again with Sail Lofts. She would’ve been more likely to return if she knew more about the websites deeper content. If she had read such content, she’d have a greater understanding of the St Ives location e.g. a beaches and availability of surf schools for the children.

How?

Content needs to be linked explicitly throughout the site.

Why?

Making Abi more aware of activities and local tourist information would’ve ensured the location, accommodation and facilities met her needs.

Fig 2.2 — user: Leonard | device: iMac | task: making a booking

What?

Leonard is confused by search field names and requires more clarity due to his visual impairment.

How?

Consider accessibility where possible e.g., add text labels to input areas. Additionally, forms should always retain previous inputs from searches. Leonard also requires clarity of the Sail Lofts contact information in large print when no search results have been located.

Why?

To ensure users are guided through the search efficiently.

Fig 2.3 — user: Rachel | device: iPhone | task: making a booking

What?

Key information from the main search function is not carried through to the search results page. As Rachel is a returning visitor, she wants previous searches listed at a glance. Rachel also has the desire to refine a search by price and/or other criteria.

How?

Search options should be fixed and always visible within the pages header. A previous searches CTA would also be beneficial. Also provide options to refine a search such as ‘suitable for spa breaks’. Content should be explicit therefore catering for both returning and first time users.

Why?

A user should know where they are within the site at all times and know where they are going. All pages should have continuity and consistency.

Fig 2.4 — user: Daniel | device: Macbook Pro | task: browse Lofts

What?

Daniel decided not to book with the provider Sail Lofts. Although there is currently enough information on the website, he was unaware of its existence. Daniel was therefore unable to determine whether the location and surrounding areas met his and his families needs.

How?

Provide relative content based on Daniels search terms e.g., have you checked out this restaurant nearby?

Why?

Daniel needs to see this information at a glance as he typically makes decisions quickly.

Proposed IA

Fig 3 — proposed information architecture

Figure 4 shows an example of how a user may potentially jump between relative content which will in turn, give Daniel a better grasp on what the area has to offer. The new journey (added step bordered in red) shows where a bridge would be useful to resolve hierarchical blocks.

Prioritised list of user needs

By utilising the research and analysis tasks, a foundation to design from was initiated by creating a final list of user needs. These requirements are the most fundamental outcome of the discovery and scope phases.

  • Relative links — To help users become more aware of deeper content providing them with a greater user experience.
  • Search filtering — During persona user journey 3, Rachel required filters to help her narrow search results when looking for a weekend spa break.
  • Consistency of the booking journey — The ‘My Bookings’ page visually looks different to the main website as Rachel discovered when attempting to make a booking.
  • Design for accessibility — User 2, Leonard requires clarity of information if this cannot be seen due to his visual impairment.
  • Clear host contact (live chat) — User 2, Leonard also missed key contact information in the websites header. A simple call to action to contact the host would have benefited his overall experience.

Competitor analysis

John Lewis

The primary concern addressed was the option to access deeper content via relative links. A basic example of can be seen via John Lewis. As this site has a lot of deep content, the options for suggestive items have been provided — ‘you may also like’. This allows users to navigate through a series of suggested items before making a purchase. Using a similar design pattern, this solution for bridging content will resolve the current blocks seen in the Sail Lofts website hierarchy.

Please note, the example discussed is regarding linking to similar content rather than relevant content. John Lewis shows a particular product with numerous links to other similar items, whereas the Sail Lofts website requires links between lofts to things to do such as local activities, restaurants, boat trips, nights out etc.

Airbnb

The secondary problem with the current Sail Lofts site was the ability to filter search results. The best functionality is rendered useless if people don’t know it’s there, or if it’s so cumbersome that people aren’t willing to seek it out. Many interfaces offer users a number of choices of how to access features.

Airbnb achieve the same functionality by using a filter sidebar as a vertical strip containing different refinement options. It’s therefore always visible alongside listings. Upon selecting a filter option, the associated filters are presented in-page. More options can be accessed via the multiple accordion panes e.g. property type.

It’s key that potential users have things happen when they expect them to — either because of their existing expectations or because the design clearly communicates what to expect.

Lo-fidelity wireframing

Fig 4 — lo-fi concepts

Mobile design concepts were generated using Axure which could be later translated into the UI. Decisions were made on which elements of the design should be progressed to create the optimal output.

Hi-fidelity design

The final stage of creating static designs was to translate paper wireframes into hi-fidelity mockups using Sketch. Core elements that needed to be designed for included the advanced search and relative links for accommodation pages.

Fig 5.1 —site landing: form input labelling

Text labels tell users what the corresponding input fields mean. Previously, when a user input a particular criteria, the default place-holder value e.g., No. of nights was subsequently hidden, therefore causing confusion.

Labels have been added to the main search form. Providing clear text labels is one of the primary ways to make user interfaces more accessible. Labels tell the user the purpose of the field, maintain their usefulness when focus is placed inside the field and remain even after completing the field.

Labels are not help texts or formatting guidance. They should be succinct, short and descriptive (a word or two) so users can quickly scan the form. Notice that the labels are on top of the fields for a faster scanning and form completion. For future usability testing purposes, it would be extremely interesting to examine the naming convention or terminology of the main ‘Search’ call to action. How would this compare to ‘Search Apartments’ in an AB test? This may provide a greater clarity for elderly users such as Leonard.

Subtle design iterations such as this can often make a significant impact to meet the needs of a specified user group. Users can sometimes be hesitant to fill out forms, so this process should be as intuitive as possible. Also note, for added clarity, a subtle line break has also been introduced to break text from the dropdown chevron.

Fig 5.2 —our accommodation: sticky search

The fixed menu, or sticky menu, is a web UI pattern whereby the header area remains visible as a user scrolls vertically down, and the page’s content flows beneath it.

Figure 5.2 indicates how this function would operate. Notice how the previous search form has been pulled through from the Index page. A user can now rapidly amend a search and also view past search criteria from the previous page. The primary benefit of opting for a sticky search bar eradicates the need of having to scroll back to the top of an elongated web page to access the main navigation.

Fixed position menus are typically used on pages of websites where an action is intended, such as eCommerce sites. Users can access their navigation options in seconds. Speed is the most important thing to the user when browsing. The filtered search options will be built into this component after a first run of usability testing has been initiated.

Please note, the sticky search functionality will also be replicated in property pages e.g. Zennor. Also, when downwards scrolling, the sticky search bar should be hidden from view to avoid taking up too much screen real estate. The primary focus should be the lofts whilst the secondary focus should be the previous search criteria.

A user should only access this function when they need it e.g. amending a search. Options to sort price ‘lowest to highest’ or popularity ‘most popular’ can also be added for later AB testing. As there are only 12 lofts currently on offer, this may not be necessarily at this time.

Fig 5.3 — our accommodation: search filters

Advanced search is a way to find something from a large list of items by specifying a criteria including multiple parameters. With the use of an advanced search, the user can have a more experiential approach to filtering that can be used when locating main content.

A user defines a search filter and applies it to a large data set to narrow down its scope. A filter is created by adding different parameters. The newly proposed solution (Figure 5.3) offers a more personal and helpful journey in finding the right loft.

Considerations shall later be investigated for viewing on devices with smaller viewports heights. By default, all parameters in the left sidebar will be collapsed. Users can expand them one by one and select subsequent values e.g. toggle price range. Again the option for how users respond to one pane being defaulted open on page load can be validated during testing.

During user journey (proto-persona 3), Rachel required search filtering to narrow results when locating her preferred criteria (spa weekend). A ‘luxuries’ pane has can be added within the left sidebar to cater for added extras.

Fig 5.4 — property Zennor: relative links

Relative links help users seamlessly become more aware of deeper content within the site, therefore providing them with an all round greater site experience. Numerous proto-personas required this functionality which was earlier established during user journeys.

The ‘things to do’ text CTA has been added to each property page via a fixed sub-header to give users more of an insight into the accessing tier 4 content (the primary objective stated in the design brief).

It was essential to make connections between pages to make information more accessible. The amount of clicks to reach this content has now been reduced from four to two.

Handover

Post project completion, the UX report was presented to the client. The following recommendations for next steps were also made:

  • On completion of design changes, testing should be conducted in conjunction with analytics. The relevant content changes won’t make the site unusable, but will need to be applied to test the conversion rate.
  • An alternative method to this would be to use AB testing where some users get the new design and some don’t. Results can then be compared and utilised to further iterate.
  • Before any future development work takes place, beta test results will need to be collated. Styling at a component level also will need to be documented to demonstrate how this functionality would operate responsively.

The result

Awaiting performance results from the Sail Lofts insights team.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store