YOOV WORK is a All-in-one HR management system that integrates various functions. It helps business to streamline all HR tasks, from employee onboarding, scheduling, attendance, leave, to payroll.
There are various mini apps available on the Home page that helps users to accelerate and simplify their daily work. However, the presence of excessive mini apps with inefficient display and a poor mini app management experience poses challenges for users in utilizing these features.
Redesign the Home page to improve the overall user experience within this page, with a primary focus on accelerating the process of finding mini apps and improving experience of managing those mini apps.
Harry Wong | Product Designer
- Responsible for the entire project from kick off to provide design solution
Marcus Kung | Product Design Manager
- Assign task
- Review design
Nicky Tam | Ausiness Analyst
- Create design ticket
- Confirm product requirements
- Review design
8 days
The scope, goal, and objectives of this project were not initially defined explicitly from the beginning. In general, project requirements are created by Product Officers, focusing on user-centric content such as user needs and pain points. However, this project was created by a Business Analyst with specified design solutions. Upon reviewing the received design solutions, I observed a commonality among them: they all prioritize minimizing development burden but bring limited usability enhancements.
I conducted a meeting with our Business Analyst to gain a better understanding of the business goals, refine the project requirements, and gather insights from user feedback, needs, and pain points associated with the design solutions. As a result, I am now able to evaluate which solutions have the potential to enhance the user experience.
Through the meeting, I found the development timeline for this project is short. Despite this, our Business Analyst agreed to allocate more time for the user needs and solutions exploration after realizing that the specified design solution misalign with user needs.
During the meeting, it came to my attention that the development timeline for this project is short. However, after sharing my insights, our Business Analyst agreed to allocate more time for exploring user needs and better solutions.
The usability issues provided by our Business Analyst were collected and integrated from internal users' complaints and feedback received from the Customer Service department over time. However, without a quantification of the feedback received, it becomes challenging to evaluate the severity of these issues and determine which usability issues should be prioritized.
Therefore, I interviewed several internal users to gather updated feedback.
After analysing those feedbacks, I integrated them with the usability issues provided by our Business Analyst. Given the constraints of the development timeline in the business context, I excluded some usability issues that worth addressing but not urgent, and some promising solutions but require a longer development time.
Following discussions with our Business Analyst and Design Manager, I have recommended adding the excluded discoveries to backlog for future consideration. In addition, I proposed three primary objectives that align our business for this revamp project.
An effective categorization method is essential for users to easily find specific mini apps. Currently, the mini apps are only categorized as "Approval Management" and "Non-Approval Management."Based on the logic within the system and their purposes, I further categorised "Non-Approval Management" category into "System Tools" and "Approval Forms." This subdivision will help users navigate and locate the desired mini apps more efficiently.
The communication problem arising from the mini app icons includes difficulties for users in recognizing and distinguishing between the different mini apps. For example, "System tools" and "Approval forms" are categorized separately, they may still appear visually similar, even using the same icon. Designing unique icons for each individual approval form within the given time constraints is not feasible.
To enhance the effectiveness of visual communication, I redesigned new sets of icons for "System tools" and "Approval management" at this stage.
I divided the screen into two sections to create a basic structure. It also optimizes the screen layout for efficient one-handed usage and ensures that users can quickly access and manage their mini apps with ease:
The continuous stacking of different categories of mini apps in the original design has presented usability issues in browsing and navigating.
To solve the problem, I utilised tabs bar component to organize them and allow users to navigation between categories at the same level of hierarchy. As tabs can horizontally scroll, the UI can have as many tabs as needed.
As the number and categories of mini apps continue to expand extensively, the tab bar may accumulate a large number of labels. In such cases, the horizontal scrolling approach may become inefficient.
With the context menu, users can effortlessly scroll through the category list and quickly jump to any category they want.
Categorization and naming decisions are made by administrators. We can’t expect their mental model to align with all users. This pose a challenge for some users when trying to identify the category to find specific mini apps.
To address this challenge, I have implemented a fuzzy search feature that enables users to find the desired mini app by name. Users can search apps even if they are uncertain about the exact name. Search results will display the relevant mini apps along with their associated categories, enhancing the learnability and helping users quickly locate the desired mini app.
Based on the nature of the job and job grades, users often only utilize several specific mini apps out of the numerous available. A personalized "Frequently Used" feature can significantly accelerate users' daily access speed. Therefore, I have begun working on improving the adoption of this feature.
In the original design, the editing process for the "Frequently Used" feature had several issues that impacted usability, including:
To improve the overall usability and user experience of the editing process for the "Frequently Used" feature, I focused on the following design directions:
As a product designer, I have only learned and designed a few icons during my university years. While they were acceptable at the time, they no longer meet my current standards for design. Therefore, redesigning a new set of 12 icons that align the existing branding, icons, and balancing usability was challenging to me.
I always holds high standards for myself and is committed to continual self-improvement, I consider it is an opportunities to enhance my skills and knowledge. As a designer who has studied design for five years and is a self-learner in UI/UX, I quickly identified the key concept of icon design and performed rapid iterations for each icons. Based on the feedbacks from Design Manager, I selected the most satisfying designs to further refine. This experience emphasized the importance of continuous learning, adaptability, and collaboration in creating high quality designs once again.