SoWork - Redesigned User Interface

A user interface redesign focused on an improved user experience with updated branding.

Cover image for SoWork - Redesigned User Interface


SoWork is a virtual office tool for remote workers in distributed workplaces. You create a custom avatar and enter a 2d isometric office where you can engage with teammates and colleagues via character proximity. SoWork also offers a bevy of meeting and productivity tools such as meeting recordings, automated meeting summaries, custom emojis, and an in-world map maker.


SoWork's initial UI was something that our design and product team had wanted to redesign for quite some time. The product was rapidly expanding and adding new features and our existing UI was beginning to show its age in terms of usability, performance, aesthetic, and non-extensibility.

Outdated user interface
An old screenshot of SoWork's initial UI (then called Sophya)

User Research

Improving the user experience for the SoWork UI was further broken down into several buckets and user stories. After spending time conducting user research with our customers we developed several overarching needs for the redesign:

-Organizational hierarchy and groupings of features (Information Architecture (IA))
-Chat feature parity with applications customers were used to using
-Improved feature discoverability and general ease-of-use


We created an IA to keep like-minded features together. Whereas before we had one large bottom menu bar with features and toggles we now split out anything video/meeting related to be in close proximity to your video tile and everything else as a menu anchored to the bottom left.

We also introduced new branding and typography. When picking colors for the app we tested many but I decided to group analogous and cool softer colors to the palette. Blues and greens that would invoke more relaxing, natural, and professional tones.

Figma design
A redesigned main menu and bottom options bar

Screenshot of color palette from Figma
Branding and color examples from the Figma style guide

Improving Chat

Many of our existing users had migrated from well-known applications like Zoom, Slack, and Microsoft Teams and we heard and knew that we had to bring feature parity to our application. A project within itself, we designed and developed a "Slackified" version of our own chat. Upgrading it from single channel, mono-color, base functionality to be more in line with what our users were expecting with multi-channel, link sharing, teammate pingable, and direct messaging capabilities.

Figma design of chat component
New and improved chat functionality

Rounding Out the Rest

After chat we took our new branding and feature taxonomy and added the rest of our primary features like Mapmaker, Meetings, and an ellipsis menu for search and secondary features and everything else.

Designs for MapMaker
Mapmaker in SoWork lets you create and modify the office furniture and layout as you see fit
Designs of secondary features and search
An ellipsis menu for secondary features and a global search

Finishing Up

Thanks to our amazing developers and lots of user testing the redesign was released to a lot of good and constructive feedback and we continued to iterate and improve upon the initial design. Before launching we preemptively communicated with all our users with what was changing and what they could expect which is always good for anytime you are transitioning a user interface.

Project Process
Meet with Customers and Leadership
Meet with Customers and Leadership
Understand user and business needs. Formulate user stories.
Lofi Ideation, Brainstorming, Branding, and Design
Lofi Ideation, Brainstorming, Branding, and Design
Get the project going
User Testing
User Testing
Present possible solutions to internal team for testing and iterate designs
Figma Designs
Figma Designs
Hifi designs and prototyping
User Testing
User Testing
Demos with Customers. Iterate designs.
Develop and Release
Develop and Release
Collaborate with Engineering and Q&A
Did we solve for the user stories like we intended? What is the customer feedback? What do we need to iterate upon?