Category:
Role:
UI Designer
Position:
Full-time employee
Date:
November, 2018 – current
Industry:
SaaS, Fintech
Live Demo:
app.procurementexpress.com
Summary
I’ve served Procurementexpress.com for about 3 years as a UI designer.
ProcurementExpress.com provides a solution to cut costs with purchasing apps by enabling the teams to seamlessly create, approve and manage purchase orders linked to budgets. Eliminate paper and spreadsheets from purchasing process. The application is based on both web and mobile platforms.
Outcome
- 150% increase in purchase order creation.
- More than 110% increase in NPS (Net Promoter Score).
- Created application-wide design system and components library for scalability and consistency.
Tools Used
Adobe XD
For wireframes, mock ups and prototypes
GitHub
For Project management using Kanban
Slack
For team communication
Google Meet
For daily standup and all-hands meetings
Adobe Photoshop
For graphic designs and artwork
Problem Statement
Low NPS and poor user experience
The old app was designed contrary to UCD concepts (user-centered design) and was based on personal hunch and preferences which lead to low NPS (<25) and poor user experience.
Elements and components were against the brand guidelines
Standard Foundation framework elements and components stylings were being used which weren’t aligned with the company’s brand guidelines.
The web app was inconsistent
The web app was inconsistent and not pixel-perfect—the QA team listed around 200 tickets for non-compliance to the pixel-perfect regime.
Solution (success goal)
To enhance the user experience and NPS greater than 40
The goal was to shift the focus from a biased mindset to a user-centered mindset which would subsequently increase the NPS and also the user satisfaction.
Having a design system and components library
For brand consistency and design scalability, the goal was set to create a design system and components library to use across the web app.
To make the whole app pixel-perfect and consistent
Other than creating the design system and components library, it was decided to create an SOP document to test the application on each development phase during the sprint to eliminate the pixel-perfect issues in production.
Design Process
Following is the step-by-step representation of the company’s internal design process.
Click to expand the title to find out more about each step.
Step 1 - User Story/Ticket on GitHub
For design iteration, an old feature update, or a new feature, the ticket/user story is created on GitHub. Each ticket had specifications from a product manager to start with.
Once the ticket is shifted to the To Do column for the release sprint in our backlog grooming meeting, it’s time to start the research part.
Step 2 - Research/Competitive Analysis etc.
If I was to design for a new product feature then I went for different competitors’ products for a similar feature and look for the gap or even how they are doing that.
For the feature upgrade or enhancement, I mostly conducted surveys to find out the frictions in the app or how we can improve that.
Also, Google analytics was used to find out different KPIs.
Step 3 - Sketches/Wireframing, Lo-fi mock-ups & Iterations
After a research and competitive analysis, the next step was to create some rough sketches, wireframes, or even lo-fi mock-ups and present them to the stakeholders and users.
Since this is an iterative process therefore it took me multiple iterations to find a few winner ideas through idea validation from the users to move forward with hi-fi prototypes.
Step 4 - Hi-Fi prototypes & User Testing
After the idea validation from the previous step, this was the time to move forward with hi-fi interactive prototypes.
These prototypes (sometimes 2-3 different ideas) were created into Adobe XD and once again presented to the users and stakeholders.
In a case of two winner designs. A/B testing was performed.
Once the winner design was found, now it was the time for a developer hand-off.
Step 5 - Design Hand-Off To Developers
Since I was using Adobe XD here therefore the design hand-off to the front-end developer was a charm.
All the placements, stylings and assets were easily exportable from the design itself.
Step 6 - Testing The UI Once The Devs Labelled it ‘Ready For Review’
As we were using the Kanban board, there was a column ‘Ready For Review’ in it. This was to put all the tickets/user stories which were completed by devs and were ready for review.
This was the time for me as well as for the QA engineers so test the UI and all the functionalities as per the feature specs.
Once everything seemed to be fine, it was marked as ‘Ready For Production’. That means it is ready to be released.
Real-life Screen Designs
RFQ screen on iMac
Company Settings on iMac
ProcurementExpress.com UI Design
Budget dashboard on notebook
Wireframe to hi-fi mockup
The following comparison slider gives a better idea of what before and after (wireframe to hi-fi mockup) looked like.
Slide the center icon to the left or right to compare the initial and final designs.
Outcome/Impact
150% increase in purchase orders creation
By keeping the user in focus, and through continuous feedback, iterations and testing, from around daily 1500 purchase orders creation through the system to more than 3000 purchase orders creation was observed which makes around 150% increase all together.
More than 100% increase in NPS
To measure customer satisfaction and validate the ideas, I used Maze’s survey tool and conducted user tests with 5 users of ProcurementExpress.com for purchase orders which is the most used feature.
Created a well-crafted design system and components library
As per the above goal, the design system was created from scratch in Adobe XD and components library was used to make the design process scalable.
Created the SOP document
Apart from creating the design system, the SOP document was also been published to test the web app development at each stage of the sprint.
Key takeaways and what I learned through this project?
Since this was an in-house project therefore trial and test were an integral part of each step.
Keeping stakeholders onboard on each iteration and presenting my idea was always important and helpful. Most of the time our internal feedbacks were different from the users and this is where user testing and validation come into play.
Since I am a hardcore UI designer but basic user testing and research helped me a lot in aligning my designs as per users’ needs. Now I am slowly transitioning myself to UX as well therefore I am learning more about it as well as taking the course Google UX Design Professional Certificate to properly learn all the traits of a good UX designer.
Visit website