Sococo (2017)

Sococo (2017)

Collaborators: Megan Boyd (Designer), Joe Depalma (Creative Director), Laura Indingaro (Designer), Jon Savitt (Copywriter), Brian Tillman (Strategist)

Project Overview

Sococo is the online workplace where distributed teams come to work together each day, side-by-side. No matter where team members might be. Down the hall, across campus, or halfway around the world – working in your organization’s online office is even more productive than being on the same floor or in the same room. As a studio, we used Sococo internally to fully understand how it worked and leveraged that knowledge as research to begin the project.

My Contributions

While working at Punch, I collaborated with the design and content team to develop a new brand and experience for Sococo. I created personas and did research against competitors to better understand the landscape of collaborative tools. Myself and another designer recreated the UI and maps for this new experience. We collaborated with the developers who were working on revamping the UI via design system to create a refresh for the product.

Our Outcomes

Set new brand direction using persons and competitive analysis

Redesigned the UI & UX flows to better accommodate customer goals

Re-engineered map grid to create dynamic design system for brands

Created feature backlog from customer journeys

User Journeys & Personas

From the beginning of this project, we did our best to lead with data and research. We leaned into articles and papers that were hinting at a more remote world back in 2016/2017. Through our findings, we developed customer journeys & personas to help guide our process.

Click to cycle through

What we were working from


UI Design

The visuals of Sococo came out of guidance with Google's Material Design System. Working closely with the front-end developers we were building out a system that would allow the user to seamlessly navigate through the virtual office experience. We build out the system atomically and eventually starting working through redesigning the office maps, that were laid out on a pixel grid. The alignment of the maps with the avatars was a modular, coordinate system, think battleship! It was precisely designed and developed in collaboration with the developers.


Login landing page


This is Sococo's default view. You have your map to navigate around the virtual office and the left navigation bar to quickly interact with your co-workers.


Each customer has their own "desk" space where they can enable integrations and other widgets that are just for them. Co-workers can leave notes and messages to asynchronously communicate.


Video Conference experience


To ensure our designs were aligning to the dev use cases, we made sure the icons could scale appropriately across the platform. We started with basic elements and built upon those to create more complex components.


In the settings menu, this shows the variety of options a customer can choose from to customize their virtual office experience.

Back to home page