Ignite homepage design
Project overview
Ignite is a web and mobile app that reinvents the way real estate agents manage their realestate.com.au property listings. It allows agents to oversee and prioritise their most important tasks on the go and in the office.
Role
As the product designer in the Ignite product team, I was responsible for the research and design of the homepage as well as being the custodian for the Ignite design system. I was also the go-to person for designers in federating teams.
Brief
I was tasked with designing reusable, flexible components that could surface a variety of content that all teams federating into Ignite could make use of. These flexible components were to be used to create a personalised home feed for sales agents. The Ignite product team were focused on server-driven UI, hence the need for flexible components.
Project summary
Ignite is a web and mobile app that allows users to manage their workload. There are several users of Ignite such as sales agents, team managers, and Principals. However, the aim of this project was to create a personalised Ignite home feed for sales agents only.
This project had been passed around multiple designers before I started at REA and when I joined I was tasked with completing the project. I was told that the project was 90% finished when I inherited it but after deep-diving into the work, I initially thought that certain things in the research and design had fallen through the cracks. This misalignment prompted conversations to reassess the progress of the project and change the direction of the design.
As well as being responsible for the sales agent homepage, I was also responsible for the Ignite design system and for shaping the Ignite product as a whole; I helped federating teams design and build in a way that was consistent with the platform. Attending 30%, 60%, 90% design reviews and managing an Ignite-specific design system were some ways that I ensured platform consistency.
Starting somewhere in the middle
I picked up this project from a designer who was managing it alongside multiple other projects, due to the original designer leaving the company. I was told that the project was 90% completed.
After assessing the research against the progress of the designs, it was hard to see how the designs had gotten to 90%. The previous research consisted of an online card sorting exercise where users had to rank the importance of certain information such as enquiries, reviews, etc. This research was then used to determine the homepage design. However, due to the nature of the research, follow-up questions were not asked to understand the why behind the ranked sections as well as what the users wanted to see in these sections.
I felt we needed to deeper understand the design decisions that had been made by speaking to real users and complementing the quantitative research with some qualitative.
Assessing previous research
After running my thoughts by Ignite’s Product Owner, we decided to move forward with some user testing in an attempt to gain additional qualitative insight. The team were lucky enough to have the luxury of time and money making this research doable.
I put together a prototype of the designs I inherited and tested them on 8 users.
The goals of the reserch were to:
1 - Understand if the placement and hierarchy of components on the homepage reflected the importance agents place on them.
2 - Understand if the components provided enough and relevant information for agents whilst also ensuring not to overwhelm them with too much information.
3 – Understand what users might like to see in future versions of Ignite.
The prototype was simple and focused only on the homepage.
What we found
We unearthed a lot through the user testing but the most significant findings were:
1 - Confusion around what certain sections were communicating.
2 - Confusion around the meanings behind certain UI elements, specifically badges.
3 - A strong desire for information to be grouped into tasks users needed to complete.
4 - A strong desire to be reminded to do certain high-priority tasks.
For us to fulfill our users’ desires, we needed to make some significant design changes.
Users were confused by the badges in the enquiries to action section which hindered the meaning of the whole section.
Users questioned what 'Recently viewed' meant.
‘Why are we changing the design this much, it’s at 90%?’
Our research suggested that we needed to reassess some of the previous design decisions and make several significant changes. However, since the designs were in a Figma file titled “90%”, the team had already made a start on the build. Understandably, this led to frustration, as it meant there would have to be re-work.
To help the team understand the significance of the research findings, I ran a series of workshops in which we discussed the research and brainstormed different ways to implement improvements. Collectively, we were able to come to an agreement on a direction that improved the designs, whilst causing minimal disruption to the delivery timeline.
The iterations
One of the most significant changes we made was to the information hierarchy; both on an overall screen level and on a component-specific level too. We shifted actionable tasks to the top of the page and updated specific components to communicate the information in a simple and clear way; that also followed product-specific patterns.
Another notable change was updating the icons to ensure they were used in a consistent manner across the product.
The ‘Enquiries to action’ section became ‘Latest hot leads’ as from testing we found that this was the language sales agents used to describe important leads.
The design of the card was also updated to follow a similar pattern found in the ‘Enquiries’ tab. With more focus on the content of the lead and less focus on the property.
Testing showed users were unsure on what the badges were communicating so this was rethought too.
Designing for flexible content
As well as focusing on the release of the homepage, I was also tasked with focusing on how these components would scale. Looking at the product holistically, I explored potential ways that the components could be used in the future with the aim of making them as reusable and flexible as possible.
Flexible components were extremely important in order to accommodate as much as possible for the many teams federating into Ignite. We wanted to make it as easy as possible for teams to surface their content on the homepage via this general set of components that we established as a product team.
This vision work was done hand in hand with the home feed work and fed into the final designs of these base components.
I worked with the team to come up with potential sections we coud use these generic components for. These are some variations of the ‘horizontal image card’.
We called this card the ‘text card’. It can be used in various scenarios for sales agents and letting agents.
This card was named the ‘vertial image card’ and allowed for many different use cases for a variety of Ignite users.
Outcome
On my final day at REA, we successfully released a personalised home feed of high value, timely and actionable tasks; Ignite’s first server-driven UI with consistency across app and web. We launched with the highest priority sections with the other two sections following in the subsequent release.
As well as releasing the homepage I worked with the team to establish new ways of working that focused on design and development collaborating more. Some of the new ways of working included design QA, ticket kick offs and ideation workshops; all of which, I feel, elevated the team's output.
Reflection
Upon reflection, I’m glad I had some sticky conversations to change the direction of the homepage as it allowed the whole team to realign on what we felt was important for the product to succeed in market.
If I was to take on a similar project again I would voice my concerns around the design to the team earlier instead of waiting until I knew what changes needed to be made post-testing. I feel if I had spoken with the team earlier they may have been less shocked when the research confirmed the design would benefit from being iterated on.
Overall, I’m thrilled with the outcome of this project and the level of consistency I was able to bring to the homepage and Ignite as a product.