The challenge
The Purplebricks online account needed modernising to take advantage of modern technology and align with new design language.
What I did
I led an agile squad to migrate core functionality to use the modern tech stack and update the design of these areas.
Outcomes
Migrated account functionality was quicker to iteratively update and the consistency of the experience was increased.
What was the challenge
The Purplebricks online account, MyPurplebricks, needed updating to unlock the ability to deliver a modern user experience, quick iterative improvements and reduce design and technical debt.
What I did
I led a lean cross functional agile squad tasked with migrating core functionality, in the user account, to new micro front-end applications using a modern technology stack (Nx and NextJS). Additionally, we would update the design to align with the design system to create a consistent, accessible user experience for customers.
Planning
I started by creating a roadmap of functionality we would needed to migrate. This was ordered based on:
Impact - what functionality is most used by customers where we can quickly deliver an improved experience
Complexity - what is the technical complexity of moving functionality. Are there dependencies on this elsewhere in the customer journey
Reusability - how do order the migration to maximise reusability of components and patterns to iteratively build on previous work to increase velocity
Scope
I created, agreed and shared a scope of work to ensure that we stayed focused and on track.
This stated that we would be migrating to new applications, updating design language and making reasonable improvements but without changing fundamental functionality.
We kept a log of known pain points that we couldn’t initially address to be picked up at a later stage as functionality was eventually handed over to other teams.
Product Management
Being a lean focused agile squad we didn’t have a Product Manager, so this meant I had to product manage the squad - including:
Organising and managing squad ceremonies including stand-ups, sprint planning and squad demos
Managing the roadmap and product backlog
Management of stakeholders affected by the functionality we were migrating
Communication of releases, creating and organising documentation for training
Example applications
The following are examples of migrated applications. Apps were monitored after release through various feedback loops. For example on page feedback surveys, error logging and user session recordings allowed us to quickly identify and fix issues after launch.
My Properties
Updating the My Properties page in the account. This included migrating all the statuses shown for a property prior to it going live on the market.
[Reduced the complex logic of the this page which since 97% of customers only had one property.]
[Worked in conjunction with the Senior Content Designer to revamp the content on this page]
Compliance questions
Updated post instruct compliance questions about ownership and additional owners. In discovery we found out that a percentage of customers were completing this incorrectly, as the questions weren’t clear, leading to additional delays further down the line. [Find some stats about this]
[This made subsequent changes much easier to make as the process were later updated]
Price change
Updated the price change functionality. This was an example of where we could improve the experience whilst retaining the functionality. We added warning messages when altering the price by 10% or more as this negatively affects the visibility of properties on portals like Rightmove and Zoopla.
Valuation report
Updated the Valuation Report that is sent to customers with details about their price and features. This was brought inline with the report seen in the mobile app which had recently been updated and tested by that team
Valuation Report Before and After
Messages
We created a new improved messaging app with the account. This was built in parallel with the development of a native mobile messaging app to create a consistent platform for communication between users and agents.
Fixed existing issues in the existing messages app
Aligned the design language with the core app and messaging app for consistent experience
Sensitivity around this app meant it was launched to a subset of traffic, initially 10%, and increased as we monitored and it and were confident there were no issues.
Messages before and after
Outcomes and Learnings
Migrated apps were handed over to the squads responsible for that section of the customer journey after launch.
Ultimately, not all functionality in the account was fully migrated by the team. The size and legacy of the account was enormous. The team were eventually integrated into other squads who continued the migration work in their areas based on their respective priorities and roadmaps.
The work the team did set foundations for much of the work that followed. Large parts of the design system library, components and patterns, were created by the team which were reusable by others. The migrated apps set a standard for the approach that others would follow.
