Problem
Recent research shows inclusivity in the workplace not only improves overall morale but also strongly boosts productivity. Unfortunately, many workplaces currently deeply undervalue the socio-economic benefits of inclusivity.
Solution
Building inclusivity begins with practicing empathy-driven communication skills and getting feedback. To address this crucial need Affinity provides an online forum for workshopping communication and for receiving thematically organized tips and insights on communication styles and techniques.
Overview
Timeframe
80 hours
Team
Solo Project
(Speculative)
Role
Research
UI Design
Brand Design
Content Strategy
Tools
Figma
FigJam
Adobe Photoshop
Empathize
Background
According to research by Salesforce, “86% of employees and executives cite the lack of effective collaboration and communication as the main causes for workplace failures.” Another study from Mckinsey & Company cites, “employees who feel more included in the workplace are almost 5 times more likely to report increased productivity.”
Making people feel included in conversations is a fundamental skill with strong social and economic benefits when applied to the workplace. This is especially the case in industries such as education, law enforcement, and any office environment with heavy communication between colleagues and clients.
Who I Talked To
-
5 Participants ranging in age from 30-38
-
3 women and two men, including 1 self-identifying queer woman and 1 Latinx man
-
2 Teachers, 1 Sales Associate, 1 Union Organizer, and 1 UX Designer/Former Architect
I created an affinity map to sort the results and identify key themes that emerged
Affinity Map
Synthesize
Key Takeaways
-
4 of the 5 explicitly cited the importance of creating room for questions for reasons varying from effective mentorship to keeping people engaged
-
5 of the 5 cited building trust as essential for effective communication
-
3 of the 5 cautioned against over-engaging with an agitated person
Through my research interviews, I realized the problem of communication breakdowns and people not feeling included not only applies to supervisors and direct reports, but also to teachers and students.
I quickly saw the potential for my product to have a broad reach across workplace settings.
To better understand parts of my target audience and define specific needs I focused on two personas, one a manager in an office and the other a teacher.
Define
User Persona 01
User Persona 02
Point of View Statements
"I’d like to explore ways of building trust and transparency in workplace communication because the lack of these things is what people cite as leading causes of communication breakdowns."
Define
"I’d like to explore ways of helping people communicate with an agitated person because these encounters make keeping a project or classroom focused very challenging."
"I’d like to explore ways of helping people invite questions and space for others’ opinions because people tend to become disengaged or even disruptive when they don’t feel their opinion matters."
How Might We Questions
"How might we build trust between supervisors and direct reports in the workplace?"
"How might we build trust with students in the classroom?"
"How might we support workers in situations where they have an agitated coworker?"
"How might we support teachers in situations where they have an agitated student?"
"How might we help supervisors engage direct reports and make them feel included?"
"How might we help teachers in engage students and make them feel included?"
Project Goals
Using a ven diagram I defined business goals, user goals, and technical considerations to help synthesize the results of my research and set the stage for ideating solutions.
Ideate
Mood Board
Brand Values
calm
imaginative engaging inquisitive
I created a mood board to ideate potential color schemes and visual design patterns based on my brand values.
Ideate
This color scheme is designed to evoke a sense of serenity and ease. The “Communicative Blue” primary color (to be used sparingly for primary CTAs) is designed to be bold, but also interactive and communicative. “Serenity Blue,” the secondary color, is closely related to the primary brand color, but is calmer and is used to suggest different options or site features to explore. “Natural beige” is designed to closely relate to nature and provide a warm and happy backdrop with which to explore to the site.
Color Palette
Option 1
This color scheme is designed to evoke a sense of exploration and balance. The “Balanced Green” color serves as the primary color and is designed to encourage a focused, grounded, and balanced exploration. The secondary color, “Explore Maroon” inspires the user to dig deeper and feel a sense of self-control and self-guidance. “Refreshing Blue” evokes a sense of lightness and ease as the user in some areas feels guided by the site and in other areas feels a sense of command over his or her exploration.
Color Palette
Option 2
Key Features & Explorations
-
Tested “z” and “f” based UX patterns for site content
-
Included Daily Tips to keep users continuously engaged with the product
-
Included a “Resources/Communication Toolbox” for product-driven content with research-based tips from conflict resolution specialists and psychologists; use as default or put first given control constraints
-
Included a “Community Workshop” that provides a forum for people to post videos of interactions in the workplace or classroom and get feedback from others
-
Provided an AI-driven feedback tool when someone posts content to the “Community Workshop”
Low Fidelity Wireframing - Mobile
Use Arrows to View Pages
Designing for Desktop
-
Desktop wireframes were created subsequent to the mobile ones as I adopted a “mobile-first" design strategy
-
Creating accessible designs with the limited screen real estate of mobile devices helped me prioritize my design features
-
This also led to the decision to consolidate the search processes for the “Communication Toolbox” and “Community Workshop” with a content switcher
Low Fidelity Wireframing - Desktop
*Due to a tight deadline I chose to focus my user testing and final design efforts on the mobile responsive site and did not develop these further
Prototype & Test
Component Library
High Fidelity Wireframing & User Testing
Task Flows
I conducted user testing on my high-fidelity wireframes to evaluate and refine my product features in ways that are grounded in users' experiences.
* I subsequently added a view comment and commenting task flow that was in development and at a mid-fidelity stage.
Synthesizing Results
At a Glance Summaries
-
Participants were given two tasks, creating an account and another that was quite layered and entailed site navigation, bookmarking, and commenting.
-
Participants ranged in age from 29-38 and consisted of 4 females and one male.
-
Participants included 2 UX Design Students, 1 UX Designer/ Former Architect, 1 Teacher, and 1 Sales Associate.
Definitions of Success
-
Completion: 5/5 succeeded in completing the two tasks.
-
Completion Time: Completion time was not entirely measurable given I punctuated the tasks with questions to solicit feedback though 5/5 completed the tasks with relative ease.
Prioritizing Revisions
After conducting an affinity mapping exercise I used a Frequency to Severity Map to sort the problems uncovered in my user testing and prioritize my subsequent revisions.
Revised Prototype
Logged In Home & Search
Logged In Home
Search Results
Logged In Home & Upload
Bookmarking
Bookmarks
Comments
Commenting
Conclusion
Communication breakdowns create unpleasant work environments, impede collaboration between colleagues, and negatively impact both employee productivity and retention. Let us remind you that we can do better with practice and feedback!
Affinity is born out of the realization that practicing communication and receiving feedback on communication yields immense social and economic benefits.
We invite you to discover Affinity’s Communication Toolbox and Community Workshop, which we believe will set the stage for a more inclusive society.
Next Steps
The prototype currently only contains screens for onboarding and logged-in home navigation pertaining to searching, sorting/filtering, bookmarking, comments and commenting, and a user profile page. Given additional time I would have liked to explore more task flows such as uploading videos for AI feedback and also other options for user navigation via the carousel of themes.
Conducting a survey could also be very helpful in refining the carousel's list of themes related to workplace communication. Additionally, I would also be interested in exploring whether users would be interested in collaborative bookmarking and shared folders for bookmarks.
