The original login screen was cluttered and lacked a clear visual hierarchy
Property Managers are busy people. Like, really super ridiculously busy .
Every day they juggle dozens of urgent emails and calls from tenants and landlords, run property inspections, and handle large volumes of new tenant applications.
Most applications contain multiple individuals, each with a long list of details and documentation to review. And all this has to be done as fast as possible!
NXT Form provides a structured, automated workflow to streamline this entire process.
In mid-2020, the founders of tech startup NXT Form realised they needed product design capability to take their concept to market.
The CEO and COO had bootstrapped a basic version of the platform using an offshore development team, but it quickly became obvious there were major issues with both platform usability, performance and scalability.
Joining the founding team as an equity partner and Head of Product Design, I worked closely with Thomas James, the new CTO and my former colleague, to determine an effective course forward.
A deep-dive into the system revealed UX and technology issues so severe that we briefly considered a ground-up re-build, but we felt this was too risky in terms of delivery time and the market would likely move beyond us.
We had a limited timeframe in which to act and gain traction.
Ultimately, the CTO and I agreed to adopt a lean, continuous delivery model (research - design - test - repeat) with re-factoring the tech stack our number one priority to improve performance and security plus support multiple company instances concurrently.
In terms of product experience, we established the following 4 high level objectives:
Deliver quick wins by targeting "low hanging fruit" where it was possible to release rapid improvements to the existing UI with minimal dev effort.
Research and document the problem space including business context, user personas and journey & process mapping
Ensure product/market fit by confirming then closing any critical UX issues and feature gaps
Create an ideal, "ground-up" future state experience unconstrained by legacy UI/UX and technology, establishing the foundation of our longer term roadmap.
Onshore lead developer (CTO)
Offshore development team
Pencil on paper
User surveys & testing
Personas & user journeys
Process and flow maps
Marketing and support materials
Stage progressively over
Prior to NXT Form launching, tenant applications were cumbersome, multi-page hardcopy documents or basic online forms.
Our key online competitors featured awkward "paper to digital" solutions which were almost universally loathed by tenants. They also offered very little in terms of automating all this aggregated tenant data to make the lives of Property Managers easier.
The key value proposition for NXT Form was to address this gap by making things quicker and easier for tenants -and also, most importantly - for Property Managers.
I used a four-step process to understand the problem space:
First I consulted with our in-house SME, an experienced Property Manager whose extensive knowledge formed the foundation of our product workflow.
This included onsite workshops and zoom interviews to map out the problem space and review existing processes, processes and systems.
Next, I validated and adjusted these findings with several other property managers.
Multiple tenants were then interviewed remotely to determine their common goals & pain points.
The collated information for each persona was then formally documented and user journeys mapped out.
Finally, I evaluated a range of competitors to determine how they met (or neglected) the needs of our personas.
This helped identify opportunities we could pursue to establish a clear competitive advantage in the market.
We began by documenting our two primary user archetypes: Property Manager and Tenant.
The demographics and skills shown for Troy are purely representative and probably could have been omitted as there is such a broad range of people seeking rental properties.
We considered breaking down this group into multiple sub-personas but felt this wouldn't significantly affect the solution as their common behaviours and pain points are the key factors.
Five secondary personas were identified for future investigation:
Lloyd the Landlord
Craig the Co-Tenant
Rachel the Referee
Preena the 3rd party PM, and
Uma the Unsuccessful applicant.
Journey / process maps
Piper the Property Manager
Beyond platform onboarding (to be explored separately), Piper's journey looks like this:
Notification of new application
High-level triage of viable / non-viable options
Review references as they arrive
Identity and background checks
Obtain owner approval
Notify all applicants and manage lease signing /payment
Troy the tenant
Troy's NXT Form journey begins after he has first identified and inspected the property:
Submit application including documentation
Pre-arrange utility connection (optional)
Sign lease and make payment
-OR- apply for other properties
Platform workflow maps
These simplified diagrams were produced to distill the key interaction flow for new clients and included as part of their Quick Start user guide...
I used Monday.com to handle design tasks in a simple kanban framework plus Notion for wiki documentation and Hubspot for support and marketing.
Overall this combination worked pretty well for our small team, although I've also used github/gitlab, basecamp and of course Jira/Confluence in the past at larger scale.
I began by identifying some relatively easy ways to improve market perception and surface-level "usability" of the product:
with scope limited to logo, palette and typography
Overhaul public landing page
with new brand, layout and copy
Re-skin Tenant UI
via CSS overrides
Re-skin transactional emails
via CSS overrides
Re-skin Property Manager UI
via CSS overrides
UI tweaks based on Heuristic Analysis
to improve key interaction points
Quick win 1:
I don't often work on re-branding these days but you wear a few hats in early stage startups. For expediency I limited scope to the logo, palette, basic typography and new business cards, rather than a comprehensive style guide with tone of voice etc.
Quick win 2:
Overhaul landing page
Apply new brand to appear more professional than the original "home-made" styling
Re-write the copy to provide a concise summary of product features and value delivered
Re-structure the layout using a more modern, scalable XHTML framework
Previous landing page
When I joined NXT Form, the landing page featured awkward branding, poor layout, no product imagery or clear calls to action, and extremely vague content that basically made no sense.
New landing page
The primary intent was to introduce a friendly, simple new brand (logo, palette and typography), improve the responsive layout, surface the product UI, and write much clearer, succinct copy establishing the context and benefits plus an FAQ and simple paths to action.
Quick win 3:
Re-skin Tenant UI via CSS
I had previously written "dirty hack" CSS overrides for both the Simple and Connect Assist platforms which had proven highly successful. It's obviously a temporary measure that doesn't scale because it introduces a degree of tech debt and fails to address any underlying UX issues...
BUT in my experience, it is highly effective from an "immediate impact" point of view... and is a handy interim step until the codebase can be updated to deliver more meaningful improvements.
Conduct heuristic analysis to establish and prioritise key interface issues
Identify issues addressable via CSS then reverse engineer UI styles using Chrome's Develop / Inspect mode and a plugin extension like "Stylus" to target specific elements
Validate overrides across browsers and breakpoints
Work with development team to deliver and iterate as necessary
The interface was significantly improved by hiding redundant elements, improving visual hierarchy with more effective use of spacing, font scale and weight, and prioritising key actions with colour coding.
Quick win 4:
Re-skin transactional emails
Product communications with users were very difficult to read with excessive letter spacing, insufficient padding and lack of clear CTAs and key content hierarchy. A secondary step was to update the actual content with more succinct phrasing.
Quick win 5:
Re-skin Property Manager UI via CSS
Unlike the tenant experience which was just a complicated multi-step form, Property Managers had a fairly in-depth workflow involving multiple properties, each with multiple applicants, all spread across multiple screens (and modals etc).
With no design system to speak of (or even screen flowmaps or assets), the UI was very clunky and in dire need of "a fresh coat of paint" as an interim step.
Because after all, you can't polish a turd... but you can roll it in glitter!
Quick win 6:
UI tweaks based on Heuristic Analysis
After conducting a best practice review, I used screen markups to document a series of relatively minor improvements that could be made with minimal coding effort, then worked iteratively with the remote development team to test and ship them.
In general, these enhancements consisted of changes beyond the scope of CSS edits incluiding re-phrasing of titles and labels, and re-sizing / conditional display of various elements.
Property Manager dashboard
Our next focus was to identify any urgent UX issues and feature gaps.
The following list was complied through analytics, competitor analysis and user testing & research including surveys, phone calls, and live and remote testing sessions with current and prospective users: (both tenants and Property Managers):
✅ Whitelabel support
for agencies to re-brand tenant application experience (refer screen grab samples below)
✅ CRM integration
to streamline importing hundreds of properties at once (via PropertyMe API)
✅ Group applications
including invitations rather than multiple separate linked applications
✅ More efficient application management
into "open" versus "closed" buckets to deal with large volumes of information
✅ Confidential notes
for team members to co-ordinate applications
✅ Tenant email management
including invitation reminders
Nice to have features
✅ Rental offers
for tenants to bid above (or below) the listed rent, with floor boundary
✅ Affordability index
to visually indicate ratio of solo/combined income vs. rent
✅ More effective onboarding
and support materials for new users
[ ] Progress tracking
to understand relative state of each application at a glance
[ ] Team assignment
by agency lead to track and manage staff workload
[ ] Pre-application checklist
to set clear expectations for tenant
All six critical (plus three secondary) features were designed and implemented as indicated by the ✅ checkmark symbols.
The remaining features were addressed in the "future state" experience (see below).
Of particular note however was our "white label support" features which was very well received by users, unsurprisingly given how much emphasis the property management industry places on branding and imagery.
This feature became our killer USP compared to the "vanilla" experiences offered by our key competitors - 1form and 2apply.
Once we had established a baseline "MSP" platform in terms of features, experience and performance, it was time to look to the future and create an idealised product unconstrained by legacy decisions in terms of technology, functionality and design.
Tenant experience (mobile)
The legacy application flow had dozens of usability issues that couldn't fully be addressed by the above UI tweaks and content updates. A ground-up redesign was undertaken to resolve the following problems raised by heuristic analysis and user testing sessions (both onsite and remote).
Key usability issues:
Agencies unable to surface their full inventory of properties
Solution: Lightweight property list with live search function allows tenants to find their preferred property quickly, whilst also viewing other possible options.
Tenants forced to re-enter details for each new application (ouch)
Solution: Create a persistent profile accessible via 2FA to avoid onerous account setup overhead. We also designed for persistent sessions across devices.
Multiple redundant steps increase complexity and cognitive load
Solution: Establish occupancy upfront so we don't unnecessarily ask for details of adults, children, pets and vehicles. It was critical however to enable adding/removal of occupants in case a mistake was made.
Confusing identity document requirements
Tenants consistently struggled to upload 100points of ID due to excessive scrolling content and lack of progress feedback. We introduced collapsible accordions and a persistent, colour-coded progress panel to address these problems.
Overwhelming selector patterns for references
I rationalised phrasing and introduced iconographic toggle groups and conditional content so it was much easier for tenants to provide the required information without scrolling through many screens worth of completely irrelevant (and confusing) UI.
Unnecessary and excessive information requested
Previously the first applicant in a group was asked to provide detailed information about their co-tenant's children, pets, and vehicles, which made no sense. The new flow requests details from the co-tenants who actually know!
Key business issues
From a strictly business perspective, there were several significant omissions to address:
Lack of engagement in services opt-in
Besides subscription fees, it was essential to optimise revenue from 3rd party service referrals, however conversion rates were very low due to poor layout and small hit areas.
No opportunity to provide user feedback
At no point after the application process were any users asked to provide feedback which could help improve the product. This was solved via a simple one-click "emoji scale" with contextual text prompt, plus followup email.
Lack of organic growth hacking
In order to expand the footprint of our agency userbase, we created a simple feature to "share" any tenant application with Property Managers responsible for listings outside the NXT Form system.
Interim PM workflow
This prototype was created to help the engineering team understand proposed new features within the constraints of the existing UI/X framework, especially around group status management.
Future state PM workflow
A ground-up re-imagining of the entire process for Piper to manage tenant applications, including shortlisting, groups, rejection handling, search control, likes & pre-approvals.
Previously the only type supported, the UI has been overhauled to pare back the navbar palette, establish clear visual content hierarchy, introduce status tab grouping, and make CTAs clearer with colour coding.
Preferred tenants can be shortlisted like a "favourite" -- user testing showed this term resonated more strongly due to industry familiarity. The "fallback" flag applies where the shortlist is exhausted due to withdrawn applications or other unforeseen issues.
Blankstates that were previously totally absent now feature big, simple, clear, friendly contextual inline support guidance.
Group progress tracking
Representing the status of income, "red flags", and references was tricky for multiple applicants in a group.
Multiple iterations of iconography resulted in a colour-coded "segment donut" system showing information requested, provided, ready to review, and approved or failed.
Opening a group application keeps the same UI structure for simplicity and consistency, and breaks down the data columns per tenant for more granular investigation and review.
The system automatically flags potential conflicts or issues based on account-based rules for eg. minimum income or landlord requirements.
Inline inspector pane
A second, deeper layer of information is revealed via an accordion with contextual actions not relevant at the group level.
This "progressive disclosure" approach is designed to only reveal content when necessary to the current context, to reduce overall cognitive load.
Group applications are enabled by a primary applicant inviting others to apply as co-tenants.
Editing invitation details, tracking progress, re-sending and cancelling functions are important for user confidence in this feature.
User testing showed that Property Managers wanted to keep all applications for a property together for auditing purposes, but filed into different "buckets" for ease of management, and clearly marked with the reason for being there.
Inline search function
During COVID-19, the number of applications per property rapidly grew and so Property Managers found it difficult to stay on top of the volume of data in the system.
A persistent live search feature was critical to usability, scoped to the current view.
Future state PM dashboard
The future state workflow was intended to begin with a single overview screen where Piper could track the progress of all properties at a glance, understand which are the most urgent tasks to complete, and manage staff workload if necessary.
Quick start guide
Account setup information provided to new users as a PDF in their welcome email, plus via the onboarding section of our support (wiki) website.
Investor pitch deck
Promotional document outlining the problems addressed by NXT Form, market validation and opportunity, revenue model, industry map, go to market strategy, competitor analysis, traction roadmap and more.
This information is no longer confidential as NXT Form has ceased trading as a business.