Quicken Loans
Iterating the admin workflow experience and redesigning dashboards
Introduction
At Quicken Loans, I was part of the Data Intelligence group which is responsible for enterprise-wide analytics and the use of data to drive business decisions. Within this, I was part of the BIG Team (Business Intelligence Gateway). My team’s product is an internal website that hosts hundreds of data-driven reports (dashboards) to help explore and analyze various parts of the company. The platform attracts over 10,000 views per day and is crucial to support, grow, and conduct statistical analyses to control business processes.
I wore many hats throughout the internship but focused on two main projects:
Iterating on the Admin workflow for dashboard creators to intuitively create and maintain entries and explore their usage trends.
Spreading awareness of dashboard design standards and collaborating with creators to redesign their reports.
These two projects helped me understand how different areas of the business fit together when working with valuable dashboards.
Part 1 – Admin Workflow
Background
From day one, I hit the ground running. After performing the required training, my team updated me on what our platform was, where it stands today, and where its headed in the future. Specifically, Steve and I, my mentor and the team’s only UX Designer, identified the usability heuristics it violated, information architecture issues, and visual design flaws of the current website. Unfortunately, I am unable to share this information.
In addition, he presented the wireframes for the redesigned site backed by user research and tests he had performed. Majority of the high-fidelity design was completed, and some was live too, but a crucial part still remained – the Admin workflow.
Current solution
“Admins” are individuals who can create an entry on the BIG website. This entry can be a dashboard, an analytics report, an embedded or external link. The current solution only allowed for publishing such entries. While I’m unable to share any screenshots of the user flow, below are the insights we gathered.
Gathering Insights
After exploring, analyzing, and performing user testing and research on this workflow, some of the key insights we found are:
Confusing user flow with excessive required details, leading to incorrect descriptions about the entry.
Five WYSIWYG editors all asking about the description of the entry, increasing ambiguity and choice overload
Generic flow for each type of entry, resulting in many meaningless and redundant choices
A troublesome experience to maintain entries after being published, which resulted in an abundance of dated unused entries.
Ineffective way for creators to analyze their entries’ issues.
A need for dashboard creators to explore the usage trends of their entries
Creators wished to see the view count of their reports, how much time users are spending on them, and whether data has been extracted from the entry.
Crafting the redesign
Once we understood the issues, it was time to iterate upon the current solution. Unfortunately, I am unable to share wireframes and many other pages of the site due to privacy and security concerns. The data and other design aspects in the page below have been fabricated for these reasons.
Landing page
In addition to the annotated image, our goal was to create a landing page for users where they can quickly overlook their entries. With the above landing page, creators can effectively judge the health of their entries, understand the latest issues, and oversee the engagement trends, ultimately providing a personal user experience for each entry creator.
Creating an entry
New analytics entry vs new dashboard entry
With decreased and more uniquely named description boxes and information organized more thoughtfully, these task-specific designs correct bullet point one. Specifically, the page is split into two columns. The left side of the page are items that are required to be filled in before the entry is published, and the right are optional items. Previously, these were meshed into one column long page.
Furthermore, each type of entry has its own distinctive user flow, avoiding meaningless choices. This helped not only create a personalized user experience but also decreased the page length largely.
High level design decisions
Multi select dropdown
One small yet important detail we initially overlooked was the multiselect dropdown. This dropdown is used to select different access roles for the entry and is important for the privacy and security for the company.
The first photo is an example of what the dropdown was initially (unfortunately, I can’t share the actual photo). The second is what is currently being implemented and the third photo is phase two of the redesign.
The selection tool in the first photo is an extremely long list that lacks search functionality and does not show the selected items at the top. This was an issue for many users as the selection list was extremely long and often lead to unnecessary scrolling. The dropdown in the second photo alleviates the user from these frustrations and ensures effectiveness. The third selection tool uses the “pill” selection format and utilizes horizontal space to reduce scroll length.
Information Architecture
Initially, we debated the idea of having all the options in the toggle. It seemed like a good idea as it meant that all the options were available to the user and it resulted in less clicks for them to reach their goal. However, after user research, we found out that embedded and external links were entries that were not used as often as report and analytical entries. Therefore, it made sense by placing them out of the users’ sight and reducing their cognitive load.
Impact & Next Steps
The BIG website is valuable asset to the company that gains over 10,000 views per day by Quicken Loans’ employees. It’s a platform that’s used by interns to business analysts to the leadership team including the CEO. With a feedback form on the redesigned solution and Steve reaching out to users, our aim is to continuously improve the UX of the product, mitigate any challenges that our users face, and add features that enhance the overall experience.
Part 2 – Dashboard Design
Problem at hand
With hundreds of dashboards on our website and new entries being created every day, problems regarding consistency, usability, and overall quality surfaced. Due to lack of awareness and adherence of design standards, dashboard creators explored their creative freedom and produced reports that had looked, worked, and felt different. Users had to learn and get used to the dashboard each time they visited a new one and were often overwhelmed by the excessive use of colors.
Standards and Best Practices
The Dashboard Design Community (DDC) were a group of individuals who formed design standards and best practices for creators to follow when making a new report. Unfortunately, these standards were slightly outdated and unfamiliar to people.
Using our and Google’s Material Design’s concepts for data visualization, I worked with a member of the DDC to refresh the information on the website. We focused on making sure the users:
Follow a font hierarchy to emphasize the information correctly
Use our bespoke color palette and header for consistency between reports
Choose the right data and visuals to tell stories
Format tables to improve readability and reduce clutter
Have a strict page width for different screen sizes
Minimize the use of borders, colored boxes, large buttons, and embracing whitespace to guide the user
Spreading Awareness
Once the standards and best practices were in place, Steve and I took the initiative to advocate to dashboard creators about the principles. We presented to over 70 dashboard creators discussing the What, Why, and How of dashboard design. Our main goal was to communicate the importance of having simple, consistent, and usable dashboards for a better user experience.
To keep the momentum from our presentation, we summarized our presentation into a blog for individuals to have something to refer to. The blog was sent to over 500 individuals within Quicken Loans as a goal to spread the importance of UX during the dashboard creation process.
Collaboration
One of the best ways to promote a topic is leading by example. Since creators are often influenced by the most popular dashboards in the company, we reached out to the owners of these reports and began to collaborate with them. We believed that helping authors of the most popular reports adhere to Dashboard Design standards will result in more authors with design skills and better adoption of the standards overall.
Business Value: Making our most used reporting compliant creates a uniform and trusted look and feel for our reporting, highlights the difference between trustworthy modern reporting and questionable legacy reporting, and creates a set of visual and interaction standards that increases usability.
Below is the redesign of the most used report at Quicken Loans which received over 400 views per day by various roles in the company. The data has been redacted for privacy concerns.
Below are additional reports that I worked on during my internship, each following the dashboard design standards and best practices. From first glance, we can appreciate the consistency and quality of the designs providing a sense of trust to the user as well as good usability and simplicity to deliver clarity.
Reflection & Takeaways
This internship was an amazing experience as I got to work on a multitude of things which improved me a designer. Some of my takeaways are:
1. Real-world constraints – In a practical setting, after designing your picture-perfect scenario, its best to be mindful of feedback and critique. Things like technical constraints, privacy issues, and budgets also play a surprisingly large role in designing.
2. Why, why, why – While spreading awareness of design principles and even throughout the process of making design decisions, it was important to make sure the reasoning behind our ideas were clear. Many times we received pushback as to why certain things were being implemented, but after careful explanation backed by user research, the decisions made clear sense.
3. UX everywhere – From creating webpages to designing dashboards, I was able to understand the important of UX design in a variety of areas. With the support of my mentor, I improved my data visualization skills and am confident in designing dashboards.
Team
BIG thanks to my talented team – ha! see what I did there – for guiding and supporting me throughout my internship and helping me grow. Here are some of my team members and I on my last day.
