Improving social connection during a time of remote working.

Final prototype designs

Overview

Type: Client project as part of the General Assembly UXDI course.

Deliverables: Research insight & findings, sketches, evidence of testing, high fidelity prototype and presentation to stakeholders.

Tools used: Miro, Figma, Trello

Team: Me, Alice Marks, Robyn Bellamy and Charlie Bullman

Sprint duration: 3 weeks

My role: Comparative and competitive research, interviews, ideation, sketching, designing and iterating new pages, usability testing, developing high fidelity prototype and final design.

The Client

BetterSpace is a wellbeing benefit platform for corporate environments. They curate a range of resources for employees to use as a unique and holistic approach to wellbeing.

BetterSpace encourage users to rate different areas of their wellbeing as part of their onboarding process, then saves these ‘scores’ on their homepage, to be updated at any point. Where the user rates one area of wellbeing low eg. sleep, they can shop the discover page for resources that may help improve their sleep.

Current BetterSpace example

Currently used by employees at corporate giants like LinkLaters and Accenture, BetterSpace are promoting a new way of managing and enhancing wellbeing in the workplace.

Their problem

BetterSpace highlighted the main problem they were experiencing in their brief. They stated:

“Our product preaches Social Connections as one of the most important ways to promote wellbeing, but we don’t do enough. Ideally, our service should make it easy for people to connect.”

With this in mind they tasked us with the following:

● Create a new feature/s for managers to facilitate social connection for their teams and staff.

● Explore how Managers can view and measure the different metrics to manage and assess the wellbeing of their teams and staff.

● Suggest UX improvements across the journey of the Website.

Discover —Investigating the problem

Initial research surrounding social connection between colleagues, highlighted some shocking statistics about pre-COVID workplace and social isolation, making it clear the problem we were facing was systemic and widespread even before COVID forced the majority of people to work remotely.

Connection statistics

Competitor analysis

By analysing what already existed in the wellbeing marketplace, we could highlight where certain user needs may not be being met and see areas of opportunity.

We looked at the offering of 5 major wellbeing products
Feature analysis of wellbeing apps

There were clear gaps in the market to explore:

  • Attending events/activities between colleagues
  • Connect teams
  • Gamification
  • Introducing calendars/reminders for social events
  • Create a personal employee profile

Screener survey

We created a screener survey to gauge the current habits around wellbeing in the workplace and received 114 responses. The screener highlighted some key user habits and also allowed us to choose from a wide range of users to contact for a more in depth interview. The key findings were:

Interviews

To gain a deeper understanding of the problem, we conducted detailed interviews with people from various working backgrounds. We spoke to:

  • 8 employees from the charity, construction, finance and tech worlds.
  • 4 new new adopters of the BetterSpace app from consultancy company Accenture.
  • 3 employees and the CEO of BetterSpace to better understand the scope of the challenge.

We were able to distill out interview feedback into some key insights to inform our next steps.

Interview insights

Define — Who are we helping and what are we helping them to do?

Once we had discovered all these vital insights, we could form a persona to embody our main insights and help us arrive at a solution. We created Lily.

Our persona

Once we were able to talk about Lily as the average user, we could define her main problem, which was:

Lily’s problem

Usability testing

We tested the current app with 8 usability testers, and highlighted the issues in the user journey with regards social connection.

Current BetterSpace app

The original BetterSpace design is essentially a market place with a discovery page curated to your wellbeing needs. The user journey below highlights the limitations of this, as when you find a helpful resource, you have to access it outside of the app and there is no option to share it with friends or colleagues on the app.

Users also encountered confusion about the BetterSpace wellbeing pillars on the current homepage, as well as confusion about how to filter and search for resources as demonstrated below.

User Journey

This research enabled us to think of more ways we could help Lily and explore areas to improve on the app. We considered the following thoughts:

Questions we considered whilst entering the design phase

Develop — What did we try?

Design studio

We facilitated a design studio with BetterSpace and asked them to consider the questions above and sketch out ideas to improve the app. We gave them a one minute time limit to sketch each screen to encourage fresh thought and creativity.

Design studio sketches

Some features that were introduced at this stage as a result of the design studio included:

  • A newsfeed between colleagues to see who is attending events/recommending resources
  • Opportunity to share resources and events between colleagues
  • Opportunity to opt in or out to socialise on the app
  • Opportunity to send gifts to colleagues

We also carried out a smaller design studio between the four of us in the group to streamline our thoughts further and considered further features of:

  • Personal profile page to allow saving and sharing of resources, events, connections.
  • Team pages and events pages to create social connection.

A challenge! Sketches

We designed multiple sketches trying to define potential solutions for Lily’s problem and testing out feature insights from the design studios. This was particularly challenging as we had so many ideas but still wanted this new feature to be simple and functional to address the main need for social connection.

After much deliberation, we decided the best way to learn what to include was to test these ideas out on users. We created a sketch flow below which demonstrates Lily’s journey on BetterSpace.

We tested with eight users at each step from sketch to basic wireframe to high fidelity design.We edited our design at each iteration in response to user feedback.

Develop — What worked and what didn’t?

Usability testing helped us streamline the design process and highlight areas of confusion or issues with the user flow.

I’ve highlighted two key features we edited based on our usability testing, and how we iterated on our design to solve these problems.

Your Wellbeing page

In order for people to connect on the app, we thought it necessary to have a personal profile of some kind so people could recommend events or wellbeing resources to each other in teams. This resulted in the ‘Your Wellbeing’ page, which features a place for individual users to access events and connections within their work team, as well as their favourites and orders of their wellbeing resources.

This page changed a lot through each iteration as we tried to find a place for the BetterSpace wellbeing pillars which testing showed people were overwhelmed by, even when given the option to hide them.

Iterations of designs through testing
Wireframe iteration for My Wellbeing page

My Connections page

A key feature within the ‘Your Wellbeing’ pages is the connections page, which allows Lily to interact with her team on a newsfeed where you can see activity within the team.

She has the option to click through to an external profile on a colleagues’ page and is welcomed to send colleagues a gesture of goodwill such as coffee, affirmations or invitations.

Design iterations at each stage of testing
Wireframe iteration for My Connections page

We wanted to promote the use of small gestures between colleagues as our interview insights has shown people were sorely lacking these smaller interactions in the work place.

It was important to focus on using clear and simple UX writing here, to explain the meaning of each of the gestures, as users weren’t clear on their meaning when we tested earlier iterations. The new feature was appreciated by one usability tester from BetterSpace client at Accenture saying:

“These interactions are a nice touch — sending a coffee is like sending a hug, an informal way of connecting when we’re limited virtually.”

Deliver — Our proposed solution

The final prototype

Prototype

Our final design included:

  • Homepage redesign: Refined copy, new interaction with key wellbeing pillars, carousel of resources for easier browsing, view of events and opportunity to learn more about each pillar.
  • Discovery page: New filter and sort by options
  • Share button on resources: opportunity to share resources with team, individual colleague or outside the app on Whatsapp etc.
  • My Wellbeing page: featuring my events, connections, favourites, orders and wellbeing pillars.
  • Events page: featuring team and personal events, fresh remote event ideas to tackle zoom fatigue.
  • Connections page: featuring teams, clubs and friends.
  • Team page: which features newsfeed for employee interaction, a team calendar, team organigram and external colleague profile with the opportunity to send coffee or other gestures.

Reactions from the stakeholder

10 employees from BetterSpace came to the final presentation, during which they very encouragingly wrote the following messages on the Zoom chat.

We spoke with BetterSpace in depth after the presentation and found our research insights and ideas were very positively received.

We gave an indication of what next steps we would take as it still felt there was so much to explore to create more social connection.

  • Further usability testing of the prototype
  • Question whether the user would want to see notifications? As notifications is known to cause a feeling of anxiety
  • Gamification — explore how and where this could be used
  • Layout and testing of the desktop version
  • Manager metrics- we didn’t have enough access to managers to make big changes in this area but would investigate this further if we could get access to more current users.

What I Learned Throughout This Process

This was such a great learning experience! Working with a responsive client and such a capable and talented group was amazing. My top three takeaways were:

  1. Usability testing is crucial. We had so many moments where users unlocked new ways of thinking or helped us develop the language or structure of certain pages through their comments when testing.
  2. I enjoy leading and project planning. We shared tasks in the group equally but in the moments where I led the group I really enjoyed trying to encourage team mates and directing the path of research and design.
  3. Human problems are always engaging. Working with such widespread and pressing problem of social isolation was incredibly engaging as a designer as I was really driven to empathise with our interviewees and testers in a bid to solve this emotive and impactful issue.

Thank you for reading!

If you would like to check out my other UX design projects or get in touch, please visit my portfolio or LinkedIn.

--

--

--

UX Designer and writer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Hello and welcome to our XD Studio Blog!

Sustainability Victoria User Testing & Research Report

50 Renderings of Watch

Top Best 3D Animation & Modelling Softwares: Windows & Mac

The Art of Delightful Product Design

Competitive Analysis of UI Design Tools

From Happy to Hippy.

How to Become a UX Designer — A Step by Step Guide!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cat Allen

Cat Allen

UX Designer and writer.

More from Medium

Adaptable Remote User Experience Research

Freshious |Enjoy fresh groceries

Good Design on College Campus

When I really learned how to write discussion guides