UX
Procurement system: A Journey from a Web-based Application to a Simplified Mobile Experience
Company
GB2BC
Time
5 months
Jan to May 2021
Team
Product Designer: Guo
Project Manager: Liang Jun
Business Analyst: Emma Tran
App Developer: Liang Jun, Steven
Tools
Adobe XD, Jira, Words
What is pocurement system?
Have you heard of a procurement system for the first time? No worries, let me explain it to you quickly.
This is an internal procurement system for the company, used to manage the amount of money spent on external procurement and employee benefits, etc. This system allows various management levels in the company to understand the related expenditures every month and year, thereby controlling the company’s cost management.
Why are we kicking this project?
Do you remember? Starting from 2020, we went through 3 years of the pandemic together. Most employees around the world began to work from home, and of course, this company and I did too. Therefore, the company asked our team to convert the complex procurement website into a mobile application. At this point, you might be confused, why can’t we use the website version while working from home? Because 90% of our users are Filipinos, and about 50% to 70% of them do not have a computer at home, but they all have at least one mobile phone. Therefore, to help the company overcome these problems, we began to research how to convert the complex web system into a mobile application with simple operations and a small screen.
My Key Contributions
- Implemented scrum in the design process. This helped our team to quickly understand the design progress, needs, and quickly study technical feasibility. Thus, engineers could start development two weeks in advance.
- Established a design system and design kit. Material design as a basis to extend the design system and design kit. This is to help engineers quickly develop the interface and verify it.
- Designed a new product from end to end.
Online meeting with overseas business analyst
Goal
Based on the team sessions, we identified the scope in phase 1 and the key user stories:
- Being able to check the team budget and; pending task at any time.
- Being able to review requirements at any time.
- Being able to process urgent requests.
Discuss the scope of the first phase with the team
Design Process
Discovery
Our main goals are to develop the app version of the internal procurement system. We held many meetings to identify project scope, objectives, technical constraints, technologies and tools that will be used in the development.
Design Iterations
We had at least 1 internal user testing every week to test a small part of the usability. It helped me to find found the issues with the design and rectify them.
Development
Due to time constraints, the development will begin at the end of the Lo-Fi design. During the development, I started visual design. Then I handed over the Hi-Fi design to the developer when the app was launched.
Rollout & Usability Testing
After we launched the app, the developer coloured the app based on my design system. Therefore, I was given time to gather client feedback, and I could focus on iterative optimisation to create a better user experience.
Research
I couldn't meet the end-user during the design process as a cooperation restriction, but I conducted my own research and analysis based on the web version and incorporated this into the application design process. As a result, I realised their use of long forms was unhelpful as user tend to lose patience. In addition, the form design was unclear so it was difficult to find the specific information.
Firstly, I conducted benchmarking on how others tackle dense information on a page.
Information Structure
Secondly, I organized the information structure. I listed down all the section and arranged them with my team. It helped us to see the big picture easily and clearly.
Deconstructing the page & Tab
Thirdly, I proposed two recommendations to the team:
- A: List item to go to each section.
- Being able to process urgent requests.
After a series of meetings, we found that the list item was not a good idea to show dense information. It was successfully shortened form, but the user couldn't see specific information quickly. Therefore, we decided to use tab bars.
Online meeting with overseas business analyst
Online meeting with overseas business analyst
Information Structure
Secondly, I organized the information structure. I listed down all the section and arranged them with my team. It helped us to see the big picture easily and clearly.
Design
Alrighty! So you've seen how I break down business problems into tasks, but we haven't really dug into what the problem is, right? So let's dive into that. And hey, don't forget, you're the business owner here!
Access data instantly
The user always needs to be able to access and update the data. Therefore I placed the dashboard and my tasks on button navigation, so they can see the data instantly.
Modified text annotation
When the user reviews the request, they can choose to update the sub-request content, then conduct the review. To prevent users from forgetting which request they have edited, it will display the text "Updated" when they revise the requested content.
Processing urgent requirement
I decided to use an urgent icon inherited from the web version to represent the urgent request. This would be a familiar option to users that had previously used the web version.
Wire-Flow
Component Library
When I designed the wireframes, I also prepared the lo-fi component library at the same time. There are 2 main reasons why this is necessary:
High Velocity Development
The business requirements pressure designers to build more, faster and better. It is the same case for developers. Therefore, when I have done with the lo-fi component library, the developer will start to prepare the widgets. It can help us with high-rapid development product.
Consistencies in Design
Without the lo-fi component library, it reduces the reuse rate of components and creates unnecessary elements. Therefore, to keep the components reusable, preparing the lo-fi component library is always necessary.
Deconstructing the Card
To meet the business requirement. I designed a highly malleable card component. The basic card includes a headline, last update date, summary text, status. However, in response to different business needs, it is flexible to add the amount and the status of the sub-order on the card.
UI Framework
We decided to use Google's established material design as it was a safer option as users are familiar with the design. As a result, even the fonts were based on their design guidelines.
What’s Next
- Complete branding design and apply colour to components
- Do UI and handover to the developer
- Lead user testing and gather user feedback for analysis
Takeaways
I was very happy to participate in this project. I worked with two engineers and one project manager, and although it was their first time developing an app and collaborating with a designer, communication was smooth and the results were positive.
However, I was disappointed that I couldn't meet the end-user during the design process due to time constraints and cooperation restrictions. We could only meet the end-user and do user testing with them when the app was is launched. Nonetheless, I was able to focus on gathering user feedback post-launch.
To conclude, I am pleased with the results from Scrum. Each task was delivered more smoothly and quickly, and it allowed my team to understand each stage of the design better.