UX Design / UI Design
BoutiqueHomes CMS
BoutiqueHomes is a vacation home rental company. To stand out from the competition, one initiative was to allow property owners to list their accommodations under a single listing. A single listing would provide travelers the full picture about a property and make it easier for them to book multiple accommodations at the same time.
The problem was their existing content management system (CMS) wasn’t set up to allow such properties to be published. In collaboration with the founder and developers, I redesigned the CMS.
Background
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.
Strategy Development
The first step was determining how the properties would be laid out. The existing CMS created a listing for each accommodation. Since the information about the property as a whole was the same, this created duplicate information across the accommodations and required duplicate entry on the admin’s part.
Instead of replicating the pages required to list a property for each accommodation of a property, I proposed isolating the data required for a property listing (“overview”) and having pages specific to the accommodation information separate. This way, content that pertains to all accommodations were filled out once and content specific to each accommodation would be filled out on a one-by-one basis.
Task Analysis
With the strategy in place, I analyzed the current workflow of admin users to identify pain points and areas of improvement.
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.
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.
Design
Based on the information I had learned during the research phase, there were several features I wanted to incorporate into the final design.
- Easy way to switch between subunits within a property
- Progressive disclosure
- 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.
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.
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.
Result
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.
