A user interface redesign focused on an improved user experience with updated branding.
Context
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.
Before
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.
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
After
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.
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.
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.
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.
