Microsoft Teams × ND

Can the design of a videoconferencing app help neurodivergent participants a work feel more included and confident?
User research
User testing
Wireframing
Journey mapping
UI system design
Persona mapping

For many autistic individuals, workplace meetings can be a major source of anxiety and stress. The surge in digital remote work induced by the pandemic, though, has presented new opportunities for more inclusive workplace design.

Mariana Meija and I developed a concept for Microsoft Teams that facilitates more inclusive workplace communication ahead of meetings, alongside an accessible visual language that blends the old & comfortable with Microsoft’s modern Fluent style.

Team
Context

INDS-3011 Service Design, Autumn 2022

Tools used

Figma, Figjam

"Even if I get by, and figure this app out, I still feel very uncomfortable."

Problem Space: Autism in the Workplace

Over 70% of Canadian adults with autism are unemployed as of 2023.

In the era of hybrid and remote work, workplace accessibility remains a challenge, especially for individuals with autism.

Their need for structure, difficulty with change, and challenges in reading social cues make learning new apps and navigating social interactions daunting.

Our Solution: A Comforting Workspace

Our concept allows meeting organisers breaks meetings up into chapters, and includes a new design system that mimics real-life, physical objects.

Both these changes aim to help our target user feel more comfortable and confident in this environment.
Before the meeting

Organisers can define a meeting itinerary, splitting it into smaller "chapters". This helps set expectations on which topics will be covered and for how long, even before the meeting starts.

during the meeting

The itinerary will be shown to all participants, reassuring participants on meeting content, and giving them a good feel of how long to dwell on each topic.

Accessible UI design system

A new UI design system that mimics the physical textures and feel of real-world objects helps our target user feel this as a comfortable space.

Why this solution?

It's non-stigmatising

Our concept does not single out or call attention to autistic participants and work colleagues.

It's congruent with Teams

We built this concept to work as an extension to Microsoft Teams' existing offerings and workflows, without radically altering the product itself.

It's inclusive

Having detailed meeting itineraries and a clearer UI helps everyone, not just our target user, improving the general user experience of a top-performing workplace app.

Process 1: Defining the Barriers to Inclusivity

What are the biggest challenges an autistic user would encounter when taking an onboarding meeting on Microsoft Teams?
Unfamiliar user interface

Autistic users can feel extra stress when they are expected to just “pick up” a new app.

No meeting information

Autistic users can feel extra stress when they are expected to just “pick up” a new app.

Unfamiliar user interface

Not knowing a rough estimate for what topics will be discussed, and for how long, can make autistic users too anxious to participate.        

We chose to examine Microsoft Teams: we were already familiar with the app, and Microsoft had already demonstrated an interest in this field through some initial white paper research from Mariana.

While Mariana researched our topic, I drafted a persona and journey map to contextualise our user's journey, which gave us the main insights about our user and a basis for some "how might we" questions.

How might we...

...facilitate organisers to communicate more with participants ahead of meetings?

...create a visual interface style that is both warm and friendly, yet professional?

Process 2: Improving the Meeting Environment

We needed to find a way to make Teams a more inviting space, and make sure users got information about meetings in advance, to alleviate anxiety around digital meetings.
To...
Key solution hypotheses

App displays meeting timetable and chapters, to show how long each meeting topic will be covered.

Meeting organisers are incentivised to include meeting details and itinerary, ahead of upcoming meetings.

App UI reworked to make common functions easily accessible and visually obvious. Visual styling also reworked to create a sense of comfort and ease.

"I find it difficult to know how long I'm expected to talk about a certain topic in these meetings."

"I wish I knew what we'll be discussing in our meetings ahead of time."

"I find it really hard to learn these professional work apps. It feels very daunting to figure them out on the fly."

From...
Current user pain points

Meeting Itinerary: Splitting Meetings into Chapters

Based on our user journey map, I noticed that our user's experience was dependent on the actions of another user—the meeting organiser. I shifted my focus to what made it hard for them to describe meetings in detail ahead of time.

We found that Teams lacks features that would help organisers describe meeting details effectively. The only thing they get is a open-ended "type details here" text box.

Hence, we focused on a new framework to allow for incorporating meeting itineraries when sending meeting invites on Teams.

We mocked up these features as simple wireframes on top of the existing Teams interface to do some informal wireframe testing and gather feedback, which we incorporated into our final mockups.

Test Feedback: "New Meeting" pane (organisers)

  • They felt the length of each chapter was unclear, as they were all the same size.
  • The individual details under each chapter felt a little unnecessary; the chapter titles were enough.
  • Having the timeline oriented vertically to match Teams' calendar view would clarify its meaning.

Test Feedback: Meeting itinerary (participants)

Our quick feedback sessions involved a couple of questions, briefing them on our concept, before presenting a static mockup and asking them about how they felt they should interact with it. A total of 5 individuals were interviewed.

Design System: Mimicking Real-Life Tactility

Our target user group consisted of individuals who are often quite distant from digital technology. We needed to find ways to make the UI of Teams more welcoming for them.

I created some digital images that imitated the texture and roughness of real-world surfaces, and asked test users what they felt each material conveyed about a digital UI.

Test Feedback: What did users think of each texture?

This gave me a palette of three digital materials that I could apply to the UI of the app to communicate affordances. I combined these with the existing Fluent style to produce a style reference, which then helped with producing our final mockups.

What did I learn from this project?

Accessible design isn't designing for extremes, it's designing for everyone.
Accessibility is for everyone

Even though we focused on users living with autism, our concept was well-received by a non-neurodivergent audience during critique.

Accessible design is not about specific solutions that only work for one demographic at a time, but is a method for designing user experiences that benefit everyone, disabled or not.

Research is key

Although our class timeline did not permit thorough user testing, what we found through desk research was still massively helpful. After all, the most straightforward way to find out what a user needs is to talk to them!

For next time...

If we got more time and resources for a project like this, I would devote that towards more user research. This is especially true as we ended up designing for a second user, meeting organisers, as part of our solution to the first!

It would have be very helpful to be able to do multiple rounds of user testing when iterating our solutions. Our itinerary and UI concepts only went through one main round of feedback before we had to make our final concepts.

Next time, I'd like to be more thorough and through more rounds to iron out any assumptions or design dead-ends early.