Website Redesign

CASE STUDY

UX/UI Redesign for Sun&Snow apartment rental website

About Client

Sun&Snow is a leading operator managing apartment rentals in both holiday destinations and cities in Poland. Since 2008, the company has excelled in collaborating with property owners to oversee rentals.

By 2023 the Sun&Snow team recognised that their platform’s design became outdated and confusing, and required a complete redesign.

Design Requirements

I had discussions with the project lead, the E-Commerce Manager, she wanted to redesign the whole flow starting from the homepage and finishing with checkout applying best UX practices.

I was working within a tight timeframe, the Project Manager had set a 3-months deadline for the handoff. The project was finished within the given timeframe and design materials were shared with a team of developers via Figma.

Sun&Snow old Webite

Hotjar Recordings

First, my main objective was to identify friction points and dead zones within the user flow. For that, I used Hotjar to reveal the online behavior of users. I analised 80 recordings to get a solid picture of where users struggled the most.

One of the critical issues was selecting a city. Users clicked on the "Sea" category thinking, this allows them to search for apartments in all nearest towns.

Users did not expect that the search for apartments would be limited to only three cities.

The lack of dynamic filters and categorisation of amenities makes filtering more difficult and takes more time for users.

Google Analytics Data

From this data, I understood that the mobile version was not simple and intuitive enough for users to finish checkout:

Users that opened a website on mobile devices (74%).
User reviews of our products on mobile devices (60%).

Initiating checkout was mostly done on desktop devices (61%).
Finished purchases were mostly done using desktop devices (65%).

Users prefer to swap to a desktop device to complete a task or leave the website at all. The mobile-friendly approach will most certainly decrease the mobile drop-off rate.

Homepage

I wanted to keep the design clear and intuitive, to do so hero image was replaced with a less attention-grabbing background to focus the client on starting inputs (City, Calendar, Guest number).

City Search

To address the issue of multiple choices when selecting cities, I have removed the limit on the number of cities that can be checked. Also, I’ve added the option for users to select the entire category.

Date Picker

As one of the most used features, the date picker played a very important role for us. I introduced a more neutral and clean design and redesigned UI elements to keep it consistent with the whole design style.

Filter

The most challenging part was redesigning the filter. After discussing with the client, there are some needs:

Filter should be placed on the top centre of the screen

Categorisation of all values in the groups

Add a map for easier location of the rental

Desktop Filter Screens

The redesign had to make a product more attractive to new users without alienating existing ones. Value names remained almost the same in most cases but I have removed unnecessary ones.

Mobile Filter Screens

Forms

I have introduced an overall redesign to the check-out flow emphasising usability and simplicity:

I have reduced steps to increase form completion (2 steps instead of 3 steps)

Titles were placed above each input field and necessary fields were marked with asterixis

I have added inline form field validation

The form is designed to be mobile-friendly, visitors can easily view our site on any mobile device, and the form can be completed and submitted easily while on the go.

Design System

Since I had a short time frame, I decided to create a design system based on the Vibe Design System to ensure that it would cover all of the design elements I might need to architect while working on this project.

Such an approach allowed me to quickly add new design elements and convert them into our design system saving a lot of time.

Design Handover

I limited amount of frames to one per page and kept all variations of components (e.g. states) in a separate section with a clear description of each element and its purpose.

This way I can ensure that any member with access to the files won’t get lost or confused with documentation.

UX Audit

After the release of the new website version, we had Future Mind (Digital Advisory & Delivery) conduct a UX Audit using the cognitive walkthrough method.

The audit findings indicated that 90% of the design decisions I made had a positive impact on users.

Issues highlighted in the audit were mainly attributed to time constraints or higher priorities within the development team.
However, most of these issues were identified during the redesign phase and were added to the list of future tasks.

Learnings

It was a great opportunity to learn how to set prioritise and execute tasks quickly while meeting UX standards. Sticking to consistency, relying on Design System and the data available was a very insightful experience.

I have understood the importance of the Design System and the value of research data which greatly helped me with making design decisions.