.png)
Report Settings
Quickbase
Overview
Quickbase offers many different report types, such as kanban reports, table reports, charts, and more. The settings for these reports had an outdated design and provided a choppy experience. Starting with the Kanban report settings, we are working our way through the different report types to update the settings experience as a settings panel rather than a settings page. This project was passed to me from another designer when I joined the company, and I have been the lead designer for this initiative for multiple years now. I have conducted three usability testing sets and iterated on designs each time before finding a pattern that works well for all report types.
​
​
Problem
The existing report settings page had outdated styling and patterns. The flow of changing settings and switching to see the results on the report was time consuming and taxing on the user.
​
Goal
Create a report settings panel that easily allows the user to see the changes they are making to the report easily and easily navigate between the settings sections. Make a design pattern that can be used for all report types, starting with kanban.
​
Role
Lead designer, interaction designer, user researcher -
Iterated on prototypes based on user interviews and usability testing findings. Summarized usability testing results and proposed next steps based on: user wants and needs, what is technically possible, design trends, time constraints, existing components and patterns, and/or new component proposals. Presented proposals to stakeholders and created implementation stories.
​
Methods
Wireframing, prototyping, user interviews, user testing
Tools
Axure, Balsamiq, Sketches, Figma, Sketch, Fable
Things to Consider
While my main focus was iterating on the kanban report settings, I needed to keep in mind that whatever pattern I decided on would work for all report types. It needed to be customizable by other teams to include different settings sections and inputs based on the report type. Additionally, in an ideal state, users would make settings changes, and the report would change simultaneously, but for now, we needed to continue to have a "Preview" button to show changes to the report due to technical limitations and avoidance of user error. We also chose to not add any features for now and just re-design what exists. It was also important that the panel was fully accessible.
​
​
Process
Existing Design
​
First Iteration
These were the designs ideas that were passed over to me when I was assigned to the project, and I assisted in the usability testing for them.
​
-
Dropdown for Navigation: Overall, discoverability was poor. New users did not even notice the dropdown, and returning users had trouble finding what they were looking for.
​
-
Tabs for Navigation: Users liked the look and feel of tabs, but found the icons to be too small and cramped, especially when the panel was narrower.
​
Second Iteration
Vertical Icons as Tabs: I worked with the team's visual designer and product manager and came up with a design of vertical icons to act as tabs. This would allow for the icons to be larger, to give them more padding, provide error states on each, not be affected by panel width re-sizing, and gives more room for the addition of icons in the future. Users overall did like this design, but some still found it taxing that they had to click through each icon to get though all the settings as opposed to the existing settings page's continuity with scrolling. During a usability testing session through Fable, a participant who navigates using keyboard found it taxing to navigate to the vertical icons in general.
​
Third Iteration - Latest Design
Vertical Icons as Anchors: I decided to keep the vertical icon design, but have them act as anchors for a continuous scrolling panel area. People find this design to be seamless, and it works well for both new users, who like to scroll through to not miss any sections, and for experienced users, who can click an icon to jump to the section they want to work in. Screen-reader users and keyboard navigators can now get through all the settings more easily since it is no longer necessary to use the icons to navigate.
​
Results, Reflection and Next Steps
Now that the latest design has been implemented for kanban reports, I am working on the settings panel for table reports, and I am mentoring an associate interaction designer who is working on charts settings.
​
Working on this project has been interesting because there are a large variety of users' wants and needs. I have learned to cater to a lot of types of users by providing options, like the anchors vs. scrolling, and a re-sizable panel. While some people like a narrow panel to be able to see the report as they work, others like a wide panel for more room to work on the settings. At the same time, I have learned that I cannot please everyone, often due to time restraints, technical limitations, and following design best practices. Balance is key!
