Behind the feature: Redesigning Teams

As product designers, every project we work on starts with a problem. It’s our job to validate the problem, explore concepts, test our designs, ship the best possible solution, and measure outcomes.

You can see an abstracted version of this process written by our very own Jordan Koschei:

But this time around was different; there wasn’t a well-defined problem. The engineering team was migrating our front-end to React, which meant that design had a great (and proactive) opportunity to work on improving our design system, the visual journey, and general page layouts. 

We had a steadily growing sense that our Teams UI didn’t work as well today as it did yesterday. There were obvious issues to address, but there were also minor aesthetic changes that would have a significant impact on the overall user experience.

Browsing Teams

So let’s start with the Teams landing page. Overall it was well-designed — you can see each team in your organization, represented by unique colors, iconography, and a quick description of what the team is responsible for.

However at scale, things start to get unwieldy — cards and colors blend together, the inability to find or create relevant teams, and there’s confusion around which teams you’re part of. 

We realized the jobs-to-be-done for most agents when visiting this page is to find and navigate to their respective teams.  So, in addition to introducing a new column grid that gives each card increased surface area, we also section off the teams you belong to above all other teams in your organization for easy access.

As a bonus, we restyled our team icons to be bolder and added a fresh coat of paint to our team colors for better contrast.

Creating Teams

The team creation workflow was one area we acknowledged needed to be overhauled. It took place in a modal that had multiple tabs, hiding important information from the user.

Additionally, we didn’t provide any continuity after creating your team; it simply redirected you to the teams list, appending one more card to the list.

Great! My team is created. Now what?

We explored different directions like a multi-step modal but ultimately a modal wasn’t the best for the team creation flow.

To make team setup feel cohesive, we transitioned from a modal to a full-page layout where each step is clearly visible. This reduces the possibility of agents overlooking important settings, and there’s plenty of space to add more options in the future.

We also wanted to provide a lightweight onboarding experience for team members after team creation so they were aware of next steps. So, we added a widget that displays a to-do list and progress bar of all configurations that can be added to your team like a KB resource, SLA or request type.

Team Details

Lastly, we adapted the team detail pages with refreshed design system components and incorporated a sidebar into the layout that displays static information about the team you’re viewing.

As with any product, times and expectations change. We set out to modernize the UI, while keeping a strong focus on simplicity, accessibility and usability. Aesthetics alone are important, but it doesn’t matter how good the interface looks if the product or feature is unusable. There’s a lot more coming soon to atSpoke, but for now, I hope you enjoy the updated face of Teams!

Are you an existing atSpoke user?