team
Myself (UX Lead)
Lilli Gold (UI Concept)
Elyse Moskalik (Project Manager)
Project stages
1. Onboarding & project setup
2. Architecture
3. Design Sprints:
- Homescreen
- Application flows
- Maintenance
- Rent & Charges
duration & Dates
12 weeks | Jul - Sept 2022
The Problem
Historically the process of applying for, moving to, and living in a new home has been a paperwork-heavy and arduous offline affair. With multiple entities involved and a confusing timeline, the opaque process frequently causing excited and hopeful applicants untold amounts of stress.
Legal & General’s Affordable Homes division aimed to tackle this legacy industry issue through the creation a new customer portal to augment the end-to-end residents’ experience.
Project Brief
Inheriting the project mid-way through, I had 12 weeks to digest an array of discovery insights and translate them into a frictionless and responsive customer-centric solution for two user groups, whilst ensuring synergy with a simultaneous back-end client workflow.
Skills & Tools
Workshop facilitationInformation ArchitectureStakeholder InterviewsWireframingPrototypingFigmaWho are L&G Affordable homes?
Legal & General Affordable Homes is a subsidiary of Legal & General Capital which, in backing over 80,000 homes over the next five to ten years, is committed to investing in housing for all ages, social groups and housing tenures.
Their customer base consists of Affordable 'Renters', and Shared Ownership 'Buyers'.
Architecture
Refined using past research and a fresh stakeholder workshop, I designed a shallow sitemap structure to ensure minimal page bloat,
placing focus on key functionality and intuitive achievement of primary user goals such as:
- Scheduling a maintenance visit to fix a fault
- Checking account balance
- Paying monthly rent & charges
Designs Sprints
I began by translating the legacy, mid-fidelity design work from Axure into Figma, the purpose being to:
- utilise the global canvas to give a more holistic view on which the clients could feedback
- dial back the fidelity to focus solely on nailing complex functionality
- install a design system mindset with consistent padding, spacing, typography & alignment, using a base 8 grid structure
- create a flexible and responsive component library that encouraged design and development efficiency across multiple breakpoints
With the product first and foremost a utility, my inspiration came from energy and financial account portals. These dashboards champion progressive disclosure, providing their users a snapshot of key information and useful functionality, with further detail accessible when needed. Chunking the 10+ sections into 3 design sprints, the key areas and decisions included:
1. The Homescreen Dashboard
What
Tying it all together, providing a snapshot of key information and simple wayfinding to relevant areas.
Why
With two distinct customer types, research showed varying levels of comfort with the intricacies of the housing process. As a result, to encourage repeat use of the platform the homescreen needed to offer helpful & bitesize information at each stage of the customer journey; from application-pending through to in-home resident.
Full, in-home resident homescreen dashboard
design FEATURES
- A two column structure for level 1 pages, and a single column for level 2. Higher priority functionality at level 1 is housed at double width on desktop with supportive information demoted to the right hand side, and intuitively stacked on smaller breakpoints.
- Progressive disclosure of detail using alert banners, accordions, and carousels help to reduce UI noise and encourage further exploration of deeper insight and functionality.
- Dynamic and versatile modules for use throughout the platform and adapt to the user's resident state, therefore increasing development efficiency. For example, the property overview evolves from building desire with imagery and pricing, to more utility with account overview and preferred payment method.
Pre-approval homescreen
2. Application Forms & Flow
What
A consistent & digital-first application process catering for both user groups
Why
Whether looking to rent or to buy a new house, the application process can be form-heavy and laborious. As the first step of our new online experience, refining a supportive and seamless onboarding journey that took into account the nuances of Renters' & Buyers' applications, was vital in cementing trust and preventing drop-offs.
Application check list
design FEATURES
- Using the Goal Gradient Effect, required application activities for both Renters and Buyers are chunked and visually stacked to help ensure that effort remains high, creating a feeling of moving gradually towards their prospective home shown in the property overview card.
- The single column form pages place focus on task completion, utilising only well-known components and established patterns for intuitive use on desktop & mobile devices.
- Supporting a variety of possible user scenarios and abilities, submission errors are mitigated through the use of autosave, clear sequential navigation, and summary pages that furnish quick editing of individual form steps.
Affordable Rent customer application - Step 2
Shared Ownership customer application flow - Step 3
3. Maintenance
What
Allowing in-home residents to request repairs and schedule maintenance visits
Why
Along with payment, the ability to arrange and confirm required maintenance with third party management providers represented a primary user need, as well as a key legal requirement from a business perspective.
Maintenance home
design features
Conscious that safety and convenience around in-home and communal maintenance constitute a significant customer experience component, the maintenance section design facilitates:
- Users to clearly see when there was a required action with primary CTA alerts and 'My Repairs' case statuses to confirm if and when urgent in-home visits could occur.
- An overview of upcoming appointments this week and next via calendar cards with links to easily re-scheduling.
- Case detail pages that replay the fault details input by the user, give an automated diagnosis of the issue, and provide flexible appointment scheduling with three preferred time slots and notes for the contractor.
Case detail with scheduling
4. Rent & Charges
What
Helping customers stay upto date with their account and providing flexible payment options
Why
With Affordable Renters' & Shared Owners' financial circumstances so diverse, the platform needed to encourage customers to pay their monthly charges on time, offer support to those that couldn't, and in turn lessen the amount of L&G time being spent on chasing.
Rent & charges main page
design features
- Account balance & upcoming charges are front stage on the R&C main page. The dual panels using the status mechanism to increase visual hierarchy when customers are in arrears and, reinforced by the alert banner, link users to either pay or view the monthly statement in question.
- The statement detail page aligns 'amount', 'date' & 'status' information across modules to present easily digestible content, itemises the total charges, and gives clear payment options to cater for easy account management.
- A payment plan mechanism where the user can select their outstanding balance to be divided over a chosen number of months in editable instalments, which is then reflected on main R&C dashboard as well as any affected statements.
Statement detail
Setting up a payment plan
Outcomes & Learnings
Inheriting a project presents challenges in that not being the one to steer the initial discovery can leave some vital questions unanswered. However, my design output was effective thanks to a series of probing client workshops and an extremely agile sprint plan that resulted in a delighted stakeholder team.
Once the core content & functionality of each sprint was nailed, the last 10% was achieved by zooming out to see how the module designs worked together in a global sense. This final consideration of alignment and positioning greatly improved how intuitively information could be digested as well as general wayfinding.
With the development process ongoing, results are TBC.
