Redesigning a Backend Interface

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, established a design system, 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. This required significant restructuring of information.
  • 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.
  • Inconsistency: There lacked standardization when it came to writing and design. Different pages utilized different fonts, and the UI wasn’t uniform.

Goals

  1. Design a backend system that allows both single and multiunit properties to be created.
  2. Ensure the design is mobile responsive and easy to use for all users.

Design Process

Stakeholder Interviews

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.

The new product structure required admin to adapt their workflow. In the current system, an account is tied to a property listing. This allows properties to be assigned to a different owner. In the new setup, admin users create property owner accounts under which properties are added. In addition, owners would be able to list their units into one property listing page.

Account Structure Diagram

While the property listing would display a property overview and subunits below that, the backend system would remain the same—users would fill out the same information for subunit to subunit within a single property.

To address repetitive data entry, I reviewed the data required to publish a property listing page and extracted the data specific to a unit.

Property Listings

Task Analysis

I also performed walkthroughs with admin users to learn their process for completing their work.

Old Account Creation Process

A takeaway from this exercise was there was a need for better data groupings. Different admin users work on different parts of the property listing, but they were sharing the same page to enter that data.

Information Architecture

With the data structure and workflow established, I evaluated the old backend interface versus that of the partial design.

Research questions I sought to answer:

  • What is the purpose of this field?
  • How does data in these fields appear on the property listing page?
  • Are any fields outdated?
  • What happens if you mark a checkbox?
Page Comparison

I interviewed users to find my answers and supplemented that with information from the stakeholder and developer as well. Takeaways from these interviews include:

  • Outdated fields: Fields that serve no purpose or are no longer functioning.
  • Unknown fields: Users would fill out certain fields without being certain of its function.
  • Duplicate fields: There were several pieces of information users had to fill out twice across different pages.

Card Sort

Once it became clear which fields to discard and the functionality of those fields that would be kept, I prepared a card sorting study to understand how users would categorize them into pages based on their needs for the new design.

Card Sorting Exercise

Design

Since admin users would be entering a lot of data regarding a specific property, two features had to be incorporated into the final design: 1) Easy way to switch between units within a property and 2) Collapsible sections.

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 the 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, the following were discovered:

  • Page titles required “Overview” and “Subunit” to help orient users with which part of the property they were editing.
  • When data switched from Edit to View Mode, users understood the data had been saved.

Implementation

After studying the usability test results, iterating the design, and regrouping with the stakeholder, I prepared the final documents for handoff to programmers. This included a sitemap, task flow, and detailed annotations.

Results

Backend UI Design
Business Application Design

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