Sail Lofts — UX refinements
Providing more straightforward navigation to deeper content.
The brief
Sail Lofts provide luxury award-winning seaside retreats and requested a review of their website to encourage more straightforward navigation to deeper content.
The solution
Background
Sail Lofts provides luxury holiday homes in St Ives. Therefore the demographic is primarily travellers looking for high-quality, self-catered accommodation. Due to cost and quality, the lofts appeal to clients with a higher-than-average holiday budget.
More sizeable accommodation is available, which 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 beachgoers with active lifestyles.
The website presents a booking system via a range of properties based on search preferences. Additionally, the site provides information about what St Ives offers in entertainment and dining.
Deeper content
My first task was to develop a sitemap (Figure 1.1) to define the current information architecture and to get a handle on the volume of the content.
Initial findings & recommendations
The deeper content within Tier 4 was not immediately visible despite being correctly placed in the hierarchy.
Relative links were suggested to connect content in an area related to the currently viewed content. This allows users to easily navigate between different sections, such as looking at lofts and exploring the surrounding area, or vice versa.
Relative links create a seamless journey through content and show the user that the content exists. Users may be oblivious to 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 to the site structure included misleading page names, e.g., Ocean Studio. Initially, a first-time visitor may think this was accommodation for hire and not connected to Spa treatments.
Bridging the gap
Figure 1.2 demonstrates how content in Tier 2 links to Tier 4. The hypothesis is 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 and behaviours and form 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 in Cornwall. The couple previously holidayed in a camper van but have not revisited Cornwall for several years. Due to maintenance issues with their camper van, the couple decided to reduce their expenses wherever possible.
As the children are now 3 and 5, Abi wants a luxury holiday to teach them how to surf. Abi knows the St Ives area 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 primarily holidayed abroad. Leonard was diagnosed with macular degeneration in the last two years, which has impacted his life. 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 uses specially adapted equipment 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 five nights.
Rachel (housewife)
Rachel is married. Her husband, Mark, regularly only spends weekends at home with his wife and two children, and the couple spends little quality time on their own.
Rachel has arranged childcare for a weekend so that the couple can have a relaxing spa break together. She searches 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. A booking for four nights in August 2019 was made through the Sail Lofts website.
Daniel (Graduate)
Daniel, a university graduate who lives in Brighton, has been unable to vacation with his brothers due to their different living arrangements. But, in celebration of his graduation, their parents have generously offered to finance a luxurious surfing vacation in Cornwall for the entire family.
The brothers have been investigating potential holiday options. They shared a link to the website to 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 to make a booking.
User journeys
What?
Abi is hesitant to make another booking with Sail Lofts. She would have been more inclined to return if she had access to more information about the additional content. If she had read about the St. Ives location, including the various beaches and the availability of surf schools for children, she would have had a better understanding and a greater likelihood of returning.
How?
Content needs to be linked explicitly throughout the site.
Why?
Making Abi more aware of activities and local tourist information would ensure the location, accommodation, and facilities met her needs.
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.
What?
The primary 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 wants to refine a search by price and or other criteria.
How?
Search options should be fixed and always visible within the page header. A previous search CTA would also be beneficial. Also, provide opportunities to refine a search, e.g., suitable for spa breaks. Content should be explicit therefore catering for both returning and first-time users.
Why?
Users should know where they are within the site at all times and know where they are going. All pages should have continuity and consistency.
What?
Despite the website containing adequate information, Daniel decided not to book with Sail Lofts as he was unaware of its existence. He was sceptical if the location and the surroundings would cater to his needs.
How?
Provide relative content based on 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
Figure 4 shows an example of how a user may jump between relative content, giving Daniel a better grasp of what the area offers. The new journey (added step bordered in red) shows where a bridge to resolve hierarchical blocks.
A prioritised list of user needs
By utilising the research and analysis tasks, a foundation for design 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 an optimised 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 site, as Rachel discovered when attempting to make a booking.
- Design for accessibility — User 2 requires clarity of information if this cannot be seen due to his visual impairment.
- Clear host contact (live chat) — User 2 also missed contact information in the header. A simple call to action to contact the host would have benefited his overall experience.
Competitor analysis
The primary concern addressed was the option to access deeper content via relative links. A basic example can be seen in 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 purchasing. Using a similar design pattern, this solution for bridging content will resolve the blocks in the Sail Lofts website hierarchy.
The example discussed is regarding linking to similar content rather than relevant content. John Lewis shows a particular product with numerous links to similar items, whereas the Sail Lofts website requires links between lofts to things to do like local activities, restaurants, boat trips, nights out etc.
The secondary problem with the current Sail Lofts site was the ability to filter search results. Many interfaces offer users several choices of how to access features.
Airbnb achieves the same functionality using a filter sidebar as a vertical strip containing different refinement options. 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.
Potential users must have things happen when they expect them to — either because of their current expectations or because the design communicates what to expect.
Lo-fidelity wireframing
Mobile design concepts were generated using Axure, which could be translated into the UI. Decisions were made on which design elements should be progressed to create the optimal output.
Hi-fidelity design
The final stage of creating static designs was translating paper wireframes into hi-fidelity designs using Sketch. Core elements that needed to be designed included the advanced search and relative links for accommodation pages.
Text labels tell users what the corresponding input fields mean. Previously, when a user inputs particular criteria, the default place-holder value was subsequently hidden and confusing.
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. They tell the user the purpose of the field, maintain its usefulness when the focus is placed inside and remain even after completing it.
Labels do not help texts or formatting guidance. They should be short and descriptive (a word or two) so users can quickly scan the form. Notice that the labels are placed above the fields for faster scanning and form completion.
Subtle design iterations can make a significant impact when meeting the needs of a specified user group. Users are 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.
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 content flows beneath it.
Figure 5.2 indicates how this function would operate. Notice how the previous search form is pulled through from the Index page. A user can rapidly amend a search and view past search criteria from the previous page. The primary benefit of opting for a sticky search bar is that it prevents the need 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.
Users should only access this function when needed, e.g. amending a search. Options to sort price or popularity can also be added for later AB testing.
Advanced search is a way to find something from an extensive list of items by specifying criteria with multiple parameters. With an advanced search, the user can have a more experiential approach to filtering that can be used when locating the main content.
A user sets up a search filter and utilises it on a vast amount of data to limit its range. 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 loft.
Considerations shall later be investigated for viewing on devices with smaller viewport heights. By default, all parameters in the left sidebar will be collapsed. Users can expand them 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 the user journey (proto-persona 3), Rachel required search filtering to narrow results when locating her preferred criteria (spa weekend). A luxury pane can be added within the left sidebar to cater for added extras.
Relative links help users become more aware of deeper content within the site, providing a better 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 insight into 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 number 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:
- Testing should be conducted in conjunction with analytics. The relevant content changes will not make the site unusable but be applied to test the conversion rate.
- An alternative method would be an AB test where some users get the new design. Results can then be compared and utilised to iterate further.
- 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
The report was shared with the Sail Lofts design team, where recommendations were prioritised for implementation.
