Collaborators: Megan Boyd (Designer), Joe Depalma (Creative Director), Laura Indingaro (Designer), Jon Savitt (Copywriter), Brian Tillman (Strategist)
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.
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.
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
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