01. Project overview
Problem
Gritango seeks to redesign the grid search feature of its recruiting web application to align with modern design trends and enhance user experience. The current platform, designed six years ago, has become outdated and may hinder work efficiency given users' familiarity with contemporary search methods.
Outcome
The redesigned grid search interface presents a clear, intuitive layout that enables users to seamlessly search, select, and take action on recruiting tasks. By streamlining the interface and minimizing repetitive actions, the new design empowers users to work more efficiently, reducing friction in their workflow and improving overall productivity.
Simplifying Recruiters' Daily Tasks with Ease
Simplifying Recruiters' Daily Tasks with Ease
Updated UX Simplifies Grid Search in Prodata
Updated UX Simplifies Grid Search in Prodata
Watch Prototype Video
Simplifying Recruiters' Daily Tasks with Ease
Updated UX Simplifies Grid Search in Prodata
Watch Prototype Video
Outline
Company
Timeline
Aug 2024 - Oct 2024
Role
UX UI Designer
Team
UX UI Designer x 1
UX UI Mentor x 1
Developer x 1
Director x 1
Team
UX UI Designer x 1
UX UI Mentor x 1
Developer x 1
Director x 1
Outline
Company
Timeline
Aug 2024 - Oct 2024
Role
UX UI Designer
Team
UX UI Designer x 1
UX UI Mentor x 1
Developer x 1
Director x 1
Team
UX UI Designer x 1
UX UI Mentor x 1
Developer x 1
Director x 1
02. Research & Emphasize
User Interview
I interviewed 5 daily users of the original design tool to understand their search habits, workflows, and challenges. I also prioritized feature usage to identify areas for improvement.
Key Insights
Clarity and Efficiency:
Users need visible filters and results, requiring improved information hierarchy and navigation.
Feature Prioritization:
Outdated features clutter the interface; prioritizing essential tools enhances usability.
Organized Data:
Users require quick access to profile data, suggesting a structured layout for faster retrieval and reduced cognitive load.
01. Project overview
Problem
Gritango seeks to redesign the grid search feature of its recruiting web application to align with modern design trends and enhance user experience. The current platform, designed six years ago, has become outdated and may hinder work efficiency given users' familiarity with contemporary search methods.
Outcome
The redesigned grid search interface presents a clear, intuitive layout that enables users to seamlessly search, select, and take action on recruiting tasks. By streamlining the interface and minimizing repetitive actions, the new design empowers users to work more efficiently, reducing friction in their workflow and improving overall productivity.
02. Research & Emphasize
User Interview
I interviewed 5 daily users of the original design tool to understand their search habits, workflows, and challenges. I also prioritized feature usage to identify areas for improvement.
Key Insights
Clarity and Efficiency:
Users need visible filters and results, requiring improved information hierarchy and navigation.
Feature Prioritization:
Outdated features clutter the interface; prioritizing essential tools enhances usability.
Organized Data:
Users require quick access to profile data, suggesting a structured layout for faster retrieval and reduced cognitive load.
Clarity and Efficiency:
Users need visible filters and results, requiring improved information hierarchy and navigation.
Feature Prioritization:
Outdated features clutter the interface; prioritizing essential tools enhances usability.
Organized Data:
Users require quick access to profile data, suggesting a structured layout for faster retrieval and reduced cognitive load.
Clarity and Efficiency:
Users need visible filters and results, requiring improved information hierarchy and navigation.
Feature Prioritization:
Outdated features clutter the interface; prioritizing essential tools enhances usability.
Organized Data:
Users require quick access to profile data, suggesting a structured layout for faster retrieval and reduced cognitive load.
03. Discovers & Design
Discover 01
Search Block
Original Design:
The accordion layout hid search options, with unclear labels leading to poor navigation. About 40% of the options were not used.
New Design:
I decluttered the interface by removing unused options and making all options visible. Primary options lead to secondary choices, using progressive disclosure to simplify navigation and reduce cognitive load. This enhances usability by improving clarity and flow, helping users make quicker decisions while avoiding overwhelm.
Discover 02
Search Result Block
Original Design:
No search result summary was provided, making it easy for users to forget their previous selections.
New Design:
A vertical results panel now shows users all selected options, which they can expand or collapse. Search criteria are displayed as removable pills, allowing users to modify searches easily. This design improves feedback and user control, providing ongoing visibility into their search process.
Discover 03
Profile Result Block
Original Design:
Each result was shown in a single column, which led to a cluttered, dense page when users added more columns.
Discover 03
Profile Result Block
Original Design:
Each result was shown in a single column, which led to a cluttered, dense page when users added more columns.
New Design:
I grouped related data within the same column and introduced spacing, making it easier to scan and process information. Visual elements like icons, tags, and color coding improve the readability and recognition of key data, creating a more intuitive and visually balanced layout.
New Design:
I grouped related data within the same column and introduced spacing, making it easier to scan and process information. Visual elements like icons, tags, and color coding improve the readability and recognition of key data, creating a more intuitive and visually balanced layout.
New Design:
I grouped related data within the same column and introduced spacing, making it easier to scan and process information. Visual elements like icons, tags, and color coding improve the readability and recognition of key data, creating a more intuitive and visually balanced layout.
New Design:
I grouped related data within the same column and introduced spacing, making it easier to scan and process information. Visual elements like icons, tags, and color coding improve the readability and recognition of key data, creating a more intuitive and visually balanced layout.
05. Design System
Component Organization
While designing, I simultaneously created the component system. This approach allowed me to efficiently manage a large number of variants and make rapid updates when needed. I prefer organizing components from the smallest elements to groups and then to cards. This structure enables me to quickly navigate and locate the exact components I need.
By structuring components systematically, I could maintain consistency in design elements such as buttons, forms, and chat flows, which is crucial for usability and visual coherence. This process also allowed for easier iteration and refinement of individual components, ensuring they function seamlessly within the overall chatbot interface and contribute to a cohesive user journey.
04. Usability Test
Task Interview
I conducted usability testing with 5 target users to validate the redesigned search experience. The primary goal was to assess how well the new design integrated with their workflows and whether it improved navigation, clarity, and interaction with profile results. The test focused on ensuring the interface was intuitive and aligned with key UX/UI principles such as usability, task efficiency, and user control.
Other Projects
05. Design System
Component Organization
While designing, I simultaneously created the component system. This approach allowed me to efficiently manage a large number of variants and make rapid updates when needed. I prefer organizing components from the smallest elements to groups and then to cards. This structure enables me to quickly navigate and locate the exact components I need.
While designing, I simultaneously created the component system. This approach allowed me to efficiently manage numerous variants and make rapid updates when needed. I prefer organizing components from the smallest elements to groups and then to cards. This structure enables me to quickly navigate and locate the exact components I need.
Beyond its benefits in design, this organization also assists the development team by making it easier to identify and implement the components needed to bring the design to life.
By structuring components systematically, I could maintain consistency in design elements such as buttons, forms, and chat flows, which is crucial for usability and visual coherence. This process also allowed for easier iteration and refinement of individual components, ensuring they function seamlessly within the overall chatbot interface and contribute to a cohesive user journey.
Beyond its benefits in design, this organization also assists the development team by making it easier to identify and implement the components needed to bring the design to life.
06. Prototype
User Journey for Recruiting Grid Search:
Overall:
The prototype video will showcase the redesigned grid search, focusing on improved functionality and user experience. Users can view the search, results, and profile blocks simultaneously, making multitasking more efficient.
The search block:
Uses a clear hierarchy with primary and secondary buttons. Secondary options only appear after a primary action, reducing cognitive load and preventing unnecessary complexity.
Overall:
The prototype video will showcase the redesigned grid search, focusing on improved functionality and user experience. Users can view the search, results, and profile blocks simultaneously, making multitasking more efficient.
The search block:
Uses a clear hierarchy with primary and secondary buttons. Secondary options only appear after a primary action, reducing cognitive load and preventing unnecessary complexity.
Overall:
The prototype video will showcase the redesigned grid search, focusing on improved functionality and user experience. Users can view the search, results, and profile blocks simultaneously, making multitasking more efficient.
The search block:
Uses a clear hierarchy with primary and secondary buttons. Secondary options only appear after a primary action, reducing cognitive load and preventing unnecessary complexity.
Overall:
The prototype video will showcase the redesigned grid search, focusing on improved functionality and user experience. Users can view the search, results, and profile blocks simultaneously, making multitasking more efficient.
The search block:
Uses a clear hierarchy with primary and secondary buttons. Secondary options only appear after a primary action, reducing cognitive load and preventing unnecessary complexity.
The searching results block:
It displays search filters clearly, allowing easy adjustments and toggling of sections. The profile block organizes data into categories with ample whitespace, reducing clutter and improving readability.
The profile result block:
Users can select multiple profiles and apply bulk actions, streamlining their workflow and boosting productivity.
The searching results block:
It displays search filters clearly, allowing easy adjustments and toggling of sections. The profile block organizes data into categories with ample whitespace, reducing clutter and improving readability.
The profile result block:
Users can select multiple profiles and apply bulk actions, streamlining their workflow and boosting productivity.
The searching results block:
It displays search filters clearly, allowing easy adjustments and toggling of sections. The profile block organizes data into categories with ample whitespace, reducing clutter and improving readability.
The profile result block:
Users can select multiple profiles and apply bulk actions, streamlining their workflow and boosting productivity.
The searching results block:
It displays search filters clearly, allowing easy adjustments and toggling of sections. The profile block organizes data into categories with ample whitespace, reducing clutter and improving readability.
The profile result block:
Users can select multiple profiles and apply bulk actions, streamlining their workflow and boosting productivity.
07. Reflection & Next Steps
User Interview
Usability Test
User interviews revealed that not all users were fully familiar with the tool, especially those who only used specific features. Interviewing users from different roles gave me diverse perspectives on how various functionalities are used, which enriched my understanding of their needs.
User Interview
User interviews revealed that not all users were fully familiar with the tool, especially those who only used specific features. Interviewing users from different roles gave me diverse perspectives on how various functionalities are used, which enriched my understanding of their needs.
Next, I’ll conduct usability testing with targeted scenarios to evaluate how users navigate through key tasks. I’ll focus on testing user flows and measuring task completion times to identify areas for improvement. This will help pinpoint usability challenges and areas for refinement, allowing me to iterate on the design for a smoother, more intuitive user experience.
Usability Test
Next, I’ll conduct usability testing with targeted scenarios to evaluate how users navigate through key tasks. I’ll focus on testing user flows and measuring task completion times to identify areas for improvement. This will help pinpoint usability challenges and areas for refinement, allowing me to iterate on the design for a smoother, more intuitive user experience.