Team Spaces at Lucid Software
Bringing a new product to launch and beyond
My role
I was part of the team that helped bring Team Spaces to its beta launch.
- Before launch, I worked with product and design directors to create designs for the future vision of Team Spaces.
- I designed key flows for its launch in May 2023.
- After launch I got to design two new highly requested features for the Team Spaces’ toolkit.
- Team Spaces saw about 15K WAU after beta launch
↳ February 2023- September 2023
↳ 1 Product Manager, 3 Software Engineers, 1 QA Specialist
↳ Interaction design, prototyping, usability testing, user interviews, design strategy, visioning
An easier way to work
Team Spaces is Lucid Software’s solution for teams to coordinate and monitor work. My team focused on designing and developing features in the Team Spaces toolkit that would make team coordination effortless. We noticed that our users were organically adapting our current products to suit their team needs in really interesting ways; Team Spaces was an attempt to further facilitate this vital team coordination within our suite.
The challenge
What tools would make team coordination effortless?
My solution
Two interactive widgets to help teams organize their workflow
Takeaways
As the designer responsible for designing and delivering these complex features, I had a big task ahead of me. There are a few key lessons I took away from this experience:
Lean into crossfunctional communication
This project had a lot of constraints and stakeholders from design, product, and engineering. I presented concepts at various stages of development to my team and got wonderful feedback that informed future iterations. I also had a better understanding of what our engineers needed from me to develop these features.
Visualizing ideas is powerful
Initially, the features and interactions we were discussing were abstract ideas. I created a design proposal outlining the “ideal” experience for the calendar shape and presented it to my team. This proposal document translated abstract concepts into concrete designs, which provided an invaluable launchpad from which the team was able to discuss the details of implementing this project.
The focus in this case study will be on the process of designing the calendar shape
Setting the stage
Team spaces is a whiteboard-esque experience, with an infinite canvas and a set of tools to use.
Narrowing down options
With great freedom comes a plethora of options- from a static template to a fully fleshed out calendaring experience like Google Calendar. We’re not trying to reinvent the wheel. Apps like Google Calendar, Outlook, and iCal have solved all of the design problems.
Our goal was the find the sweet spot of flexibility for our users.
A big constraint: generator objects
The first constraint is the foundation of what our engineers would use to build the calendar: a "generator object." Our generators took the form of a matrix. They act as “smart” objects that can take in other objects and snap them together in neat grids.
There were engineering constraints on how generators behaved with other objects and what could be placed inside.
Building the model of behavior
Keeping in mind the engineering constraints, I created a few models on how this could work- the diagram above is the “ideal” model. Based on the categories above, I placed each toolkit item in a layer that best described how it would interact with the calendar shape.
1. Calendar events
Key question
Answer
Users expect to be able to drag and drop content around the board. It’s what the context (a canvas) and their previous experience (using our app) have indicated to them.
Dropzones
Solution: create ‘drop zones’ within each calendar cell. An object dropped into this area will be converted to a ‘calendar event’
Header area of the cell
Top half of the cell
Bottom half of the cell
Event information
To match user expectations and ensure that we’d be well prepared when we started looking integrations, I matched the information between common calendaring apps and included the important fields in ours.
2. Freeform content
The trickiest challenge was how to content with freeform content when resizing. Every exploration or question answered, led to more questions. For the MVP, we decided to limit the ability to resize until we got stronger signal from users that they would find this feature useful.
Adding delight
If our users are going to be looking at this every day, for a while, wouldn’t you want it to be a bit delightful? In my explorations I took inspiration from physical media like desk and wall calendars.
Next steps
Because this is such an interactive component, we wanted to create an MVP and then observe how users interact with in out in the wild
Some of the things we’d want to observe was:
resizing
- Switching views: do users want to do this with a single calendar, or would it be enough to just stick with one view, and if a user wants to see a different view, they would drag another calendar shape out?
- New use cases: it would also be interesting to see if users utilized these widgets in unexpected ways, maybe even use cases we hadn’t considered
