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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.