KeelHubProject | Lesi's Portfolio

TIMELINE

Feb 2024 - Present

MY ROLE

Product Designer

OVERVIEW

KeelHub is an interior management platform designed to unify the organization's management of several hundred employees and multiple internal projects.

PLATFORMS

Website

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.

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

OKAY...WHAT’S THE PROBLEM?

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 Toools to deal with...

Onboarding
Interview
Keep tracking of new member
Assigned member
Attend meeting
...

“Why there are 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.

SOLUTIONS

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

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.

# Volunteer Categories Iterations

Focus on count

Version 1: Shows only the count for each role.

Focus on count and role

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

Focus on Trend

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

Focus on Trend

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

#Project Overview Iterations

Version 1: Show the percentage for each project status.

Version 2: Shows the exact count for each project status.

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.

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

Best suited for straightforwardly displaying the count of each role.

Ideal for allowing admins to quickly view the overall project status count.

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.

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.

SOLUTIONS

Applying the design system makes it easier to tailor the homepage design to different users.

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

For Users

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

RESTROSPECTIVE

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.

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

OTHER PROJECTS

Check Out More!

TIMELINE

Feb 2024 - Present

MY ROLE

Product Designer

OVERVIEW

KeelHub is an interior management platform designed to unify the organization's management of several hundred employees and multiple internal projects.

PLATFORMS

Website

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.

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

OKAY...WHAT’S THE PROBLEM?

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 Toools to deal with...

Onboarding

Interview

Keep tracking of new member

Assigned member

Attend meeting

...

SOLUTIONS

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

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.

# Volunteer Categories Iterations

Focus on count

Version 1: Shows only the count for each role.

Focus on count and role

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

Focus on Trend

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

Focus on Trend

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

#Project Overview Iterations

Version 1: Show the percentage for each project status.

Version 2: Shows the exact count for each project status.

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.

Best suited for straightforwardly displaying the count of each role.

Ideal for allowing admins to quickly view the overall project status count.

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.

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.

SOLUTIONS

Applying the design system makes it easier to tailor the homepage design to different users.

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

For Users

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

RESTROSPECTIVE

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

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.

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.