NXT Form

Automated tenant application processing for busy Property Managers.

NXT Form dashboard screenshot

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.

NXT Form dashboard screens across multiple devices
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.

NXT Form team profile pictures - Ian, Sam, Warren, Anna, Tom and Ben

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:

  1. Deliver quick wins by targeting "low hanging fruit" where it was possible to release rapid improvements to the existing UI with minimal dev effort.

  2. Research and document the problem space including business context, user personas and journey & process mapping

  3. Ensure product/market fit by confirming then closing any critical UX issues and feature gaps

  4. Create an ideal, "ground-up" future state experience unconstrained by legacy UI/UX and technology, establishing the foundation of our longer term roadmap.

NXT Form
Team icon

Team

Product designer
Onshore lead developer (CTO)
Offshore development team
Onshore SME

Design tools icon

Tools

Workshops
Whiteboarding (Lucid)
Pencil on paper
Figma
User surveys & testing
Hubspot
Mailtrap

Delivery truck icon

Deliverables

Branding
Personas & user journeys
Process and flow maps
CSS ovberrides
Hi-fi prototype
Style guide
Marketing and support materials

Calendar icon

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:

Investigation (magnifying glass) icon

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.

Tick (check mark) icon

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.

Edit (pencil) icon

Document

The collated information for each persona was then formally documented and user journeys mapped out.

Checklist icon

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.

NXT Form

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.

Persona document including demographics, skills, behaviours, pain points, beliefs, influences and context
Persona document including demographics, skills, behaviours, pain points, beliefs, influences and context

Journey / process maps

Image alt tag

Piper the Property Manager

Beyond platform onboarding (to be explored separately), Piper's journey looks like this:

  1. Notification of new application

  2. High-level triage of viable / non-viable options

  3. Review references as they arrive

  4. Identity and background checks

  5. Obtain owner approval

  6. Notify all applicants and manage lease signing /payment

Image alt tag

Troy the tenant

Troy's NXT Form journey begins after he has first identified and inspected the property:

  1. Submit application including documentation

  2. Pre-arrange utility connection (optional)

  3. Notify co-applicants

  4. Track updates

  5. Sign lease and make payment

  6. -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...

Simplified platform workflow map for NXT Form
Simplified user onboarding flowmap for NXT Form
NXT Form

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.

Screenshot of kanban board tasks list
Quick wins

I began by identifying some relatively easy ways to improve market perception and surface-level "usability" of the product:

  1. Brand refresh
    with scope limited to logo, palette and typography

  2. Overhaul public landing page
    with new brand, layout and copy

  3. Re-skin Tenant UI
    via CSS overrides

  4. Re-skin transactional emails
    via CSS overrides

  5. Re-skin Property Manager UI
    via CSS overrides

  6. UI tweaks based on Heuristic Analysis
    to improve key interaction points

NXT Form

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.

NXT Form

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:

  1. Conduct heuristic analysis to establish and prioritise key interface issues

  2. 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

  3. Validate overrides across browsers and breakpoints

  4. 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.

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.

NXT Form

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!

Live demonstration video showing CSS overrides in action

Desktop

Mobile

NXT Form

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:

NXT Form
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.

NXT Form

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:

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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:

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

Blankstate example

Blankstates that were previously totally absent now feature big, simple, clear, friendly contextual inline support guidance.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Image alt tag

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
NXT Form

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.

NXT Form

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.

NXT Form

Culture and Values

I created this short piece for internal discussion as we attempted to establish our principles for working as a team.