A Backend Interface Redesign for Optimized Workflow

Backend Interface Design

Overview

BoutiqueHomes is a vacation home rental company. They were in the process of migrating their backend interface to a partially completed design. However, progress came to a halt due to limited resources.

In my role as UX Designer, I conducted user research, tested prototypes with users, iterated the partially completed designs, and prepared the final handoff for developers.

Challenges

There were several challenges in this project:

  • New product structure: Stakeholders wanted to offer property owners the ability to split sections of their properties into multiunits. At the time, only single units were being listed.
  • Unfinished designs: A new design for most of the pages had already been created before I joined, but required more work for a seamless user experience.

Goal

Design a backend system that allows both single and multiunit properties to be created.

Design Process

Strategy Development

I sat down with the stakeholder to understand the business objective, background information, and requirements for the design. We would later regroup several times throughout the design cycle to revisit the strategy and ensure advancements were being made.

One area we discussed was structuring the backend system to support the creation of multiunit (MU) properties. The only difference between listing a single versus multiunit property is that the multiunit property would have unique information about each unit.

Instead of replicating the pages required to list a property for each subunit of a MU property, I proposed isolating the data required for a property listing (“overview”) and having pages specific to unit information separate. This way, content that pertains to all units were filled out once and content specific to each unit would be filled out on a one-by-one basis.

Property Listings

Task Analysis

With the strategy in place, I analyzed the current workflow of admin users to identify pain points and areas of improvement. Below is part of the workflow.

Old Account Creation Process

A takeaway from this exercise was revisiting the information architecture. Different admin users work on different parts of the property listing, but they were sharing the same page to enter that data.

Partial Design

As mentioned, a partial design was created before I had joined. I mapped out the fields from the original pages to the partial designs. The partial designs had content in different places as well as new and missing fields. After interviews with the stakeholder and developer, I was left with the fields we would keep in the final design.

Page Comparison

Card Sort

I developed a card sorting study to understand how users would group the fields into pages based on their needs for the new design.

Card Sorting Exercise

Design

Based on the information I had learned during the research phase, there were several features I wanted to incorporate into the final design.

  1. Easy way to switch between subunits within a property
  2. Progressive disclosure
  3. Collapsible tabs

Sketches

I sketched ideas for the multiple pages of the backend interface. Storyboarding was one technique that helped me visualize the workflow of admin users for the Images page.

UX Design Process

Wireframes

The stakeholder and I sat down and sketched our ideas for how the template should look—primarily the navigation. After exploring different designs, we had two concepts, which I asked users for their feedback.

Design A Design B

Users described the designs as "clean" and "well structured," but were split between the two concepts. Ultimately, we moved forward with design A since its navigation on the left sidebar allowed for important content to appear higher on the page.

Usability Testing

From there, I designed clickable prototypes that provided a near reflection of how the experience of publishing a property will be in the redesign. After a few rounds of usability testing, I iterated the design, received the go ahead, and prepared the final handoff for programmers.

Results

The result is a finished interface that keeps the familiarity and functions of the old interface, but accommodates multiunit properties and streamlines several functions for improved usability and greater efficiency.

Backend UI Design
Business Application Design