Spaces – property renting

5 months / UI/UX / ~211 screens / Designed from scratch / Sketch, Invision

~ 6:25 mins reading time

Summary

Services

  • User Experience Design

  • User Interface Design

  • Prototyping

  • Interaction Design

  • Information Architecture

Deliverables

  • Design system

  • Style guides

  • Final design and interactions

  • High-fidelity click-through prototypes

  • Development support

Outcomes

  • Spaces have a clean and straightforward web application that suits the needs of its fast-growing business.

  • We advocated a company-wide adoption of new technology, which brought more efficiency and speed in the Spaces team.

Project

Spaces is a young company based in London, UK. They want to disrupt the property renting business by providing exceptional service for property owners, landlords, and tenants.

I was a part of the Sprint Innovations team as an independent freelancer when we started to work on the Spaces UX. They were in a business development stage, and our task was to do the user experience of their property management application.

It will be an internal tool for the company’s needs only and will operate on desktop devices.

Problem

  • Spaces had no digital instrument for managing their business. They had a great workflow and a passionate team but lacked a centralized management system that all Spaces clients and staff can use.

  • They had a unique business model but needed to monitor the workflow and see all the transactions and reports.

  • They struggle to process tenancy applications manually and are hesitated to ask tenants to write many paper documents.

Solution

  • We started from scratch and created an easy-to-use custom-tailored experience of how to add properties, portfolios, and leases.

  • We helped the management team to control the pricing, view the upcoming stocks, check seasonal curves, discount rules, and reservations.

  • Usage of recognizable patterns and predictability in the interface helped Spaces team to work faster and errorless.

Design Process

1 / Discover

The Sprint Innovations team provided me with the initial discovery data.

2 / Define

  • The low fidelity wireframes were already in place.

  • We re-defined the Information Architecture and built the User Flows

3 / Design

  • Visual guidelines & Components Library

  • High-fidelity user flows and prototypes

  • Interaction design

  • Development support

4 / Test

  • We used Contextual inquiry as a testing method.

1 / Discover

They provided us with the initial research data, the user interview surveys, and the competitor analysis. We spent a reasonable amount of time understanding everything and asking numerous questions to get the big picture.

The information was comprehensive enough, but we dug deeper and done our research and made a couple of conversations with people with leading roles in the company.

In the end, we get a pretty good understanding of what has to be built, how to do it, and why.

2 / Define

We had low-fidelity wireframes that illustrate some core functionality and the overall client idea. We used them as a starting point and re-defined them entirely in the design stage.

Information Architecture

After a couple of conversations with the Spaces team and some internal brainstorming sessions, we defined the main navigation flow, the sub-pages, and the essential actions.

User flows

Based on earlier decisions, we focused on the core flows that have most dependencies. These flows will uncover repeatable patterns that we’ll standardize as core UX and use it across the app. We started with New Parent Property, New Lease, and Add Stream workflows.

Parent Property workflow

New Lease workflow

Add Stream workflow

3 / Design

Visual guidelines & Components Library

Spaces provided us with Brand Book, and we used the colors and the primary typography to create a visual style and initial style guide.

We developed a primary color palette that serves the needs of the application interface. A secondary color palette complements the first one, and we used it for the Streams, status badges colors, and others.

The key with typography is – simplicity. We used Roboto typeface. Friendly and opened curves show the humanist nature of the font and make it a perfect choice for a corporate, content-heavy desktop application.

The next step is to create the Components Library. We used Sketch symbols to create a nested structure of custom-crafted components with styles and texts overrides. We worked wisely and limited the different components to the minimum, by using repeated UI and UX patterns. They bring a high level of consistency and recognizability, which in turn contributes to a faster and error-prone working process.

High-fidelity user flows and prototypes

We created the main application frame to maximize the content space and to optimize and unify the content-heavy navigation. The main menu is on the left with a top bar with breadcrumbs, global search, and user-related actions.

The primary application screens contain a table view with search, filters, pagination, and primary button/s. The secondary screens are complex items-creation processes that cover multiple inputs, tables, add/remove item flows, and side pane views. 

We created the complete set of high-fidelity click-through prototypes in Invision that illustrates the core workflows. Below you can see some key screens of these workflows and the option to play with the real Invision prototypes.

Add Property

The main dependency is the property type, which dictates the child properties types. On the left, we have property details with some type-aheads, dropdowns, and inputs.

The main requirements for the flow were to design a system for adding a new building, a new floor, and apartments with bedrooms and beds in a nested structure with abilities to add/remove elements. We standardized a pattern and used it across the application.

New Lease

The page follows the two main columns pattern—details to fill on the left, metadata on the right, and actions below.

The Rent Periods section follows the add/remove elements pattern, packed in a table with inline editing capabilities.

All actions of adding additional elements during the main activities appear in a side pane. This pattern keeps users in context and allows them to focus on a single action simultaneously.

Upcoming Stock

Spaces team needs to know which rooms will be available soon to starts to advertise them more on their website. We provided an interface where people can visually see the properties distribution by location, which helps staff to promote properties evenly.

Table with Action column helps Spaces staff to edit and publish/unpublish properties quickly and easily.

The system communicates its status by providing notifications for performed tasks.

Quick and advanced filters combined with powerful search helps staff narrow the table results as they need.

Streams

Streams are sets of property viewing activities scheduled one after another.

Spaces team uses property reference numbers a lot, and we incorporated it in the flow when adding a property to as a stream.

The essential thing somebody does on the page is to assign a host or add an attendee. That’s why we used a quick add action for each stream card.

Reservations

Spaces team did repeated filtering queries while doing their work, and we decided to include quick filters that resemble their workflow.

They also need to monitor the status and see the progress in the individual steps. We made a status hover tooltip with detailed status information that perfectly suits their needs.

Interaction design

Inline editing pattern

Spaces staff have to view and scan big chunks of data, and they need to be able to edit it quickly and securely. We created an inline editing pattern that acts on hover and represents the edit/confirm/cancel actions. Now the staff works quickly and errorless.

Side panes

Extremely helpful interaction model. It helps people stay on the same page while focusing on the sub-tasks of the main flow. The versatile interaction covers the complete interface of the application and is used with a different type of content, triggered by a different kind of action buttons.

Add/Remove Items

We apply these patterns to tree-based interface elements and action tables. It helps people to rely on previous experience and do complicated tasks correctly for the first time. The patterns present an add and remove buttons that do exactly this on the rows that they appear. We standardized the button order, color, and appearance.

Table views with/without inline editing

Versatile table views with clickable rows with or without inline editable elements are a robust pattern of organizing a complex set of data. We included powerful filtering and searching mechanisms and standardized the view to apply them all over the application.

Development support

Our collaboration in Invision was essential for finetuning the designs, and when Spaces approved them, we started to prepare documentation for the developers. Using Sketch + Invision allowed devs to use “inspect mode” to gather layout details directly from Invision.

We packed a style guide, components sheets, patterns, and interactions explanations, and recorded helpful videos with further details.

Developers started with the smaller bits of the design system, the typography, and the color palette. After that, they coded the components and their states. We monitored the process and provided numerous guidelines and feedback to ensure the quality of the product.

We continued to support the dev team and to do feedback and debug sessions through the complete course of creating the interaction patterns, the pages layouts, and the complete workflows.

4 / Test

Given that the application is an internal tool, we did user testing only with the Spaces employees and high-level executives.

We tested each workflow first with an Invision prototype and, after that, with the staging application. With this approach, we caught issues early in the design process and right before production.

The constant testing and the early end-user feedback helped us to iterate rapidly and finetune the experience to perfection.

Outcomes

  • Stakeholders that value design and understand how it can improve their business. We spend time to advocate design and encourage people to think differently.

  • We carefully defined and executed the user interface and crafted exceptional user experience that helped Spaces team to manage their business efficiently.

  • A communicative and easy-to-use experience that keeps users in the context and reduces the cognitive load by repetition, patterns, and consistency.

What we learned

  • Watch more closely how people do their work and make considerations based on their habits.

  • Don’t be afraid to find and propose to people a better solution to accomplish their daily tasks.

  • Always dig deeper and optimize the experience. The perfect solution comes in the most unexpected moment of exploration.

What’s next

We built the first version of the application. It so much more to come. We have to design the Tenants and Deposit workflows. We have to handle the offboarding flows and build more reports.

In the next release, we’ll add the user account system. We’ll continue to test and iterate on some specific interactions and UI/UX patterns.

Let’s work together

Drop me a line at [email protected]

Find out what my colleagues say about me and my work.

Hire me on upwork.com or view feedback.

Get the essential info neatly summarized.