Creating Proper Rent, a platform that helps property managers with the management of tenants, properties, payments and taxes.
3 minutes read
In January, I saw an opportunity to join 5 more people as a part-time cofounder in Proper Rent (invented name for privacy) in their B2B SaaS solution. I gave myself 1 month to see how was my fit with the team as I did not know them previously.
After one month, I decided not continuing working with them as we had a different approaches.
Before joining the startup I did a bit of research about the market and the opportunity. Even though there was some competition, I saw enough room for a boostrapping competitor with low prices and a great product.
Also to mention, I was not the first designer of the company, previously a guy helped adding some branding (logo, colors, typography, …) and a screen from the “Properties” design page.
Let’s face it: a startup should go fast. The idea was to provide value from the beginning, so I could check how they would react and see what they could do with my deliverables. I’ve got assigned two tasks from the beginning so my idea was to optimize the process to fit the timebox.
I started by understanding the problem we had to solve. I did desk research and looked how other competitors (Buildium, DoorLoop and Turbotenant mainly) were solving the same problems by doing a benchmark of their solution and checking their flows. Other research methods would have required more time and as stated, I wanted to provide value fast and then iterate based on further research in the future.
With this info, I created the wireframes.
After finishing the wireframes, I started with the UI. Even though I think that startups don’t need a perfect design system, some foundations are necessary. I found some colors and typography in their library, but it was mainly marketing related. For example, the typo chosen (Owen pro), had not a good legibility in small-medium texts, and the amount of colors were not enough to create all the components.
That’s why I created a small UI styleguide so we could have a reference. I used Untitled UI as guide and some components as base.
I shared the process with the rest of the team in order to get their feedback and iterate with their info to keep them in the loop.
I kept some things of the old design as "Mas blue" color for primary, basing the shades on it, and "Independence" as part of the neutral scale. I took into consideration accesibility from the beginning.
For the typography, I kept Owen Pro for headings, but used Inter for its great legibility in the rest of the solution.
I created a new logo, more simple and representative of the values we wanted to transmit with the brand (Scaling your property management company with a cheap and trustable software).
To optimize the process, I created a component every time there was an element that could be repeated. I created them considering their different aspects (breakpoints, states). For example, the sidebar had different tabs (default, hover and active), and different states (in Desktop was fixed, while in Tablet & Mobile it had different interactions).
Before joining, there was a design that was already in production. My task was to redesign the screen with a similar structure.
User Story: As a property manager, I would like to check all the different properties so that I could manage my portfolio.
Plain text did not seem the best idea for some fields, so I created avatars, chips and even added some more info (images) in order to have a better organization and UI.
When designing is important all the different states that the screen might have. In this case, it was the scrolled state, the empty state and the skeleton when loading.
Filters and sorting were remained out of the scope as we decided that for the first iteration of the screen (MVP), there would only appear the table.
"Add a property" was kept out of the task aswell.
After finishing "My properties" section, I had to create the detail when selecting a single property. I used the research as base for the wireframe, focusing on the main important things managers would like to see.
User Story: As a property manager, I would like to check the property details so that I could manage the property.
Only the overview was created, but the idea was to add all the screens for each different tab.
Edit the property was kept out of the task aswell.
Even though I ended up not continuing in the project, I enjoyed working on it as it was a different approach to other projects.
