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.
Context
In mid-2020, the founders of tech startup NXT Form realised they needed product design capability to take their concept to market.
Background
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.
Objectives
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.
Team
Product designer
Onshore lead developer (CTO)
Offshore development team
Onshore SME
Tools
Workshops
Whiteboarding (Lucid)
Pencil on paper
Figma
User surveys & testing
Hubspot
Mailtrap
Deliverables
Branding
Personas & user journeys
Process and flow maps
CSS ovberrides
Hi-fi prototype
Style guide
Marketing and support materials
Timeframe
Stage progressively over
3/6/12/24 months
Research & planning
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:
Investigate
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.
Validate
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.
Document
The collated information for each persona was then formally documented and user journeys mapped out.
Evaluate
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.
Personas
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)
Notify co-applicants
Track updates
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...
Task management
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.
Quick wins
I began by identifying some relatively easy ways to improve market perception and surface-level "usability" of the product:
Brand refresh
with scope limited to logo, palette and typographyOverhaul public landing page
with new brand, layout and copyRe-skin Tenant UI
via CSS overridesRe-skin transactional emails
via CSS overridesRe-skin Property Manager UI
via CSS overridesUI tweaks based on Heuristic Analysis
to improve key interaction points
Quick win 1:
Brand refresh
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.
Process:
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
Outcomes:
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.
-
-
CSS overrides simplified the UI by hiding elements and highlighting primary actions
-
The original application form felt "flat" and was difficult to scan
-
CSS overrides improved visual clarity of form elements and key actions plus de-emphasised the branding ribbon
-
Modals were clunky and mis-aligned with poor content hierarchy
-
Modal after CSS overrides
-
Previous validation messages and element highlighting flagging
-
CSS overrides aimed to improve clarity of content and action
-
A strange credit card interaction...
-
...could only be improved so much by CSS alone.
-
An overall lack of contrast made the whole experience fell dull and "vanilla"
-
A new palette introduced a bit of "punch" and a clearer progress bar
-
In general the form elements felt very complex
-
Removing redundant elements and aligning labels/inputs helps simplify the layout
-
The final step was a long list of hard to read questions
-
Scannability was improved with discrete panels and right-aligned radio buttons
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!
Desktop
Mobile
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
Assorted markup
Market fit
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):
Critical requirements
✅ 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
Outcomes
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.
Whitelabel samples:
Future state design
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.
Sample wires
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.
Can't zoom in far enough? Here's a high resolution version (10MB) of this flowmap
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.
Solo application
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.
Shortlist
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.
Blankstate example
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.
Group applications
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.
Invitation management
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.
Rejection management
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.
Design system samples
A selection of components & UI elements built built using the atomic methodology
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.
Culture and Values
I created this short piece for internal discussion as we attempted to establish our principles for working as a team.