OA System

Our OA system helps in optimizing and automating existing office procedures, including task management and punch in/out system.  Especially, it is based on WeChat mini program, which means, it saves your mobile storage without any downloading.

01. Brief​


Office automation (OA) is the daily operation and management oriented to the organization. It is the most frequently used application system for employees and managers. Our OA system is specially designed for small and micro enterprises. The main functions include task management, employee management, and clock-in system.


Competitor Analysis - Product Demand - Information Architecture - Interaction Design - UI Design - Development

02. Target Users


Our target users are small and micro-enterprises. Their working process is not as complicated as that of huge enterprises. They have fewer employees and spend less money on office management. Based on the main demands of our target users, we chose WeChat mini program as our platform, which costs less in development than mobile App. 




Key Roles  

Design research
Competitor analysis

Information Architecture
Interaction, UI design


Group Project

Zhiping Meng

Shan Wang

Rita Lei

Yang Yang

Lawrenchi Duan

Yang Yu

Yang Zhao

Donglin Li


2018 Dec



3 months








03. Competitor Analysis

The most popular Office management mobile Apps in China are DingTalk and Enterprise WeChat. In order to get a closer understanding of their target users, main functions and visual layout, I did the competitor analysis.

Based on the analysis, it is clear that the common functions of these two Apps are Messages, Punch In/Out, Approvals, Report, Announcement, and Contacts. One difference is that DingTalk uses a grid layout, while Enterprise WeChat uses list layout. Another is that DingTalk has more work applications than Enterprise WeChat, which means, DingTalk offers various functions for users, while Enterprise WeChat focuses core functions with less distraction. Moreover, DingTalk has one more module, "DING", which is the calendar function. It helps users to add tasks to their schedule.

04. Information Architecture

Learning from our competitors and simplifying their functions, we emphasize our core functions such as attendance and approvals to meet our target users' needs. Below is our information architecture.

05. Employee Workflow


Then, I drew the employer workflow to clarify different actions, stages, status, and results.

OA Worflow 2.png
06. Interaction & UI Design


Based on the Information architecture and user workflow, I finished the Interaction design and user interface design. 

Attendance System

The attendance system offers users Punch In/Out function, which tracks users' working time and presents their attendance. Also, there is attendance history where they can check their abnormal attendance.

Encouragement System

Based on employers' attendance, they'll get a full attendance medal or an abnormal attendance alert.

Task Management

The Noticeboard module shows the company's announcements and the tasks superiors give to employers.

The Schedule module allows employers to add their own tasks, sort and manage tasks easily.


Employers who need to ask for leave or claim expenses can go to Approvals module, where they can make an application and get permission from their employers.

This is the employers' interface, showing the process of the applications: Who is processing the application? How does the application come out?  Is it approved or rejected? What's the reason for rejection?


If the application is being processed slowly, the applier can send a reminder to the employee by pressing the "Remind" button. As a result, the employee will see the urgent application with an "Urgent" tag beside.

This is the employees' interface, listing different types of applications from employers. Employees can approve or reject the applications, and explain why the applications are rejected.

There are various request form templates. For example, below is the process of asking for leave. 

Here is the Contacts module to cc applications or approvals. Below is the process of asking for business trip. 

As you can see here is a question mark icon button, which shows the expense policy. 

In the Policy Section,

here is a list if various policy. Users can view the detailed information.

In the Me Section,

here is the business card of the user and the contacts of the colleagues.

07. Iteration
Here is the iteration of the previous versions.
1.0  (Oct 9, 2018)
2.0 (Oct 16, 2018)
3.0 (Nov 1, 2018)
4.0 (Dec 27, 2018)

© 2020 Rita Lei 

🌝禁转   🌚转究   🌓商合 13880302956

Rita Lei 无生无 LOGO Copy.png

Rita Lei

UX  &  UI