top of page
MOCK-UP n°1.jpg
MOCK-UP n°1_hand_flp.png


Let's Start Workshopping!


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. 

Screen Shot 2022-08-13 at 9.56.56 AM.png


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.



80 hours


Solo Project




UI Design

Brand Design

Content Strategy




Adobe Photoshop




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
Affinity Mapping.jpg
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.


User Persona 01
User Persona 02
Drawing on these two personas and my research interviews I used Point of View Statements and How Might We Questions to uncover specific challenges among my target audience and to set the stage for ideating solutions.
Point of View Statements
speech bubble.png

"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."


speech bubble.png

"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."

speech bubble.png

"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
Speech bubble2.png

"How might we build trust between supervisors and direct reports in the workplace?"

"How might we build trust with students in the classroom?"

Speech bubble2.png

"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?"

Speech bubble2.png

"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.



Mood Board
Brand Values
imaginative engaging inquisitive

I created a mood board to ideate potential color schemes and visual design patterns based on my brand values.

mood board.jpg



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
Color Paletette.jpg

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
Color Paletette.jpg
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

Screen Shot 2023-02-09 at 10.38.48 AM.png
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
Frame 2.png

*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
Affinity_Component Library.jpg
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.

SJackson_M7_U2_High Fidelity Wireframes_v2_Page_01.png
SJackson_M7_U2_High Fidelity Wireframes_v2_Page_05.png
SJackson_M7_U2_High Fidelity Wireframes_v2_Page_09.png
SJackson_M7_U2_High Fidelity Wireframes_v2_Page_06.png
SJackson_M7_U2_High Fidelity Wireframes_v2_Page_12.png
User Testing Task Flows 1_2.png

* 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.

affinity_severity map.png

Revised Prototype

Logged In Home & Search


Logged In Home

Search results.png

Search Results


Logged In Home & Upload



affinity results rvsd 1.png







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. 

See More Projects


Scott Jackson

Product Designer

bottom of page