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.
As a cross-platform system, there was fragmented functionality across platforms lead to inconsistent user experience between frontend (Mobile) and backend (Desktop) of the Events Reservation Module.
In the frontend (Mobile), users can perform various event reservation actions, such as browsing, creating, or editing events. In contrast, users can only browse and remove events in the backend (Desktop).
Enable users to perform the actions on backend event reservation module same as on the frontend, while ensuring a consistent cross-platform experience.
Harry Wong | Product Designer
Led the project success as the sole designer. Responsible but not limited to defining success metrics, scoping deliverable, estimating project timeline, conducting research and competitor analysis, providing design solution and specification
Marcus Kung | Product Design Manager
- Assign task
- Signing off the design directions and final deliverable
Jason Wai | Senior Product Officer
- Creating design ticket and initial product requirement
- Drafting product requirements
- Reviewing the final deliverable
10 days
To have a better understanding of the design scope, I identified that the frontend has 9 more functions than the backend. The number of functions are enough to form a new journey, user flow and user goal regarding event creation. It helped me establish a preliminary understanding of the project scope and timeline.
After evaluating the extensibility of current design, I found this module needs a complete redesign, integrating existing journey(Review room availability) and new journeys(Create event) together. By identifying the design approach, it allow me to establish a clearer understanding of project scale in early stage.
.png)
.png)
To ensure users can accomplish the same tasks with ease on the web platform, I prioritized maintaining consistent experience across platforms.
3 high-level principles for the experience in the revamp:
1. Similar to frontend, especially the event creating experience
2. Simple, avoid adding overly powerful and any further complex functionalities
3. Smoothly carry out event-related actions
Due to the inconsistencies or false copies in original design, which could confuse user. I made some updates to address these issues. To provide a transparency in UX, I added a updating copies prompt to notify user and fosters trust and keep users on track.
Replaced the original main view with a calendar-based view that using in frontend. Synchronizing with starting point of user flow, the view serves as a foundation allowing users to perform actions smoothly.
Allow administrators to help employee managing event was one of the primary goal. This gave rise to two scenarios: receiving request with minimal event details or comprehensive set details. I took that as an opportunity, designed a light weighted event creation modal to reduce the event creation time when they are dealing with less information.
To cater original user goal (Review room availability) and new user goal(Create Event), I redesigned the room reviewing module and merge it into the Event creation's user flow. By using progressive disclosure to integrate it into, not only can avoid adding complexity, but we can also ensure that entire event creating process aligns well with the frontend.
The more input fields and options, the more negative impact to users' cognitive load and reading speed. Unlike the complex configurations commonly seen in enterprise products, the options for creating event are easy to communicate as symbol.
Therefore, I asked my Design Manager if I could make a modification on existing component in our Design System, and he agreed.
Once the event has created, it will display as a tag in the day/month view. Users can interact with the tag by clicking on them to perform actions such as editing, removing, downloading attachments.
In the original design, accessing event details was displayed in a new page. When users view different event details, they would experience a sense of disconnect in the workflow.
To solve the problem, I utilize Popover component to display event details, enabling users to interact various events swiftly and smoothly .
When multiple event organizers are selected, it can result in displaying many events on same day, which poses a challenge in displaying events in a day. To solve the problem, I have implemented a collapse and expand feature to hide tags beyond the display limit and show as a numeric count.
According to research, the event duration and name are crucial for events scanning. Therefore, developing a visual system for Tags can greatly improve the recognizability.
To further ensure administrators identifying targeted event at a glance while selecting a certain number of employees, I developed an advance tags style.
After addressing the readability issue, I realized that displaying events without reasonable order can significantly impacted the user experience in finding events within specific time frames. To ensure a logical display, I standardized the display order regards to time.
When I was assigned this project, I was filled with excitement. Throughout the year, I had been actively involved in hot fixes, revamps, and other tasks related to this product. However, the Event Module was uncharted territory for me. It is worth mentioning that my Design Manager entrusted me with this project, showcased his trust in my abilities. Conversely, I also experienced a sense of insecurities due to my limited understanding of this module and the extensive changes it entailed. Nonetheless, the project was completed smoothly within the estimated timeline.
Following this project, I came to realize that these insecurities originated from my lack of self-confidence. My colleagues often advised me to have more confident in my abilities. Since this project, I started to have more confidence in my abilities, which led to smoother and successful in my subsequent works.
The initial design requirements assigned by the Product Team were very brief, resulting in an unclear design scope. The design difficulty and workload depend on the number of functionalities to be cater, as well as the extensibility of the existing design. Without product documents and a clear list of missing functions, it poses a challenge in ensuring that all the necessary missing functions can be synchronized across different platforms, which in turn affects the accurate estimation of the project timeline.
Despite these challenges, I was able to find a quick solution to define the design scope and managed the project within the estimated time.
In the past, I would prioritize using components from the Design System as much as possible to maintain product consistency. In this project, I realized that making minor modifications to existing UI components could greatly enhance the user experience. I proposed a new UI components to improve the design quality, which was approved by the Design Manager. After that, I understood that it is okay to challenge the norms when striving for excellence.