Project summary

Problem statement

🏠 While the platform offers valuable features like property alerts and watchlists, an outdated and cumbersome signup and login experience deters potential users and hinders their ability to engage effectively with the platform. Modernising this process could improve user registration numbers and strengthen ESPC's position in the Scottish property market.

Users and audience

ESPC's website serves a large audience and its users include:

• Solicitor estate agents staff: Property professionals advertising and researching properties.
• Buyers: People looking for the first or next home and also property investors.
• Sellers: New and experienced homeowners and investors who are looking to sell their property.
• Other users: There are other occasional users, such as surveyors that might also research property, download Home Reports, etc.

Roles and responsibilities

I started as the sole UX designer for this project, with a web designer joining towards the end to finalise the UI design. I was responsible for:

• Conducting competitive research to understand how to create a frictionless user experience based on similar solutions already on the market.
• Creating wireframes and prototypes to iterate on the sign up process flow and get stakeholder feedback.
• Collaborating with product owner, marketing team and developers to request content, validate user flows and hand-off designs.
• Refining the design based on stakeholder feedback.
• Developing and accessible style guide that was later decided to be turned into a full-fledged design system.
• Create the first mockups for the UI design.

Scope and constrains

The project focused on creating a frictionless one-step signup process with all the required security features and legal disclaimers. This included research and benchmarking to UI design and hand-off to developers. I had time constraints as I was assigned to a more extensive project simultaneously, so a web designer was hired to finalise the UI design based on the style guide agreed upon with stakeholders.

Solution

This is the the bulk of the project. Enjoy!

The process to re-design the website's signup and login process included:

• Research of competitors’ applications and interview users and stakeholders
• Proto-personas and presentation of best practices from other renowned websites
• Wireframing and prototyping of all responsive screens
• Final UI design, including hand-off and presentation for stakeholders
• Analysis of future steps that also need update to achieve the overall goal of increasing user registration

Diagnosis

A first assessment of the website's current user flow and design provided the following insights:

• Overall lack of hierarchy
• Outdated buttons
• Input fields offer no feedback to users
• There are repeated set of options
• Alignment to the left instead of centred
• No ‘stay signed-in option
• No colour highlights or visual cues
• Little white space between elements
• Option to Log in appears between other elements
• Mentions an ‘app’ that cannot be found in app stores
• Button colour is not consistent with the rest of the website
• Social Media buttons on sign-up and log-in screens have different styling
• Lack of animations or any elements that catch the user’s attention

‍

‍

Understanding the user

A proto-persona was created based on the information provided by stakeholders and the research conducted based on the brief and competitors' product.

As I lacked the budget or time to conduct research with users, I briefly interviewed people I know that use the website and/or have purchased properties in the last two years.

This also included a user journey map to understand current pain points and opportunities for improvement.

The user journey maps and flows depicted below were crafted based on the goals defined for Matt.

Competitive analysis

This being a simple and reasonably standard user flow, there was no need to reinvent the wheel. I could take advantage of what other well-designed websites (yes, Airbnb, of course!) and direct competitors were already doing right and also what to avoid.

There are a few big players in the property portal market, so I reviewed their signup and login processes. These are:

• Rightmove
• Zoopla
• OnTheMarket
• Citylets (this is not a direct competitor as it focuses on lettings only, but I wanted to get a different perspective, so I added it to the mix)

👉 It was interesting to see that most property portals use a modal for users to register or sign in instead of taking them to a different page. The idea of not being taken away from the property or search results page the user is currently looking at makes sense, as they would usually register to set up alerts and create watchlists after an initial search.

Going with the flow

After understanding the current issues and how others have worked to solve them over time, I started designing a solution.

I first created a user flow to ensure I wasn't forgetting any screens or possible user paths.

Low-fidelity wireframes

Using the user flow as a guide, I draw some low-fidelity wireframes to test possible screen layouts.

The resulting prototypes were drawn for small (i.e. mobile) and bigger (i.e. desktop) screens.

‍

Mid-fidelity prototype

After working with low-fidelity wireframes to rapidly try ideas, mid-fidelity wireframes and prototypes were developed.

These helped to flesh out the most successful ideas from the previous step even further and iterating how the main blocks of elements would look when placed together.

👉 Initially, the wireframes reflected the same amount of information that was being requested from users upon registration. Later on, after discussing with stakeholders and insisting on a straightforward registration process, the additional information fields were dropped.

‍

Enter the design system

While I had initially kept to the UI patterns that ESPC was already using for the rest of the website, I kept going back to stakeholders to indicate accessibility concerns with the colour palette. In addition, the lack of consistency between the different web pages added more complexity to the subject.

👉 After careful consideration and discussion with the product owner, developers and marketing team, it was agreed that the company could benefit from having a design system that could be used to leverage all the different products being developed and improved across the board. This project entered into a hiatus while the foundations of the design system were being created, but it resulted in an enhanced accessible design aligned with ESPC's branding.

Finalising the design

After a few months of working on other projects, including the new design system, I started working on the final UI design.

Shortly after, a web designer was added to the project to finish the screen based on the previous definitions and help set up the new components and their variables.

There was a first round of high-fidelity mockups, and a few changes were made after stakeholder feedback. These included:

• The intro text was modified to include some of the benefits of being a member
• Dropping the full benefits list from the side panel and adding images instead
• Placing the social media buttons at the bottom of the screen
• Changes to the Forgot password link
• Removing the Stay signed in checkbox

Summary of changes

Although the project took some unexpected turns, I believe they were for the better.

This is a quick list of all the changes made to the signup and login process after going through all the steps mentioned above:

• Overall modern feeling with optimised white space
• Social Media and Call-to-action buttons are consistent across the website
• CTA pop-up modals and buttons are easy to identify while remaining non-invasive
• The benefits of using My ESPC are highlighted
• Pop-up modal catches users’ attention
• Stay signed-in option added to the registration page
• Options to Create an account and Sign in are clearly divided into tabs
• The copy is concise and to the point, avoiding specific mentions of the app and website

There was also a decision to keep a full-page signup and login screen for link referrals from emails and other external sources.

Takeaways

My first project for ESPC's B2C website aimed to improve user experience and increase user acquisition, but it also allowed me to understand more about its users and the overall business.
This project also helped me introduce the concept of the WCAG and accessible design to stakeholders and product owners, which resulted in the creation of a new design system for the company, although it has yet to be implemented. This additional outcome highlights the potential for this project to have a broader impact beyond its initial goals.

Suggested next steps

• A/B testing once the new design is implemented by developers
• Setting up dashboards to monitor user adoption and potential issues with the design
• Improve My ESPC layout to match the sign-in screens
• Allow users to download Home Report and schedule property visits without re-entering their information
• Modify individual property pages to reinforce bookmarking feature and change the ‘register to view’ copy that can confuse users who are already signed in