Designing and Developing Feasible and Efficient Client-tailored Human Resource ERP Add-on Features
Introducing design thinking to enterprise feature development
Context
At my previous company, I developed custom add-on features tailored to client needs for HR ERP software packages. Our features seamlessly helped clients integrate their specific HR workflows, including unique organizational structural change strategies, into the ERP system.
Problem
Our team has yet to establish a solid development process.
It was difficult to manage complex enterprise specifications and designs with spreadsheet-based wireframes. The misunderstandings led to additional development time.
We missed the opportunity to leverage the software developers' expertise, which could have made the design more feasible and straightforward.
Solution
Introduced Figma mockups.
Introduced flowcharts to visualize and map out the ideal workflow.
Created opportunities for collaboration between developers and consultants.
Outcome
Reduced approximately 30min per ticket spent on communicating specifications and increased development productivity during pilot testing.
Collaboration and discussions enabled us to improve the feasibility and simplicity of features.
Project Type
A professional side project focused on improving the development process.
Team
Frontend developers, backend developers, client-facing consultants, project managers
My Role
Software developer with a passion for design ✏️. In this project, I defined the development process with the front-end team, leveraging my UX knowledge.
Keyword
Cross-functional Collaboration
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.
We worked on the development of ERP add-on web applications to help clients seamlessly integrate our company's ERP workflow into client-specific processes. Our team was cross-functional, composed of developers, consultants, and project managers.
Developers
Implements features based on the specifications. Excels at making features simple and feasible using technical knowledge.
Consultants
Talk to clients, organize their requirements, and design features. Knowledgeable about clients' work, goals, and needs.
Project managers
Manage planning and execution of the projects. Skilled at communicating with clients and adjusting resources, schedules, and so on.
No designers
There were no official designers on our team.
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.
Typical questions developers had...
What will happen if users click this button? Which page does it take users?
Which UI components are we supposed to use? What does this shape represent in the spreadsheet?
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.
Benefits of mockups
Easy to grasp what the pages look like and create a common understanding among team and stakeholders.
Developers can understand which UI components to use.
Interaction and page to page relations are clearer, reducing the time to check them.
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.
Benefits of user flow charts
Easy to check the goals of user flow (what to achieve in the feature)
Easy to see users (user roles) in the steps
Opportunities to consider how we should handle exception and errors
Clarify input/output information involved in the steps
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.
Benefits of detail specification documents
Helps the team clarify the detailed specifications such as error handling.
Mapping of requirements and specifications helps the team understand the background of design decisions.
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.
Benefits of collaboration with developers
Ability to design more simple & feasible features to solve clients’ problems as a team.
A better understanding of features for developers, resulting in less time for communication to clarify specifications.
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.
Less time was spend to check specifications
No need to change the specification during development due to feasibility issue
Clients can check the design better with mockups, being able to provide feedbacks earlier.
I would have measured the effectiveness of the new process and made further adjustments if I stayed.
Our team differed from typical design teams, and we had to address clients’ specific and detailed requirements. As a result, adopting all the frameworks and methods wasn’t feasible or necessary. Instead, we focused on prototyping and collaboration. In our pilot testing of designing a few new features using this approach, we found it still effective in achieving our goal of improving our specification communication and feature design quality to ensure feasibility.
Unfortunately, I left the company to pursue a Master’s degree soon after we defined the new development process. However, if I had stayed, I would have measured the effectiveness of the process more and made further adjustments based on team feedback.
I am curious about best practices for managing the complexity of enterprise applications.
The examples in design thinking textbooks and classrooms often involve relatively simple systems with straightforward user requirements and information architecture. This made me wonder how to apply these principles to more intricate systems such as enterprise products. In this project, we tackled the challenge of managing complexity on our own, but I'm eager to learn more about the industry's best practices for addressing these challenges.
As a UX designer, I want to pay attention to end-users' UX as well as the stakeholders' success.
When it comes to enterprise products, decisions to introduce new products are often made by higher-level stakeholders like company executives or management departments, rather than the end-users themselves. While the primary focus might be on solving their business challenges, I think it's also crucial to improve the UX of the end-users by, for example, conducting user testing with actual users using mockups to enhance usability. As a designer, I am committed to articulating the value of UX design to cross-functional teams, ensuring that both business goals and user needs are met.
These are my personal thought, and they do not reflect the views of the organization I belonged to.
Persona
We created persona based on these insights.
Journey map
We also created the journey map.
Style Guide
We made a style guide to keep the consistency of the product.