Dashboard Redesign
Reporting is the task our customers spend the most time doing, and yet finding the right information was a cumbersome and error-prone experience. With 100+ available reports, and growing, customers needed a way to effortlessly find the information they need.
🖥 Web App
My Role
Research, User Experience, User Interface, Handoff
Team
UX Designer (Me)
Background
Problem
AppFolio provides its user with a collection of reports - each one containing curated information about a specific topic. New ones were added over the years, and by 2019, the reporting dashboard contained over 100. Gradually, then suddenly, accessing data became one of the most frustrating experiences in the product.
Goals
Primary Goal
Improve the ease of use of the reporting dashboard.
Process
Stakeholder Interviews + Secondary Analysis
To understand various perspectives on the problem, I interviewed a handful of internal employees:
User Experience, Director
Staff User Experience Researcher
UX Research Lead
User Experience Designer
User Experience Lead
Product Management, Director
Senior Product Manager
Strategic Customer Success Manager
Field Solution Engineer
I then combed through existing research which included customer health checks, product suggestion board requests, NPS scores, competitive analyses, and more.
Customer Interviews
I created a research plan and performed a mixture of cold calls and scheduled calls. In total, I spoke to 9 customers and learned about pains, workarounds, and opportunities.
“When I go to the page, I only want to see the reports I need. Not anything else.”
“I always forget what certain reports do and I have to go into the help file.”
Key Findings
Users only want to see what they use. Everything else is distracting
Users rely on bookmarks, spreadsheets with links, and other workarounds to find reports
Reports with similar names cause confusion and create clutter
Inability to clean up and organize custom reports results in build up of stale custom reports
Heuristic Review
I scoured through the reporting dashboard and made sure I fully understood each and every interaction. I then used this information with the learnings from my previous research, to perform a heuristic review. I performed this against Nielsens’s Usability Heuristics and surfaced strengths, weaknesses, and opportunities.
Survey
I created a survey about perceived ease-of-use of the reporting dashboard and then paired with in-house researchers to finalize it. I submitted it to customers in our monthly research panel and received 98 valid responses.
Key Findings
Design Studio
I gathered a group of engineers, researchers, designers, product managers, and QA engineers and presented a problem statement in addition to a summary of my research. We performed multiple rounds of solo ideation with presentation in between. At the end, we aligned on what the strongest elements were.
Sketching and Wireframing
I created sketches to merge ideas from design studio.
I created wireframes to track ideas and use design system components.
I created low fidelity prototypes to test ideas with stakeholders and users. At the end of prototyping, I had 4 main interactions I wanted to validate.
Report sections could be rearranged, collapsed, or hidden
Unused reports could be hidden
Frequently used reports could be added to a favorite reports section
Users can surface more information about the report from the dashboard
Internal Demo
To inexpensively test my ideas, I took my prototype to a Sr. Manager of Customer Care because she deeply understood the customer needs. She was able to validate that the ability to favorite reports and show/hide reports would be a game changer. Additionally, surfacing information within the reporting dashboard would save users so many clicks.
On the other hand, it wouldn’t be helpful to tag reports by user because in some companies, a single user would create all the custom reports.
Usability Testing - Round 1
To understand how useful and usable our ideas were, I set up a round of usability tests. In total, I performed 5 usability tests of 6 tasks and measured pass rates, ease-of-use, and specific follow-up questions. For this round, the main user tasks were:
Opening a report
Hiding a report
Finding a known report
Finding an unknown report
Viewing more information about a report
Results
👍🏼
“This is exactly what I was talking about. It would make this page very organized, easy to go to. Quick quick quick. Exactly what I need.”
“I love having a reports search bar. It’s nice to not have to find it.”
Consensus that the new experience was better than current experience
Average Ease of Use score was 6.53 out of 7.00
👎🏼
Finding hidden reports was challenging due to vague wording and confusion with collapsed/uncollapsed cards
The effects of hiding, favoriting, and restoring reports was not immediately clear
The design doesn’t solve problems with customizing reports
Usability Testing -Round 2
I performed more solo-ideation to come up with better solutions. At this time, I also paired closely with our visual designers to make sure that my design aligned with existing components in our design system.
I then scheduled and facilitated 5 more usability tests. This round consisted of 4 tasks that focused more on custom reports.
Results
👍🏼
“The button was right there and it says custom, common sense says to hit it.”
“I can’t think of a way to make it any easier unless you could right click on it. It’s very intuitive".”
The ability to rearrange the report category was viewed as helpful and time-saving
Renaming and deleting Custom Reports was viewed as easy and intuitive
👎🏼
“It’s actually an extra step from a current system. It used to take 2 steps, now it takes 3 … but you are less likely to delete something accidentally which I like.”
“This is way too many steps. Honestly, I don’t find that useful at all at all. In my organization, I create all the reports. All these reports will have my name.:
0 users used the searching/sorting interaction for Custom Reports
Handoff
Following the testing, I made a few more changes and landed on a final design. I neatly packaged the research, design artifacts, and future recommendations into a shared Google drive and began writing the story I wanted to tell the org about my journey. I presented this to all of Product Development & Engineering and ended by calling for a team to implement my work. This took time, but, a few months later, I found a team interested in the project and I transferred my knowledge.
The reporting dashboard was redesigned.
Results
Featured Improvements
Favorite Reports
Bring your most-used reports to the top of the screen by favoriting them.
40,847 reports have been favorited in the last 90 days (Oct, 4 2021)
Report Descriptions
You no longer need to go to the help site to find out what a report is for. Each one now comes with a description of what it does and who it is for.
Descriptions were viewed 53,167 times in the last 90 days (Oct 4, 2021)
Searchable Fields
Search for the information you need and all the relevant reports will be shown.
The search bar was used 204,116 times in the last 90 days (Oct 4, 2021)
Featured Verbatims
“Well thought out and organized. This makes searching through reports so much quicker and easier. The fact that you can click the star and have it at the top of the page makes it even better. Thanks, this is great.”
“Congratulations, AppFolio, on your on-going (very visible) efforts to enhance and improve this property and association management solution. This reaffirms our decision to select AppFolio over other offerings for our association management needs.”
Conclusion
Lesson Learned
Change - even if it’s for the better - is a tough pill to swallow
When the redesign was released, users were able to rate their satisfaction on a scale from 1 to 5 (5 being very satisfied). I remember looking at the results for the first time and sinking in my chair as I saw as many 1s as there were 5s. I forced myself to read through the customer verbatims and I started to see a theme emerge across all scores:
1
”What was wrong with the old one - I knew exactly where I needed to go and now have to retrain myself.”
2
“It would have been nice to be warned in advance that the page was changing. I had to scroll through, and what I thought was going to be an accounting report, wasn't. I finally found what I needed though and made them my favorites so I don't have to look through them again.”
4
“It is always difficult to navigate at first when things are reorganized, but I am very impressed with the favorites option. This would come in handy in the letters as well, as we have hundreds of letters and I mainly use about 10 of them.”
Customers were more upset that things were changing than they were about the actual changes.
We followed up with some of the unhappy customers and heard direct evidence of this too. As we explained the changes and demoed the new features, most of them had a lightbulb moment and began seeing the redesign as an improvement.