MY ROLE

Product Designer

User Researcher

Product Manager

UX Writer

PLATFORM

Web Design

Tablet Design

TIMELINE

Feb 2024 - Present

TEAM

Product Manager

User Research

Development

MY ROLE

Product Designer

User Researcher

Product Manager

UX Writer

PLATFORM

Web Design

Tablet Design

TIMELINE

Feb 2024 - Present

TEAM

Product Manager

User Research

Development

MY ROLE

Product Designer

User Researcher

Product Manager

UX Writer

PLATFORM

Web Design

Tablet Design

TIMELINE

Feb 2024 - Present

TEAM

Product Manager

User Research

Development

Story Begins…

Story Begins…

Story Begins…

WHAT IS..KEELWORKS

KeelWorks Foundations is a non-profit organization that provides career development assistance to help individuals achieve their full career potential. The organization comprises over 200 members who work on various projects within their respective fields of expertise.

WHAT IS..KEELWORKS

Thomas is the founder and Executive Director of the organization. In addition to the daily work routine, he is responsible for interviewing recruiters, onboarding new team members, assigning them to appropriate teams, conducting daily project meetings, and monitoring inactive members, etc...

WHAT IS..KEELWORKS

KeelWorks Foundations is a non-profit organization that provides career development assistance to help individuals achieve their full career potential. The organization comprises over 200 members who work on various projects within their respective fields of expertise.

INTRODUCING OUR MAIN CLIENT...THOMAS!

Thomas is the founder and Executive Director of the organization. In addition to the daily work routine, he is responsible for interviewing recruiters, onboarding new team members, assigning them to appropriate teams, conducting daily project meetings, and monitoring inactive members, etc...

SECTION TITLE

Our user currently uses the Google Family tool for communication, scheduling meetings, managing projects, volunteers, personal information, and roles. Everything. Due to the high volume of new joiners, daily emails, and numerous projects, they find it challenging to stay organized.

Google Family Tools to deal with...

  1. Onboarding

  2. Interview

  3. Keep tracking new members

  4. Assigned member

  5. Attend meeting

  6. ...

“Why are there so many? It is hard to keep track of everything!”​

—— Thomas

Thomas is having trouble keeping track of members and projects without a proper management tool, which is causing a lot of confusion. So, a platform to streamline volunteer management, onboarding, project tracking, and creation is needed.

SOUTIONS

Introducing an internal project and volunteer managing tool...

Home Page

The Home page provides a summary of critical metrics such as the total volunteers, current tasks, pending tasks, and overdue items. It emphasizes key functionalities commonly utilized by managers, offering a swift and effective overview upon platform access.

Onboarding Page

The Onboarding page enables managers to monitor each volunteer’s progress throughout the onboarding process. It includes due reminders and templates to help volunteers complete their onboarding smoothly and on time.

Project Page

The Projects page provides a comprehensive view of all organizational projects, displaying each project’s current status to keep managers informed at a glance.

Volunteer Page

This page allows managers to efficiently track volunteers by role, project assignments, start date, and more. Managers can easily add new volunteers and assign them to projects, simplifying the onboarding and project assignment processes.

Design Stage 1: Moving Design Concept to Actionable High Fidelity Design

Design Stage 1: Moving Design Concept to Actionable High Fidelity Design

Design Stage 1: Moving Design Concept to Actionable High Fidelity Design

MY RESPONSIBILITIES

Upon joining the team, I was tasked with upgrading the home page from low-fidelity to high-fidelity for both the organization manager and HR. My role involves enhancing the interface, considering the relevance and functionality of each element, and ensuring seamless integration with other pages.

MY RESPONSIBILITIES

Upon joining the team, I was tasked with upgrading the home page from low-fidelity to high-fidelity for both the organization manager and HR. My role involves enhancing the interface, considering the relevance and functionality of each element, and ensuring seamless integration with other pages.

MY RESPONSIBILITIES

Upon joining the team, I was tasked with upgrading the home page from low-fidelity to high-fidelity for both the organization manager and HR. My role involves enhancing the interface, considering the relevance and functionality of each element, and ensuring seamless integration with other pages.

THE ORIGINAL LOOKS

I began with evaluating the sketch and focused on what kinds of data and information displays can improve stakeholders' operational efficiency.

DESIGN IDEATION

My design goal is to enhance the intuitiveness of data information for users, thereby improving operational efficiency. To achieve this, I have explored the following design iterations.

DESIGN IDEATION

My design goal is to enhance the intuitiveness of data information for users, thereby improving operational efficiency. To achieve this, I have explored the following design iterations.

DESIGN IDEATION

My design goal is to enhance the intuitiveness of data information for users, thereby improving operational efficiency. To achieve this, I have explored the following design iterations.

# Volunteer Categories Iterations

Version 1: Focus on Count

1

1

Shows only the count for each role.

Displays the count for each role, using distinct colors to represent each role.

2

2

Version 2: Focus on Trend

Displays the count for each role with arrows indicating increases or decreases.

1

1

Displays the count for each role, using lighter shades to indicate decreases and darker shades to show increases.

2

2

# Project Overview Iterations

Displays the count for each role, using lighter shades to indicate decreases and darker shades to show increases.

1

1

Displays the count for each role with arrows indicating increases or decreases.

2

2

SEEKING FEEDBACK

Visualizing the concept helps our users understand it more easily and gain a clearer view of their preferences, and through the weekly short meeting with stakeholders, I learned that...

SEEKING FEEDBACK

Visualizing the concept helps our users understand it more easily and gain a clearer view of their preferences, and through the weekly short meeting with stakeholders, I learned that...

SEEKING FEEDBACK

Visualizing the concept helps our users understand it more easily and gain a clearer view of their preferences, and through the weekly short meeting with stakeholders, I learned that...

The easier, the better

The key thing is to check how many positions we have in our company right now, so I can make better hiring choices for each role when I get resumes.

Design Decision

From our conversation, I learned that stakeholders prefer information to be presented more intuitively, so we ended up with the two options below.

# Volunteer Categories Iterations

Selected

Shows the exact count for each role
Supports immediate planning and staffing decisions

# Volunteer Categories Iterations

Selected

Shows the exact count for each role
Supports immediate planning and staffing decisions

Design Stage 2: Expanding Platform Users and Defining the MVP for Rapid Launch

Design Stage 2: Expanding Platform Users and Defining the MVP for Rapid Launch

Design Stage 2: Expanding Platform Users and Defining the MVP for Rapid Launch

WHAT’S HAPPENING

Subsequently, the product team aims to launch the platform quickly and expand its reach to as many users as possible. The platform now serves not only managers and HR but also project managers and volunteers.

WHAT’S HAPPENING

Subsequently, the product team aims to launch the platform quickly and expand its reach to as many users as possible. The platform now serves not only managers and HR but also project managers and volunteers.

WHAT’S HAPPENING

Subsequently, the product team aims to launch the platform quickly and expand its reach to as many users as possible. The platform now serves not only managers and HR but also project managers and volunteers.

MVP FEATURES

Visualizing functions in a sitemap helps identify which features are commonly used by different roles, aiding in defining the MVP

DESIGN SYSTEM

As the project evolves, the design system continues to improve and be maintained. In this MVP iteration, our goal is to apply elements from the design system to ensure a consistent overall design.

DESIGN SYSTEM

As the project evolves, the design system continues to improve and be maintained. In this MVP iteration, our goal is to apply elements from the design system to ensure a consistent overall design.

DESIGN SYSTEM

As the project evolves, the design system continues to improve and be maintained. In this MVP iteration, our goal is to apply elements from the design system to ensure a consistent overall design.

SOUTIONS

Introducing an internal project and volunteer managing tool...

Admin & HR View

The homepage provides shared features for Admin and HR, allowing them to monitor past-due tasks, take necessary actions, and review active and inactive members for improved people management.

PM View

The Project Manager (PM) page enables product managers to track all projects and access each one easily. It also includes dashboards for Volunteer Categories and Unassigned Volunteers to support better project management.

Volunteer View

Currently, the Volunteers page displays only past-due items to ensure a quick product launch.

IMPACT

Improved Customer Upload Accuracy

The platform expanded from supporting 2 user roles to 4, providing tailored features that enhance the experience and productivity of every member within the organization.

For Management

The platform empowers board members—whether Admin, HR, or PM—to more easily track projects and team members, improving workflow efficiency and saving time by up to 80%.

RETROSPECTIVE

👀The project is ongoing and evolving, with design still being defined and much more ahead. Feel free to reach out to learn more.

01. Understanding Stakeholder Priorities

Interpreting stakeholders' true needs is essential, especially for subjective areas like the homepage. Extracting key insights from broad conversations allows us to design solutions closely aligned with stakeholder priorities and project goals.

02. Adaptability in Agile Environments

Agile environments involve frequent, uncontrollable changes, like high personnel turnover. Strong self-adjustment skills and flexibility are essential to staying responsive and ensuring progress.

03. Rapid Design with Design System

Using a design system has been essential for maintaining consistency and efficiency, providing a unified visual language that aligns all components with brand standards. It simplifies updates, supports scalable design, and enables faster iteration in agile environments by reducing redundancy and focusing on value.

RETROSPECTIVE

👀The project is ongoing and evolving, with design still being defined and much more ahead. Feel free to reach out to learn more.

01. Understanding Stakeholder Priorities

Interpreting stakeholders' true needs is essential, especially for subjective areas like the homepage. Extracting key insights from broad conversations allows us to design solutions closely aligned with stakeholder priorities and project goals.

02. Adaptability in Agile Environments

Agile environments involve frequent, uncontrollable changes, like high personnel turnover. Strong self-adjustment skills and flexibility are essential to staying responsive and ensuring progress.

03. Rapid Design with Design System

Using a design system has been essential for maintaining consistency and efficiency, providing a unified visual language that aligns all components with brand standards. It simplifies updates, supports scalable design, and enables faster iteration in agile environments by reducing redundancy and focusing on value.

RETROSPECTIVE

👀The project is ongoing and evolving, with design still being defined and much more ahead. Feel free to reach out to learn more.

01. Understanding Stakeholder Priorities

Interpreting stakeholders' true needs is essential, especially for subjective areas like the homepage. Extracting key insights from broad conversations allows us to design solutions closely aligned with stakeholder priorities and project goals.

02. Adaptability in Agile Environments

Agile environments involve frequent, uncontrollable changes, like high personnel turnover. Strong self-adjustment skills and flexibility are essential to staying responsive and ensuring progress.

03. Rapid Design with Design System

Using a design system has been essential for maintaining consistency and efficiency, providing a unified visual language that aligns all components with brand standards. It simplifies updates, supports scalable design, and enables faster iteration in agile environments by reducing redundancy and focusing on value.

OTHER PROJECTS

Check Out More!

OTHER PROJECTS

Check Out More!

OTHER PROJECTS

Check Out More!

The End.

Thanks For Watching.

Feel free to connect with me for any questions,

Feedback, or further assistance!

© Lesi Li 2025

  • LESI LI

Thanks For Watching

© Lesi Li 2025

  • LESI LI

Thanks For Watching

© Lesi Li 2025

  • LESI LI