Resource Center
Redesigning an overloaded feature to deliver clear, actionable information
What is it?
The resource center enables users to add their own content into our AI system, providing answers that are specific to their organization's policies and procedures. It also gives users targeted information to respond correctly and efficiently to customer questions.
What's the problem?
The original card design became overloaded as the resource center grew and lacked a clear information hierarchy. User requested features like quick cross sectional searching and bulk editing options could not be implemented in its current state.
How do we fix it?
Change the existing resource center to a data friendly format that allows for better feature implementation, future additions, and clear information.
Helping product growth
Part of what I do is help the team identify areas of concern. By understanding how the resource center was growing, I was able to spot the gaps and offer a solution that could allow growth. Helping identify problems like this sets our product up for quick scalability and faster implementation.
start
Research and Planning
Critical structuring
In its most basic form, the resource center is a directory of files. Users can create articles, upload documents, and scan websites or webpages. These are known as the resources, and each resource is located in a section (aka a folder). Sections can be created by users and shared via link. This structure had to remain the same in order for cross system functions to work.
In addition, the resource center was an established feature that our users frequently worked in, I needed to account for everything it currently offers and not remove any functionality. I found our cards had two types of information, details that appears directly on the card and details hidden in obscure hover effects. I worked with the project manager to make a list of critical information that our users would actively search for. This gave me the blueprint to my information architecture.
Product research
The next step was looking into products like Google Drive, Dropbox, iCloud, and OneDrive. I think it's more valuable to use common UX patterns and make the journey familiar to our users than it is to be unique. Using Figjam, I combined my external and internal research for quick reference when drafting designs and to share with the team during reviews.
Keeping this type of organized file structure has really helped me to quickly answer stakeholder questions. I am able to show them where I found the research and let them explore on their own if they wish. This has also helped when looking back at older designs to understand our thought process and decision making.
Brainstorming ideas
The design work is not the only thing I need to consider with a large feature. I also need to keep in mind that our development team has limited resources and works in a sprint cycle. To help with planning the resource center overhaul, I also included suggestions on how we could break the project down into each sprint allowing us adequate time to design and implement changes.
Creating these wireframes lets me communicate clearly the best solution with the team before sinking hours into design that needs to change drastically. I always want to get the foundational flow established so we are all in agreement on how a feature works before how it should look. Figjam is great for this! (Did you know you can play music in Figjam? We found out during this brainstorm how to jam together.)
I met with the project manager and design manager to work through these concept designs and answer some of the harder questions. How will users add sections? How will they add individual resources? How easy can they distinguish between the two? These types of questions and more were all things we addressed during the concept work and set us up for foundational success.
action
Design Process
Shifts in thinking
While working through the early drafts of the new resource center, development began using a new table library called AG Grid. This library opened up table customization for us that we had never had before. Users could rearrange columns, have better pagination, resize columns, hide columns, and more. This was a game changer. I felt that using this table structure could easily solve many issues the resource center currently faced.
Adding new capabilities
With the table framework set to AG Grid, I did some investigating into the library to ensure we could modify it to our needs. Reviewing their online documentation that provides information about design and how to implement features in code, I learned about their row grouping. This would solve the need for resources divided by section.
I felt utilizing this approach would be stronger for us than my previous ideas that all used a side bar folder style nav. It would keep all content in one table and still have the capabilities to rearrange column structure. It would also allow for better sorting and searching across sections and resources, a feature requested by the majority of users. I approached the project manager about this shift in design to get feedback. After showing the AG Grid demo, we both agreed this path would be stronger.
The AG Grid change also allowed us to set up additional granular column data that would be hidden by default but available for users who are more interested in some of the technical data fields like last metadata update. With the robust table library, adding these types of small enhancements are a breeze and take almost no effort to implement.
action
Revisions
Bulk editing
The change that took the most time and had the most back and forth between the team was bulk editing. Although we had bulk editing in other areas of our product, they were dated in behavior. One complaint was that users could only make one edit at a time. When needing to update multiple fields for selected resources, requiring the user to make an edit and then open the menu again to make another one was adding multiple steps for no reason.
My solution was to allow users to continue adding more editable fields in one bulk edit screen. The reason I chose to have users actively add another edit was to keep the screen more manageable and not overload the user with multiple options at once. This way if users were only updating one field, they wouldn't need to scroll to find it. It also allowed us to limit any changes that could possibly conflict with each other. If a user chooses to edit A, they cannot add field B due to system conflicts.
Keeping the steps I was asking the user to take in mind, I didn't want the user to be required to select resources, select bulk edit, select the drop-down option, and then also select what edit to make. To solve this I listed all bulk option changes out in the bulk edit drop-down list and the first change would always appear based on what the user selected. Users can also change any selected edit via drop-down, this small behavior solves for any user frustration over selecting the wrong edit.
To keep design consistent, I followed the UI patterns in our other bulk edit settings. After working through these ideas (single edit vs multi edit, single bulk edit button vs multiple options) with the team, we settled on this overall approach.
Why have a bulk edit drop-down?
Some bulk edits are not a field users can change but an action that can be triggered. An option to rescan webpages and websites was a highly requested feature but would not fit into the field editing side panel. That is why we went with an overall bulk edit drop-down, allowing room for any additional bulk actions that technically edit the resource but don't require field changes. This also follows established bulk edit design patterns throughout the system.
end
Final Approval
Approval and hand off
Commonly, projects change from initial concept ideas to the final outcome. This project was a prime example of how staying up to date with product changes as a whole can shift our approach in a positive way. I worked closely with the project manager to ensure all areas were being solved for and nothing was being left out. We were able to reach approval after a few video calls and walking through the process from different user perspectives, experiencing the journey from start to end.
post
Impact and Reflection
How did it go?
With the new AG Grid structure change, the resource center was implemented without issue and all functionality worked as intended. This was the first time we used AG Grid for a feature redesign and paved the way for other systems to follow, establishing consistent and familiar behavior. User feedback was positive, appreciating the new structure for better understanding and it was a huge win to implement so many requests previously asked for.
Would I change anything?
It would have been great to know the AG Grid change was coming before I began research and planning, a lot of time would have been saved. Even with the extra time sink, I am very happy we were able to use AG Grid. I would have liked more analytical data for how the old resource center was being used, but that data was not being captured unfortunately. These kinds of insights I think are vital for delivering the best solution and I have suggested we track more of this kind of information for future updates.