Figma Scrum Board

Allow for better collaboration within the team in Figma.

Project Overview

This collaborative scrum board facilitates multiple users working together, meticulously documenting group tasks and monitoring individual progress. It ensures transparent communication, providing everyone in the group with insight into each other's contributions and efforts.

Project Duration: three weeks

Role & Responsibility

As the UX designer for this project, my role encompasses:

  • Crafting wireframes

  • Gathering user feedback through multiple design iterations

  • Ultimately finalizing the prototype in Figma

Problem

Our design team comprises not only UX designers but also UX researchers, copywriters, and project managers. We were communicating on assigned tasks in Teams, but managing multiple tasks within Teams can become cumbersome. To avoid redundancy across numerous groups, we are strategically planning to centralize task management within Figma.

Goal

One glance to comprehend every task category, release time, deliverable date, assigned members, and task description. Also understanding each other’s progress and road block.

Form draft to prototype

The project was executed expeditiously, with the entire design process spanning just one week, from the initial draft to the final high-fidelity prototype. Within Figma, I crafted numerous components and established distinct variants to denote specific details such as time & date, team sizes, and task specifics.

As part of the project, I incorporated a “Complete Effects Design” using light pink and blue gradients as background. This visual cue allows team members to quickly identify completed task cards. Additionally, the completed task card showcases each team member's individual contribution.

Component library

As a team of 11 members, each possessing Figma expertise and proficiency in utilizing components and variants, I took the initiative to design our avatars and categorize each task with labels, contributing to the construction of a comprehensive task board.

Figma Scrum Board Demo

Add Task Description & Edit Team Size

Choose Team Member & Add Individual Task

Individual Check & Release / Deliverable Date

Change Task Category & Completed Version

Final Presentation

Drawing inspiration from JIRA, the presentation involves categorizing each task into distinct progress bars. Utilizing Figma's Auto Layout, tasks can be effortlessly dragged from one progress bar to the next. This implementation ensures clarity during our daily morning call, offering a straightforward visual representation that allows for an easy assessment of everyone's task progress.

Success Measure

Figma scrum board I designed is evidenced by its widespread adoption among other teams. Additionally, leader's enthusiastic utilization of it and its positive impact on project management serve as tangible success markers. Teammate satisfaction and enjoyment of the work facilitated by the product further validate its success, reflecting successful collaboration and improved productivity within the team.

More Work