Case Study: Designing Onboarding for Virtual Cafes
Our team was assigned a real client with a real problem. The brief stated the client was looking for us to design an onboarding to their virtual cafes. Workfrom established itself as a sort of “yelp for remote workers” where users can rate, comment, and recommend remote working sites. In Covid-times Workfrom has adapted to hosting virtual cafe spaces where users can recreate the “third space” feeling virtually. While others are tackling the problem of connectivity and engagement in the virtual space, Workfrom recreates the connection and community of working alongside other humans. Workfrom’s virtual cafes are simple, and delightful. No voice communication, no screen sharing, just a small video window with music, ambient noise, and a nice background.
Workfrom is thrilled about the customization options for users who want to host their own cafe (including custom background image, colors galore, and more ad nauseam). We began our research with some competitive analysis and our team borrowed from onboarding/training/feature walkthroughs from web darlings like Discord and Duolingo.
Our user research began by learning more about the platform and where it fits in the space of virtual meetings. Our competitive analysis yielded interesting results. Workfrom exists in a specific slice of the remote work pie. There are countless collaboration platforms focusing on effective remote work. Workfrom is not primarily focused on collaboration among team members, but rather, creating a shared co-working environment to recreate the “coffee shop” experience. While others are trying to overcome the hurdle of connectivity and engagement, Workfrom allows for the community and connectedness of working alongside others in a shared environment.
Our team interviewed four current users of Workfrom. The users reported enjoying the idea of a “heads down” virtual workspace where hosts can easily send out their link to their network. The participants all came from different professional backgrounds but had similar feelings about Workfrom’s virtual cafes. The users were all remote workers who enjoyed the ambiance, the feeling of community, and the inherent productivity from working near other humans. We affinity mapped our user responses and found several trends among the user behaviors. We mainly sought to understand WHY users come to Workfrom over its competitors. These are some direct quotes from our users. In our user testing, we found that Users overwhelmingly reported missing the feeling of emotional connectedness more than the aesthetic appeal of a virtual or physical location.
As we began to craft our grayscale prototype, we chose to pursue the “less is more” approach by featuring four of the site’s most important aspects in the onboarding process. We borrowed from Headspace and Duolingo’s avatar led onboarding for an effective but also delightful way to enjoy the learning process. With this insight, we created Muggly, a splendid little mug hired to instruct Workfrom hosts on how to customize their cafes.
As we started designing the onboarding experience, we were uncertain with our direction as users had previously conveyed to us that they had little to no interest in personalizing their cafes but it was a feature our client was excited to showcase to their new users.
The onboarding process also included a series of questions regarding users’ privacy preferences and their cafe’s purpose. By asking these questions, it allowed cafegoers the opportunity to join public cafes that were hosting users of similar interests and purposes.
To address the user’s indifference to customizing while adhering to the client’s desire to showcase the personalization aspects of their site, the prototype also included background presets that could be quickly selected.
With the completion of the mid-fi prototype, we conducted usability tests with users interested in using the Workfrom platform for themselves and for their teams. Our tests made it abundantly clear that although they were given a simple onboarding process, there was still little interest in the personalization of their site. They simply wanted to get into a room.
They found Mugly to be annoying as he was reminiscent of Clippy, Microsoft Word’s early paperclip character that we all remember so fondly, and were opposed to the mug chatting with them as if he were their friend. “I hate Mugly” was among the most powerful statements we received about the mug. It was also made clear that there was no need for entering the purpose of their cafe and that some icons were a cause of confusion. All things deterring the user from just getting into the cafe for which they had signed up.
This led us to another pivot point for our team as we went into our high fidelity prototype. Our team decided the best onboarding would be no onboarding. We ditched the universally panned Mugly and swapped the feature tutorial for an easily skippable, quick walkthrough of the most basic customization options for the cafes.
Users who had little interest in playing with the minutiae of the cafes will immediately be dropped into a basic cafe with a generic coffee shop background, preselected music, and ambient noise. Users who want a more guided explanation can utilize the redesigned settings page which also serves as a convenient location for future customization options as they are added to the platform. Our team also improved the clarity and the copy of the design to improve areas the user found confusing. For example, in the above icon, the H (host tools) was changed to a settings cog after users reported confusion with the icons. Additionally, we created a de-facto style guide as Workfrom does not currently have brand style guidelines established. We built off the typography, color, and copy from the Workfrom website and developed a more robust and thorough style guide and brand voice. However, Mugly showed us that a playful, fun brand voice has a fine line across which becomes unprofessional.
The value proposed by Workfrom is immediately realized upon entering even the uncustomized cafe. Less is certainly more in this case as we learned to let nothing stand in the way of the user and the experience. Users from varying disciplines and experiences all found value in Workfrom’s Beta state for their own reasons. Isolated students looking for a quiet place to study, company team leads, and startup founders looking to employ Workfrom at an enterprise scale all could receive value from their virtual cafe even in its current state. Our message to the client was to embrace this variety. Even with no onboarding, Workfrom demonstrates its value immediately upon entering the cafe. What the user uses it for, is up to them. While the client sees the platform as a playground of creativity through customization the user sees it as a practical and emotional experience of connectivity. From top to bottom, Workfrom’s value comes in connectedness, emotion, and community.