As part of the ongoing effort to modernize BlueB, Blueground’s internal portal, we initiated a project to migrate the platform to a new component library while enhancing and improving user flows. The first phase of this migration focused on the Task Table.The goal was to create a design solution that not only worked for the Task Table but could also be applied to other tables across the site, ensuring consistency and scalability. As the UI/UX Designer on this project, my role was to conduct user research, identify pain points, and design solutions that addressed user needs. The project team included two UI/UX designers, two back-end engineers, one front-end engineer, a product manager, and product leadership. The timeline for this phase was Q3 2024.
UX/UI Design
User Research
Process:
To better understand how users interacted with the Task Table and identify areas for improvement, we formed a focus group and conducted user interviews. These sessions provided valuable insights into how employees used the table, what challenges they faced, and what enhancements would make their workflows more efficient.
Insights:
The research revealed several key pain points:
1. Limited Filtration: Users found the existing filters insufficient for narrowing down results to their specific needs.
2. Column Organization: There was no consensus on column importance, as each user prioritized different columns based on their role.
3. Copying Items: Users frequently needed to copy items from the table but found the process cumbersome, as they often had to manually highlight text or couldn’t copy certain items at all.
Component Library as Building Blocks:
We began by rebuilding the existing Task Table using the new component library. This provided a solid foundation for implementing enhancements while maintaining consistency with the rest of the portal.
Table Enhancements:
To address user pain points, we introduced several key improvements:
• Text Copy on Hover: All text strings within the table can now be copied by hovering over them, simplifying the process of extracting information.
• Assignee Email Copy: Hovering over an assignee’s name copies their email address, streamlining communication.
• Column Customization: Users can now move columns to prioritize the information most relevant to them.
• Pinned Columns: Users have the ability to pin columns to the left or right, ensuring that critical information remains visible while scrolling horizontally.
• Secondary Menu: Each row now includes a secondary menu, allowing users to quickly navigate to the associated property, complete a task, or cancel a task.
Filter Enhancements:
We also improved the filtration system to make it more user-friendly:
• Additional Filters: More filters were added to help users narrow down results more effectively.
• Saved Filters: Users can now save frequently used filters, eliminating the need to reapply them each time they access the table. This feature saves time and reduces repetitive actions.
To gather feedback, we used Figma’s commenting feature, which allowed designers, developers, and stakeholders to provide input asynchronously. This approach was particularly effective given the team’s distributed nature and varying time zones. We also held weekly syncs to address any hurdles or issues that arose during the design process.
The majority of iterations focused on the mobile view of the Task Table. We spent significant time refining how the table would display on smaller screens, determining which information was most important to show and how users could sort and interact with the data effectively.
The final design received overwhelmingly positive feedback from users. The enhanced Task Table addressed key pain points, making it easier for employees to manage tasks, customize their views, and access critical information. The introduction of features like text copy on hover, saved filters, and column pinning significantly improved usability and efficiency.
This project was an excellent opportunity to introduce the new component library and see it in action. It allowed us to identify which components needed further enhancement and which ones were missing entirely. The process reinforced the importance of user-centered design and iterative testing, as the feedback we received was instrumental in shaping the final product. Overall, this project not only improved the Task Table but also set a strong foundation for future updates to the BlueB portal. It was a rewarding experience to see how small, thoughtful changes could have such a significant impact on user satisfaction and productivity.
I’m a UI/UX designer with a passion for creating user-centered experiences and a knack for solving problems. When I’m not designing, you’ll find me illustrating, reading, or chasing my corgi, Buttercup, around the beach. Let’s make something awesome together!
