Overview
Elyssa App is a leading tool in Latin America for managing digital real estate inventories, streamlining organization and reducing tenant disputes. Rental agencies rely on it to set up properties, assign spaces, add items, and document their condition with photos, exporting the data via PDF.
However, users faced significant challenges with the existing workflow for template creation, a key feature designed to speed up these processes.
Templates allow users to pre-assign items to specific spaces, like a toilet in a bathroom or a ceiling in a living room, but the interface was confusing, time-consuming, and often led to errors.
I was brought on to redesign the template creation and editing flow to address these pain points and improve user efficiency. My high-level goals were to:
1. Increase user engagement with this feature
2. Reduce the time needed to edit a template fully
Project Info
Lead UX/UI Designer
Tools
Figma, Mural
Timeline
July - Oct 2024
83%
Decrease in # of clicks to complete template editing
50%
48%
Increase in user satisfaction across early tests
Documenting The Problem
At the onset of the project, there was a general sentiment that the current design was not working, but no documented insights into what specifically was causing the lack of utilization.
In documenting the current flow, our goal was to understand the challenges users faces when creating and editing templates.
Key Insights
Confusing Navigation
Searching is inefficient
Saving changes is not intuitive
Furnished vs Unfurnished spaces
Defining The Problem
The current system for managing templates and adding items was causing inefficiencies and frustration for users. With poor navigation, lack of feedback, and cluttered UI, users struggled to efficiently manage templates and save their progress. These issues led to confusion, wasted time, and underutilization of key features.
This raised the question, how might we streamline the template editing process to help users efficiently set up and take accurate inventory of their rental properties with minimal friction?
Brainstorm
Once we’d identified what problem we wanted to solve, I spent some time with the lead dev brainstorming solutions together. We organized our ideas into categories of the specific issue they would address.
Guiding Topics
Considerations
Once we'd organized the ideas from our brainstorm, we discussed implementation, and team resources to determine which ideas most strongly addressed our goals. Then, we moved into creating our low-fidelity screens.
Low-Fidelity Screens
I created low-fidelity screens to discuss with Dev. We focused on three flows - one for unfurnished templates, one for furnished templates, and one for users that do not have furnished templates included in their plan.
A Pivotal Change
As the beginning of the project did not allow for additional user research before we began designing, I advocated for meeting with Customer Support for additional feedback before moving to Hi-Fildelity screens.
Speaking with Customer Support, understanding complaints from users, and hearing about specific use cases, led us to further define the problems we needed to tackle.
Modals create limitations
Modals limit the number of items users can view on a single screen and often require scrolling. Since users will need to scroll smoothly, drag and drop items to reorder them, and get a clear visual of the entire order, we found that modals restrict visibility and create usability challenges.
Multiple screens lead to incompletion
Multiple screens can disrupt task completion, especially when users need to remember information from a previous screen while performing actions on the current one. This added cognitive load increases the likelihood of frustration and may cause users to abandon the task altogether.
With this additional context, we learned that the feature's usability was hindered not just by confusing UX, but by repetitive screens and modals, which limited visibility and increased user frustration.
Hi-Fidelity Designs
With a better understanding of the problems we were designing for, we created a first iteration of Hi-Fidelity screens to set as a basis for usability testing.
Edit, delete, and add items on a single page, with instant updates reflected in the template summary for immediate feedback.
Items are now organized by room for easier discovery, the search bar has been optimized for better results, and if an item can't be found, users are prompted to contact support.
Users can create templates for both unfurnished and furnished spaces, while maintaining the ability to edit item order.
Testing with Users
Once I'd built the Hi-Fidelity prototype, we scheduled 5 sessions with users from accounts of different histories and sizes, testing not only the intuitivity of the design but also the overall understanding of its features.
Additionally, we took the opportunity to ask users specific questions about their experiences with templates and potential use cases. This was particularly important since the project did not allow for user interviews during the initial research phase.
Our main findings were:
Users do not like to edit multiple templates when they're consistently forced to add obvious structural items to each template (like floors and ceilings).
When users were prompted with finding an item, they opted to use the search bar over looking through the categorized search function. This was also true for how users described using the templates feature to find items.
These insights guided the next set of design iterations aimed at streamlining template creation and enhancing the search experience.
Design Iteration
Following user testing, with two areas for improvement identified, I began working with the Head of Dev to iterate on the designs further.
1) Redundant Edits
Users expressed frustration with having to repeatedly add obvious structural elements, like floors and ceilings, to multiple templates.
Users saw this as tedious and unnecessary when dealing with basic, repetitive components across multiple templates, reducing template completion.
To address this, we introduced the option to automatically add common structural items based on the space type.
For example, when setting up a bathroom, default items like walls, floors, doors, toilets, and sinks are pre-populated, reducing the need for manual input and speeding up the template creation process. This balance between customization and efficiency made the experience more intuitive for users.
DESIGN UPDATES
Items are underutilized in templates
The updated design automatically offers to add essential structural items—such as walls, floors, and ceilings—tailored to each space. This intelligent feature streamlines the setup process, reducing redundant tasks for the user.
2) Search Bar Dominance in Testing
Users preferred the search bar over exploring the categorized search function, especially when prompted to find specific items. This behavior carried over to how users interacted with the templates feature before the redesign, often bypassing the alphabetized list of items entirely.
This made sense—users typically browse categories only when their search doesn't show the item they need or when they're unsure of what to add next.
While the categorized organization of items remained useful, we recognized the need to help users discover items without knowing exactly what they were looking for, as most users wouldn’t explore every category by choice.
To solve this, we introduced a smart suggestion box. In edit mode, it offers tailored recommendations based on the type of space being edited. For example, if a user is editing a kitchen, items like 'sink,' 'stove,' or 'cabinet' are automatically suggested and can be added with a single click. This feature simplifies the process by providing relevant options without requiring manual searches.
DESIGN UPDATES
Smart Suggestions to make it easy
The updated design introduces a smart suggestion box that tailors item recommendations to the type of space being edited. With one click, users can add relevant items, reducing the need to search manually and improving the overall workflow.
Future Steps
The Redesign
Streamlining Template Management for Property Managers
The redesign of Elyssa’s template feature aims to drastically improve the user experience for managing digital real estate inventories. The new flow simplifies the process of creating and editing templates, allowing users to take inventory quickly and efficiently.
Previously, users found the feature confusing and cumbersome. The redesigned interface is expected to reduce cognitive load and make these tasks more intuitive and efficient.
Development
On Track for Implementation
The project is set to go into development by the end of the current quarter or early next quarter. The design phase has focused on reducing unnecessary steps and making the interface more user-friendly, setting the stage for smoother adoption once development is complete
The Expected Impact
Increasing Engagement
Although detailed metrics are yet to come, early design iterations have shown a significant reduction in the number of clicks and time spent editing templates—by as much as 50%. This improvement is anticipated to lead to better user satisfaction and increased usage of the feature, especially among property managers dealing with complex inventories.
Establishing a New Standard for Metric Tracking
Advocating for Data-Driven Improvements
Although detailed metrics are yet to come, early design iterations have shown a significant reduction in the number of clicks and time spent editing templates—by as much as 83%. This improvement is anticipated to lead to better user satisfaction and increased usage of the feature, especially among property managers dealing with complex inventories.