Business Process Management - Huu Thai

Insubb is a insurance company which has a large and increasing number of employees with many level positions. With each office supplies or equipments request, it requires approvals and consultation of many levels.

Traditionally, the request is done by paper-based forms; this process requires a great amount of time and effort. To save cost and increase productivity, Insubb wants to build a system which handles all requests online, assigns tasks for related individuals, and keeps track all process.

My Role
UX Designer, UI Designer
Platforms
Web App Responsive
Used Tools
Figma

Challenges

#1 The processes are complex, different, and changeable; we can’t design these processes separately. Therefore, this requires an effective way to help designs adapt to current as well as future processes.

#2 Due to a considerable number of fields and dynamic tables in each request, mobile responsiveness is quite challenging.

Design Process

01.

Kick-off Meeting

Create a shared understanding of the project’s background
Come to a mutual agreement on work methods, timeline, and scope of work to ensure everyone is on the same page

02.

Research

Get to know the client and their potential customer groups
Research similar products on the market or websites/applications having similar features
Research design trending, technical involved

03.

Brainstorm

Work closely with the client and business analysts to clarify requirements, identify pain points, and propose respective resolutions
Define sitemaps, user roles & permissions matrix, and user flows
Sketch some low-fidelity wireframes if needed and continue to research everything related

04.

Wireframing

Sketch out high-fidelity wireframes
Build simple prototypes to test user flows
Review with the stakeholders, gather their feedback and update the wireframes if needed

05.

Visual Design

Continue with a few improvements to complete the design concept
Create a style guide and a UI components library
Apply the style to the entire project and create essential icons and illustrations

Mockups are scrollable

#1
How to reduce the effort when designing for many processes

Firstly, I must understand all the processes and generalize them into a specific model. I created a generalization workflow for these processes, which includes four stages:

Input: in this step, users input data to create their requests. Because each request type requires a different form, we should create a different design for each request input form. If continuing to generalize information, we realize that almost request input forms have three sections, and we can reuse them:
- General information with a list of text fields
- Data table to input products/services information
- Attachments/Notes

Consult: the main task in this step is only to review all the data in the table and gives comments for each row if needed. To simplify, we create a rule to display tables in view mode and add a new Comment column.
Approve: although the processes require multiple-level approval, UI for all management levels is the same. To make approval sessions more convenient for managers, this step will be displayed as a popup.
Receive: this step is quite similar to the consultant step, which shows the data table and input received quantity and date after purchasing.

Insubb

Challenges