IMPLAN Projects Page Redesign
Project Overview
IMPLAN, a leading provider of economic impact analysis software, was in need of a redesign for the Projects Page of their application. The current design lagged behind other visual improvements they had made to the IMPLAN app. In order to bring the Projects Page into alignment with the rest of the app, I was tasked with redesigning it.
Role
Product Design Intern
Timeline
07/2024 - 09/2024
Tools
Figma | Maze.co | FigJam
Research & Analysis
The Projects Page is a section of the IMPLAN application that displays a user’s projects. It is a single spot where users can manage and organize projects they have created within the app.
The current Projects Page was in need of both a visual refresh and a reevaluation of functionality. The new design needed to be done using the Material UI design system and had to feel consistent with the rest of the application.
Before diving into a redesign, I started with collecting information about the current Projects Page. I gathered numerous screenshots from the app, created test projects, and carefully documented how the page functioned. I worked closely with IMPLAN’s Senior Product Designer to discuss what stakeholders had been requesting for improved functionality.
The requests for upgrades to the Projects Page were:
Users wanted a way to move multiple projects into a folder at the same time. The current page allowed for bulk moving, however it was a murky process that needed improvement.
The addition of a search bar.
Along with a search bar, the ability to filter searches.
A way for users to easily open their projects in another tab or window. The current page doesn’t leverage right-click functionality.
An update of the visual design to be consistent with the rest of the application.
Exploration
With these guidelines in hand, I took to the internet to explore current design patterns that fulfilled our needs. I spent time collecting numerous screenshots for ideas and potential solutions. After I had gathered a healthy amount of inspiration, I organized it all within a page in Figma. Since we were working with a preestablished design system complete with built Figma componentry, I took advantage of that to begin mocking up some ideas immediately. This allowed me to quickly start creating and iterating on designs.
Feedback & Iteration
The Projects Page redesign was presented to internal stakeholders on a number of occasions throughout my design process. This consistent cycle of feedback was integral to my work. Everyone on the product and development teams had deep knowledge and familiarity with the Projects Page, so their ideas helped guide the redesign and exposed missing features and pain points. After each meeting, I went back to Figma to implement their thoughts and critiques. Eventually we narrowed the Project Page design down to a couple of options, then we widened our feedback net to include outside users.
Prototyping & User Testing
To prepare for real-world user testing, I worked with the Senior Product Designer and one of our Senior Product Managers to draw up testing goals and a script. We decided to focus our testing on determining if users preferred icon buttons or text buttons in the menu bar. We also wanted to see if, regardless of user preference, which design allowed for quicker task completion. Once we had all of the details in place, I moved on to creating prototypes for testing.
We performed our unmoderated user testing using Maze.io as the platform. Maze was a great tool for this as it allowed us to capture screen, video, and audio recordings of our testers. As results came in, we gathered and processed the information in both Maze and in a FigJam file.
“Yeah, these green buttons are way better.”
— User Testing Participant
The results of our user testing quickly became clear: Every tester preferred and completed their tasks more swiftly with the text buttons. With this information in hand, we pivoted away from the icon buttons and concentrated our efforts on the text button design.
The Redesign
Visual Design
The visual design of the Projects Page was dictated by IMPLAN’s brand and design system. A clear visual hierarchy wasn’t present on the original Projects Page, so I changed the column headers to a bold weight, and the project names to a standard weight. That alone vastly improved the look and feel of things. Originally, when a checkbox was clicked, the table row didn’t reflect that. I added a brand color highlight of a selected row to better inform users that they indeed selected a project. The gray header bar was removed to be consistent with the rest of the application. Finally, a light border was added to the perimeter of the table.
Functionality & Features
Finding Projects Quickly with Search and Filters
Prior to the redesign, there was no way for users to search their projects. Lack of search functionality was inconvenient for both customers and internal stakeholders. We decided a tried-and-tested way to resolve this issue was the addition of a search bar in the upper right corner of the page. Along with search, we added filtering options to assist users with a simple, familiar way to better locate a desired project/projects. While iterating on the filter functions, we ended up adding more columns to the projects table to provide a 1:1 experience.
Bulk Move Projects with Ease
It was important for users to be able to select and move multiple projects to a folder in a simple, intuitive way. The current way for users to bulk move projects consisted of selecting multiple projects, then accessing the move to folder selection from the inline additional options menu. We improved this process by giving users increased feedback and guidance. Now when a project is selected the entire row highlights, making it clear what was selected. We also surfaced the move to folder selection and moved it to a button within the top bar. And finally, we added more detail to the move to folder modal to better inform users of how many projects they’re moving and where they are moving them to.
Opening Projects with a Right-Click
The ability to open projects in a new tab or window with right-click was a highly-desired feature, particularly by the sales and customer education teams for demoing the application to customers.
Looking Forward
The Projects Page redesign brought about a much-needed upgrade to an important part of the IMPLAN application. The number one goal is to improve the customer’s experience, so we are excited to gather feedback once the new design has been implemented. Moreover, this redesign helped spawn other ideas concerning improving collaborative tools that, if pursued, will further improve the application.