Sandbox, a site for building community.

Sandbox connects employees from different teams within a company, who are unlikely to interact in a virtual setting. The goal is to foster a sense of community amongst employees and to re-imagine collaboration in a hybrid or virtual environment.

Sandbox hero image.
Role
UX/UI designer, UX researcher
Project Type
24-hour hackathon
Impact
Led and owned user research, concept development, persona development, sketching, wireframing, prototyping, and developer hand-off in a 24-hour hackathon to create a multi-page website that was awarded the title of Winning Team
Preview
discover
Working in a post-pandemic world
The COVID-19 pandemic brought about many changes in work culture. Following the pandemic, many companies have opted to continue to provide flexibility and balanced lifestyles for their employees through hybrid or virtual work models.

However, the virtual/hybrid model does not come without drawbacks. There are real benefits of shared physical space when it comes to work productivity on which companies are having to compromise.
What does employee collaboration look like in the digital world?
This was the question posed by the host Microsoft for my very first 24-hour hackathon.

More specifically, the participants of the hackathon were asked to design a digital solution that will...
Re-imagine collaboration
Foster a sense of community
Provide meaningful engagement
Encourage knowledge and idea sharing
Allow employees to see the impact of their contributions
Make work fun!
define
Narrowing down the problem
During this Hackathon, I had the pleasure of working collaboratively in a team. Our team consisted of 5 members: 2 Web Developers, 1 Data Scientist, and 2 UX Designers including myself.

As one of two UX Designers on the team, I led and owned UX research, concept development, and design execution. I also acted as the team’s leader, breaking down the project in smaller chunks, guiding the team through each phase, and keeping us on track to complete our deliverable in 24-hours.

With little time to spare, our team took to the World Wide Web to dig deeper into the problem space.

Two main themes emerged from our research:
Social bond is lacking.
Employees miss the social aspect of a non-virtual work environment. In one study, up to 39% employees reported lack of social engagement to be a source of frustration for remote work.
Teams are working in silo.
In a virtual setting, you almost exclusively interact with your own team day in and day out, with little interaction with folks outside of your immediate team.
“So disparate teams have little experience or knowledge about other teams except through scorecards or dashboards. Relationships don't form or get fostered. Innovation exists in a smaller setting with fewer interconnections.”
- Amie Devero, executive coach/strategy consultant to tech companies
With more narrowed focus, it was time to bring the research to life through a proto-persona.
Meet Julia.
Ever since the pandemic, Julia has been working from home full-time. While she enjoys the flexibility and convenience, she is having difficulty adjusting to the lack of social interaction with co-workers. She often feels disconnected from the company-wide team.
Sandbox proto-persona.
Creating a proto-persona was a key step in aligning our solution with the goals of our target users. Before ideating potential solutions, we revised the design challenge to reflect Julia's needs.
develop
How can we help Julia?
After discovering and defining the problem space, it was time to ideate.

As a group, we used the Crazy 8’s exercise from the Design Sprint method. It produced 8 distinct ideas per person in only 8 minutes – a perfect ideation approach for a 24-hour project!

During the process, we imagined Julia striking up a conversation with a colleague in the office about her weekend plans and bonding with them after finding out that they share the same hobby.
And we thought - why not make this happen virtually?
Once we had clarity on what we were designing, myself and the other UX Designer rolled up our sleeves and created a mid-fidelity grayscale wireframe. Throughout the process, we frequently checked in with the team to make sure that our design aligned with what the team envisioned for the prototype.
Sandbox greyscale wireframe.
We decided to name our solution “Sandbox”.

The name alludes to the idea that as children, all we needed to become friends with someone was proximity, much like being thrown into a sandbox at a playground.

We wanted our UI to match the playfulness and innocence that emerge from this name.
Sandbox colour palette and word mark iterations.
When choosing the brand colours, we first created a palette that included all of Microsoft’s classic brand colours, as well as various colours that mimic the colour of sand.

From there, we kept things simple by choosing one primary colour, one accent colour, and a typeface that matched the playfulness of the brand identity. Embracing simplicity was paramount in working towards a tight and rigid deadline.
Sandbox colour and typography.
deliver
From creating to supporting
Once the high-fidelity design was complete, we handed over the Figma file to the Web Development team. But our part was not over! The UX Design team was on standby to ensure that the Developers had everything they needed to build the site in the allotted time.

And good thing we did!

After receiving feedback that utilizing pills versus checkmarks on one of the pages will shave off significant building time, we decided to pivot and make major changes to one of the pages.
Sandbox revision.
takeaways
What did I learn?
  1. Teamwork makes the dream work.
    While some may say this phrase is a cliche, it could not have been truer for this experience. I learned so much from each and every one of my team members! At the end of the 24-hour period, I was astounded by how much can be accomplished in such a short time when a team is aligned on a singular goal and every member is supporting one another.
  2. Communication is the key to great teamwork.
    By keeping an open line of communication between members throughout the process, we identified a potential bottleneck early and made the appropriate pivot to save valuable time. Communication was critical in our team's ability to deliver the final product on time. I learned that in order to become a well-rounded designer, I cannot do it alone. I must get feedback early and often!