Role
UX Designer & Researcher, UI Designer
Project Prompt
Design a new back office property management & publishing platform.
Collaborating with a cross-functional team of 12 colleagues in total.
Company Brief
CaseVacanza.it is the leading site in Italy for tourist rental ads, intending to make the experience of renting a holiday home simple, safe, and affordable for everyone, in association with many partners around the world and Hometogo as the major.
Casevacanza.it offers its hosts a browser platform that allows them to create and manage property ads with a wide variety of plans fit for everyone.
Usability test & Kick off
We run a usability test on the old BO with 8 different participants to learn frustrations and pain points.
Once gathered insights from the usability test we organized our first kick-off with stakeholders from HometoGo and my team to review our insights gather, consider our approach, and set up timelines. To help us find the best scope possible we started out by asking ourselves some initial key questions.
Preliminary ideation
We moved on gathering our first assumptions based on user feedbacks on the current back-office and used affinity mapping to identify not only the general scope of the new back-office, and consider possible opportunities. This was our first brainstorming during our kickoff period that helped us to have a better idea of the problem prior definition, proving to be very helpful in setting up the foundation for the rest of our process.
We opted for a User-focused design approach that would helped us move along through the timeline smoothly. We decided to use qualitative research methods to guarantee meeting the user expectations and needs, consisting of affinity maps, interviews, personas, and scenarios.
Project Vision
Provide our hosts with a brand new back office platform, with a User-focused design approach that revolves around focusing on our users goals, needs and scenarios.
Project Goals
1) Provide a seamless & linear flow.
2) Eliminate the barrier of desktop-only.
3) Create easy-to-understand data visuals.
4) Avoid the creation of new components as much as possible using our current design system.
An unusual scope?
Considering the size of the project and the request from our major partner HTG, we scoped this project as desktop first and later moving into the mobile solution.
Research insight
We conducted a series of interviews to a total of 8 hosts (private owners & agencies) consisting of quantitative and qualitative questions to help us empathize and understand context, goals, needs, as well as further understanding on frustrations, and pain-points when using the product.
These interviews provided us with valuable data to create personas, affinity map and define our problem statement.
Problem Statement
Our wide variety of hosts are in need for a quicker, and easier multi-platform solution to publish and manage their properties because the current platform is complex, outdated and limiting.
Meet our personas
Key scenarios
We defined scenarios that users will experience on their journey before and after a property is published. Understanding this would help us guarantee linear process flow.
Requirements
In combination with our research, we defined the requirements, features to preserve from the old back office, and consider new features that meet our users' needs and goals.
Moving to Ideation & Design
At this point we concluded our understanding phase, where we empathize with our users and defined pain points, frustrations, goals, revalidated our opportunities and assumptions.
Preliminary Content Taxonomy & Flow
We started by defining the content taxonomy by our scenarios and sub scenarios when creating a new property (A2: entire property, B2: separate units) and how it will be viewable throughout the flow.
Later we constructed a fully detailed user flow from the start to finish journey of creating a property from both case A or B. This helps us in understanding ways users can interact with the product, as well as allowing us to see navigation through user goals.
Lo-fi Idetation & Flow
This was the key moment of the ideation by sketching P&P wireframes with different variations that meet the goal and needs. After selecting the best options, we overlaid them on our flow to have a better view and verify if goals and needs are met.
Preliminary wireframes & Alpha Prototype
After sketching out some p&p wireframes and validating through the preliminary flow, we reviewed what was necessary, unnecessary, and what areas needed improvement. The feedbacks helped for the creation of our first digital prototype and run an alpha test.
Full process flow for adding a new property
Iteration
We designated each member of the internal team to run through different scenarios in our prototype in hopes of garnering enough feedback to use for our next set of design iterations. We were a total of 12 to provide feedback and insights while running our first Alpha test.
We revisited the content taxonomy and arranged all required fields to be first-hand. Also, many requirements were eased to allow the user to complete the flow and fill up later. Since the content and requirements were eased, the whole flow was reduced giving a more linear lean feel. Lastly, once a property has been published, a new instance of property minisite will be created, allowing for quick scanning and avoiding confusion.
New Content revisited
Hi-fi Design & Validation
Once all alpha iterations have been completed. We moved on to the creation of a hi-fi prototype for Beta test. We were able to create a finalized design with all the components we already had and very few new ones. The final validation was done with our first users and presented with scenarios to gather feedback for a final iteration and minor tweaks.
First time property creation
Linear path while keeping all required fields on the first steps, allowing users to navigate the rest of the process all the way to the end where they can review, publish or save for later.
Creating a new multi-unit property
The multi-unit process has a more similar linear process, we kept the first steps consistent from both cases, and later the user could start editing each unit at the same time of each step to avoid starting from the beginning with each. A new feature to save time is the ability to copy information from another unit that already has information in that section.
Reviewing a property prior publishing
The final step after a property has been created, allows users to verify all data has been filled and to easily go back to each section in one click and back to the review page. Here the user can have the options to edit, publish or save the entire process to publish later.
Reviewing a multi-unit prior publishing
Similarly, the multi-unit review page allows users to check for missing data and quick editing. However, this section comes with a more interesting breakdown per unit for a better focus. Lastly, it has the interesting feature to clone an entire unit or add a blank unit.
Editing a property
To give a better sense that a property has been published the users can view a minisite of the property with all the details, divided into smart sections for easy scanning. On this page, users can do changes to the property, request new services, manage the calendar, and unpublish the property if needed.
Moving to mobile
Once finalizing with the desktop version and moving towards mobile we faced interior challenges that we already feared from a desktop first scope. Before starting we had several meetings and standups to reduce our assumptions and keep our user's goals first.
Final Design
Staying focused
We decided to break down the steps as one task per screen. The content was spreaded out increasing slightly the size of the flow but with the benefit to keep the user focus on each tasks without overwhelming sections.
Quick, Simple, Intuitive
One of the first reactions gathered from our test sections. The mobile solution felt faster and surprisingly simpler than the desktop solution, with less distractions and very intuitive behavior.
Eliminating barriers
We decided to be more open minded and remove a good amount of restrictions. For example the gallery is not required anymore to complete the process. This way users could work as much as possible on a property via mobile and finish the final touches on the desktop.
A Pocket Solution
Just as Helene; our persona; many of the interviewers that tested the mobile MVP expressed satisfaction for a "pocket solution" as they called. Most of the actions done via desktop can be done via mobile without jeopardizing performance and with a clear simple writing.
Final Results
Once the mobile version was completed on time, we presented it to the major stakeholders from HometoGo. The results were highly positive that sparked the initiative to use this project as a concept for the new BO Cloud Global Solution to be used for Ferries, Hometogo, and all our other partners to manage and publish properties.
Takeaways
Working on this project was a great opportunity to be inclusive and have a strong collaboration with my cross-functional team. The main difficulties while working on this product was avoiding the influence of assumptions and bias mentality or the desire to slack off to gather data. Instead, we gained a good amount of awareness on the benefit of being user-focused and designing a product based on real user goals.
While working on the mobile version there were many moments that the team wanted to fall back into the assumptions, but I helped my team to regain motivation and maintain a focus on the scope of the project, by revisiting our personas and interviews of real users.
What to do better?
Surely, there would be several areas that I would love to revisit and do much better. Even though we did our best to remain inclusive we skipped the importance of being equitable focused and providing accessibility features and opportunities. This is something that we the new Global solution I am pushing on my team to consider other scenarios and context that users may encounter and not excluding those that have been historically excluded before. Also, I would like to revisit with the interaction process to think of more possibilities on how to reduce interactions and make it simpler.