Introducing coworkr: An App For Coworking Remotely

Cal Groudas
9 min readDec 26, 2020

--

TLDR: The pandemic has been lonely…How can people stay productive while working from home?

PROBLEM STATEMENT: Young professionals working from home due to the pandemic need to stay connected with people outside of their inner social circle because random and casual conversations can provide a sense of accountability and therefore stimulate productivity and motivation to work.

TOOLS: Figma, Figma Mirror, Illustrator, Zoom, Procreate

Illustrations of your new coworkers that I made for the app

An Anecdote

My first experience with coworking was in 2018 when I was struggling to write a thesis paper for my Masters program. I reached out to a friend who shared that she, too, was struggling to work on some final papers for her undergrad classes and we decided to be coworkers (we met up in various places like the computer lab at her school or at my apartment to complete our work simultaneously). Between work sessions we discussed what we were working on, offered each other advice, and ate yummy snacks. While this experience turned us into best friends to this day (hi Cassidy!) while allowing us to complete our impossible workloads, I believe that the principles behind coworking can offer a lot to people who are forced to work from home due to the pandemic.

Background

Job loss/unemployment due to pandemic:

  • Unemployment rate has been a steady 4% for 2+ years → March 2020 15%→ September 2020 8%
  • 8% is 12.6 million people (https://www.bls.gov/news.release/pdf/empsit.pdf)

Benefits of coworking:

  • Networking with people in your field
  • Reduce loneliness
  • Help people with difficulty focusing (and those with learning disabilities)
  • Focus on wellness and keep a balanced home / work life
  • Adds structure to days / weeks

Competitors

To begin the “empathize” stage of the design thinking process, I conducted some market research to identify potential competitors and then to parse out most common or unique features.

MyWorkHive (slack community, blog, and zoom meetings)

  • Coordinate Zoom meetings via slack, many slack channels for support with remote working
  • Free
  • Averages 3–10 people in Zoom room at any time

Sococo (desktop app)

  • Paid model (subscription)
  • Avatars, knocking, update status, integration with Zoom
  • Offices and classrooms available

Caveday (website for scheduling and Zoom meetings)

  • Uses Zoom, science-informed landing page, moderator
  • Paid model (drop-ins or subscription)

Tandem, Around, Remotion (desktop apps)

  • Can update status, work with teams, video chat, screen sharing, integration with slack, google docs, etc.

Quilt (app)

  • Conversation-based (audio-only), can add photo and profile information
  • Notifications when conversation started

Psychology Today articles:

  • Neighbors and acquaintances are important for avoiding loneliness and fostering happiness
  • Gillian M. Sandstrom and Elizabeth W. Dunn of the University of British Columbia in Vancouver found that people with a greater number of casual acquaintances tended to be happier, and that the more interactions they had with those acquaintances, the happier they were
  • In another study, people who were instructed to increase the number of interactions they had with acquaintances over the course of a week reported a decrease in feelings of loneliness

Interviews

Next, I recruited people for user interviews who had experience with either working from home since the pandemic started and/or people who had experience with coworking (either virtually or in-person).

Takeaways:

  1. Current remote social solutions don’t fill the need for casual relationships
  2. Virtual coworking has been helpful for some people but they have experienced issues with scheduling
  3. People with small living spaces struggle with maintaining boundaries between work and home life
  4. People have stayed close with their strong relationships, but what’s lacking are the casual interactions
  5. People working from home have expressed a difficulty with maintaining accountability and specifically miss the buzz of people working around them
Empathy map

Defining the User

I made an empathy map to imagine what the user(s) may be experiencing. These are based on the user interviews I conducted.

Next I developed a persona to highlight goals and frustrations the user might have. I purposefully avoided using a photo and common stereotypes / generalizations so the persona could be as inclusive as possible.

Persona

A key part of this “define” stage was to identify the features I needed to build. The feature roadmap below shows what would be needed for the minimum viable product (MVP), what would be nice to have, features that would be fun or surprising, and then what could come later.

The main problem that I identified in my research was that people who are forced to work from home miss the social aspect of going to an office. They miss the accountability of working alongside other people working and they also miss casual conversations, whether with friends or acquaintances.

The main problem that I identified in my research was that people who are forced to work from home miss the social aspect of going to an office. They miss the accountability of working alongside other people working and they also miss casual conversations, whether with friends or acquaintances.

Defining the Product

My initial solution to this problem was an app where you could coordinate schedules and virtually cowork with people via video chat. Based on the user interviews that I conducted, however, there seemed to be a much bigger need for connection. For this reason, I decided to pivot the focus of the app from a time-tracking and scheduling app to a gamified app for users to cowork, chat, play games, and interact with an office environment.

Necessary to have for MVP:

  • Coworking: Drop-in sessions where you can cowork with people quietly
  • Goal-meter: You can set a daily goal of focused hours and the app tracks your progress
  • Decorate your office: You can decorate a virtual office space with art, plants, furniture, etc.
  • Map: You can navigate to any room
  • Tutorial: Tool tips walk you through functions your first time through the app

Other:

  • Buddy list: Save specific people to a list where you can see their status, chat with them, etc.
  • Game room: You can play games between work sessions
  • Sharing data: Share your goal status and productivity data with someone for another level of accountability

Task 1: Joining a coworking session

Coworking space → View available sessions → Join a session → Follow moderator’s instructions for work sessions and for breaks → Gain a unit of time toward your daily goal!

Task 2: Decorate your office

Office → Scroll through options of elements to add → Select and move desired objects → Repeat until satisfied!

UI + Functionality Inspiration

I was inspired by games like Among Us, Minecraft, and The Sims to make an illustrated cartoon-like app. Certain design patterns like life bars, floorplans, player IDs, small challenges framed as games, and customization functions were influential as well.

(Left) Among Us; (Right) The Sims

Designs

A note about ideal functionality

The prototype has limited functionality, but the ideal would be that you can totally customize your office space. You can have as many plants as you want, you can put art anywhere, and you can mix and match as much as you want. You can also delete objects once placed. The imagined micro-interaction for this would be for a trash can icon to appear as you drag an object. You can either move the object or drag it into the trash, similar to how you delete elements on an Instagram story.

Sketches and final designs of key screens
Early designs of the office view exploring UI options
Later designs of the office view including redesigned interactions and functions
UI kit
Illustrated backgrounds for locations within the app
Interactions with objects
Tool tips when you visit a screen for the first time
Ordering in the café: espresso animation

Logo

I waited until designing the app’s UI to decide what to do about the logo. The font for the wordmark is “Cherry Bomb”, which is used in the app and the letters are lowercase just like they are across all designs. The shape of the logo comes from the outline of the office space which can be seen in the map. The overall shape in the large and medium sizes of logo is divided by small gaps which give the hint of three-dimensionality, like walls of a floor plan drawn from a bird’s eye view. The door to the space is open, which could be read to mean that that coworkr app is open and welcoming to all!

Usability Testing

I conducted in-person usability testing with 3 people who were in my “covid-bubble”. Testing the app in-person was preferred over remote testing because I could see what kinds of touches people were using, how many touches they tried before giving up or figuring something out, and I could see all of this in real-time.

My goals of usability testing were the following:

  • Observe the user’s exploration of the app
  • Note what worked well or seemed fun for the user, and where the users got stuck or frustrated

I made sure that each participant visited all locations on the map and engaged with all interactive elements. As they tapped through, I asked them to think aloud and share what they were experiencing in any given moment. After all observations were complete, I made a list of issues and I prioritized them by how many of the participants experienced the issue and whether or not the issue was critical to the core purpose of the app. I then reiterated on the high and medium priority issues. The low priority issues could either come later or could become future feature additions.

Major Issues

The following gifs are from before and after testing the prototype with users. The gifs on the left demonstrate how the interactions were designed to be used, however none of the users could figure out how to quickly use the map without instructions, how to interact with the objects in the office once selected, and how to move onto the next stage of decoration! The map is the core method of navigation, so this was a high priority for revisions, and the “Decorate Your Office” feature is supposed to be fun and not frustrating.

Map: before and after

Before, in order to go to a location on the map you must select the location then x out of the map. Now, the map closes after you select the location and the X is only used for exiting the map.

Moving objects: before and after

In the first design, the drag function was not very intuitive, people ignored the buttons and tried dragging the objects themselves. You can now drag the object by grabbing it directly and you don’t need to approve any placement before going to the next step.

Designer scroll: before and after

Initially, the element choices screen was not very wide and people wanted it to scroll out further so they could see all their options at once. My solution was to allow the whole element to scroll out.

Interacting with objects: before and after

Before you had to approve an object’s placement before going to the next design tab. Now you can place an item and then keep placing items without the need to approve them.

Try it out:

Final prototype

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Cal Groudas
Cal Groudas

Written by Cal Groudas

Designer: Product / Interaction / UX / UI

No responses yet

Write a response