Designing and Developing Feasible and Efficient Client-tailored Human Resource ERP Add-on Features

I cannot disclose the details of the features we developed, such as design, specification, etc because of NDA. In this case study, I talk about my accomplishments from a different angle without mentioning the sensitive information. All sample images were created by me to communicate my points and are unrelated to the actual company's assets.

Our development process was divided into the design phase, where feature specifications and the interface design are decided, and the development phase. The consultant was in charge of the design phase, and the developers were responsible for the development phase. We mainly used spreadsheets to manage the specifications.

Complicated error/exception handling & conditional branches

Numerous information items

Many user roles and flow-steps

In our enterprise add-on feature development, we faced complex requirements due to multiple conditional branches, numerous information items, and user roles to manage.

We used spreadsheets to manage specifications, which is common practice in Japan. However, spreadsheets lack the clarity needed to convey screen designs and user flows. This often led to misunderstandings between consultants and developers regarding the client's requirements and specifications. In addition, clients sometimes found that the developed features did not align with their expectations.

As we used a component library for frontend development, the development difficulty was significantly influenced by the components available in the library. From a technical standpoint, developers were able to suggest ideas to improve both the feasibility of features and the user experience. However, since coding came later in the process, it was challenging to make changes to the specifications at that stage, making it difficult to implement those improvements.

Our team lacked official designers, so we couldn't simply replicate the design thinking process as outlined in textbooks. Instead, we had to adapt the process to fit our unique situation and ensure it was practical and executable for our team.

Here is the new development process. The major change was adding the step to sort out the user flow using the visual diagram tool, create high-fidelity mockups using Figma, and have opportunities to discuss the design among the team including developers and consultants together.

In the new development process, we replaced the spreadsheet-based wireframes with the Figma mockups. We chose Figma because it is easy to learn and use for non-designers and is an industry standard tool.

Also, we decided to visualize the users' goals and requirements using the workflow chart to help the team members understand them. It also helped consultants make sure they understood the clients' requirements correctly.

We had to manage a highly complex HR workflow, so using Figma mockups alone wasn't sufficient to fully describe how the features should work. That is why we also created a specification document that mapped the client's requirements to the detailed functionality of our add-on features in a text-based format. This approach is similar to user story mapping.

To leverage the developers' expertise in feature design, we introduced a step to discuss the features with both consultants and developers before showing the prototypes & discussing them with clients. This collaborative approach ensured that technical insights were incorporated early in the process, enhancing the overall design and feasibility of the features.

I considered the way to make the execution of the new design process as seamless as possible even without designers.

Refer to Material Design

Since our team did not have designers and wanted to learn and follow the best practices of the industry, we referred to Material Design. This also helped us save resources to build a design system on our own.

Use UI kit and components

To make design easier, we used the UI kit from the component library, which matched what we could develop, so it helped us design feasible features. We also set up Figma components.

Built introductory documents on basic of design & Figma

I built the introductory documents to teach non-designers the basics of UX design and the list of resources.

We conducted the pilot testing of our new development process by designing a few new features in the client project. As a result, we found that it can reduce the cost of communication between software developers and consultants by at least 30 minutes per ticket.