OVERVIEW—
Synergy is a digital team management tool.
Created as a class project, Synergy is aimed to help team members promote personable experiences, maintain open communication, keep track of team progression, and most importantly, hold each other accountable.
Role: Product Designer, UX Researcher
Timeline: April 2020 - June 2020, 4 weeks
Tools: Figma, Zoom
Collaborators: Katie Chen, Junhee Chung, Joey Hoang, Leslie Montoya
THE CHALLENGE—
How might we enhance online team collaboration by improving overall team communication and productivity?
The COVID-19 pandemic and the national stay-at-home order has affected every individual in various ways. As students and industry professionals transition into the virtual work environment, many have experienced difficulty with team collaboration.
THE SOLUTION—
Synergy: Helping team bond while keeping each other accountable
USER RESEARCH—
99% of students and 83% of employers transition to remote learning and working. How are people coping with this transition?
Secondary research and online ethnography
To start, my team conducted online secondary research to familiarize with the issue. I personally researched regarding virtual productivity, specifically looking into trends and issues when working online. I observed conversations in Reddit communities regarding remote work to specifically identify issues people are currently dealing with. I also identified popular collaboration tools, which my team used in our competitive analysis.
Online Questionnaire (N=48)
I assisted my team in creating an online questionnaire to gather quantitative data on how personal and team productivity was impacted by the national stay-at-home order.
User Interviews (N=5)
The goal of the interviews was to extract specific relevant scenarios and assess user needs and frustrations. I conducted 2 of the interviews with potential stakeholders and analyzed their responses accordingly.
KEY INSIGHTS—
“[Participation in teamwork] takes more effort in some group dynamics when you don’t know each other well. It takes more effort to make sure everyone is on the same page.” —Student, 20 y/o
There has been a difficult transition to online working across all professions and industries.
Teams saw a decrease in overall productivity online due to the less cooperative culture and difficulty expressing opinions
Individuals cite issues in communication, participation, and workflow in virtual work
USER PERSONAS—
With my team, I identified a primary and secondary stakeholder. I developed user personas based on research insights, specifically the team’s interview data.
IDEATION—
Brainstorming and storyboarding
Along with my team, I brainstormed potential design solutions and created storyboards, which we tested on 6 potential stakeholders.
Other ideas included:
Anonymous suggest/appreciation box
"“Coffee break” conversation generator
Digital reward system
Collaborative team bullet journal and workspace
After our storyboard interviews, from user insights, we found a digital dashboard the most appealing solution because it:
assists in maintaining open communication
Can visually keep track of project updates and progress
holds team members accountable
Has the potential to promote personable experiences amongst team members
DESIGN EXPLORATION—
Wireframe and Lo-fi Prototype
My team and I started with initial sketches. After sharing our ideas, we decided on aspects to keep for further exploration. I used Figma to create the following wireframes for pages of the interface.
Following feedback and deliberation deliberation, I helped create a lo-fi prototype, which was tested on 5 target users. I conducted 1 of the user tests. Insights from the tests was essential in the design of the final prototype.
MOODBOARD + STYLEGUIDE—
Creating a Synergy’s brand identity
Our moodboard was essential in solidifying the project’s brand and creating the visual identity of our solution. I created Synergy’s moodboard, which informed the final style guide and visual assets. When creating the moodboard, I wanted to touch on tone words such as productive, professional, clean, focused, effective, and impactful.
The final fonts and colors chosen are consistent with brand of my moodboard. My team and I chose Poppins as the primary font and Noto Sans as the secondary font to embody a comforting yet professional feeling for the brand.
TESTING + ITERATION—
We tested our prototype on 5 users.
After analyzing our responses, we feel that the design, color choices, and workflow are our strongest features. Taking what our users said into consideration we made some changes to improve on the onboarding process, added features, improved the interactions, and fixed wording for clarity.
Created landing pages to elaborate on information about the product.
Designed an onboarding process that will guide users through key features of the product
Added the ability for users to comment on updates made by teammates
See the calendar view in the minimized tool
Indicated when the user will start their session
Fixed the create tasks interaction
Allow users to see details of the team meeting
Consolidated progress page and updates page
Changed the graphs to measure the number of tasks done per day or week rather than by the hour
Homepage
The final homepage includes:
data visualization of progress
important announcements
overview of tasks-to-complete
a calendar with deadlines.
Updates
The Updates page features:
data visualization of overall progress for a specific project
answers to team icebreaker questions
tasks updates from each member
Tasks
User testing results stressed the importance of organizing and classifying tasks.
The Tasks page features:
tasks organized by their stage in their respective process
cards indicating task assignment and priority
easy process to add new tasks
Calendar
The Calendar page features:
View and set all your deadlines and meetings using one tool
Do the same for tasks assigned to your teammates
Filter through tasks and events
Minimized View
When asking stakeholders about issues when working virtually, a major pain point identified was having too many tabs open. The minimized view is meant to streamline collaboration with team members while keeping an organized desktop. While working, one can quickly refer to project announcements, tasks, messages and calendar without having to open a new tab.
REFLECTION—
Through working on this project, I grew in the following ways:
Understood the process of sketching, testing, and iterating on prototypes
Improved upon my visual skills through moodboarding and branding
Further familiarized with Figma as a wireframing, branding, and prototyping tool
Learned and implemented a design system to create a high-fidelity digital interface
If my team and I had more time, I would want to explore functions to allow for more indirect interaction between members, such as adding a like button, and brainstorm ways to prevent a competitive environment when it comes to posting updates. Because we wanted to create a versatile solution that can be used in both education and industry, I would also interview both students and employers and see how they utilize the application differently. From this, I can identify and fill in gaps in our solution.
ACKNOWLEDGEMENTS—
This project was presented as a final deliverable for a prototyping course. I would like to thank Professor Haijun Xia and his teaching staff for the knowledge and resources provided throughout the course. I would also like to thank stakeholders for their valuable insights as well as my peers for their feedback during critique sessions.