A New Feature in Employee Education System

Instructor Salary Management

A feature significantly improves the efficiency of the users, saving employees approximately 40 hours per month.

Salary Management System

My Role

Researcher

Team

4 researchers

Project Timeline

Jan. 24th – Mar. 13, 2024 (2 months)

Methods/Tools

Heuristic Evaluation, Contextual Inquiry, Interviews, and Affinity Mapping

Background

While working as a UX/UI designer at WiAdvance Technology, I was assigned to build a new feature to enhance our parent company’s employee education system.

The current employee educational system lacks the feature of managing the salary of external instructors, leading to confusion among managers and accounting staff. This uncertainty resulted in delays in report review and instructor payment, arousing dissatisfaction among the instructors.

As a result, my goal was to add a new feature that aligned with the specific needs of all stakeholders, simplifying the process, boosting efficiency, and enhancing instructor satisfaction.

My Role

I was the sole UX/UI designer in this project and cooperated closely with a project manager, a front-end, and a back-end engineer. My job included conducting interviews, organizing data, sketching, wire-framing, and prototyping.

Adding a New Feature to the Employee Education System
Adding a New Feature to the Employee Education System

Participants

Ideal Participants

In the first sprint, I had the opportunity to conduct one-on-one meetings with the users in the early stages of the project. However, as I delved into the problem, I realized that it was more complex than I initially thought. 

Real Participants
The employee educational system consisted of 5 different types of courses, 3 types of class periods, and 3 types of salary-paying methods. Additionally,
Achieve broad agreement on user flow.

Achieved broad agreement on the user flow among stakeholders.

Storyboarding and Wireframing

During the second sprint, I had a meeting with the project manager to ensure alignment in the process and created a storyboard to visualize our plan. 

Later, I drew three lo-fi wireframes for the team to evaluate and select the most optimal layout for the feature. 

Throughout the discussion, we also considered the design following the original UI standards of the product. Meanwhile, we made sure that the information architecture was workable for engineers.

storyboarding

A storyboard visualizing our process.

Lo-fi wireframe

Three Lo-fi Wireframes

UI components Adobe XD
Follow the UI Standard of the employee education system (Adobe XD)

Prototyping and Design

During the third sprint, I began designing the hi-fi prototype for the employee educational system. Since the system already had its UI components, I focused on designing new tag components based on Ant Design, the UI framework used by our engineers. Meanwhile, I actively initiated small discussion meetings with our front-end engineer to ensure the compatibility and feasibility of the framework I was using.

Design tags for each stages.

User Testing

In the fourth sprint, we conducted three large group meetings followed by multiple UX/UI tests with users. Fortunately, only minor adjustments were needed after the tests. One of these adjustments involved hiding several columns for section officers, as they did not require that data and wanted to view the table more easily.

Outcome

During the fifth sprint, I collaborated with the engineers and provided clarification whenever they had questions. As a result, the employee educational system feature was successfully implemented and integrated into the branch, becoming one of the system’s key features.

This feature significantly improves the efficiency of the business unit, saving employees approximately 40 hours per month.

Instructor Salary Management
My Takeaways
  • First experience with an agile development team, learning to lead design within a short timeframe.
  • Gained hands-on experience in utilizing existing UI components and frameworks.
  • Successfully solved complex problems through design and technology in an organizational setting.