Client
PimPay
Role
UI/UX Designer
Frontend Engineer
Backend Engineer
Team
Solo project
Year
2020-2022
Brief
PIM.Admin is a back-office system that acts as the central operations hub for over 25 products. Historically, it was managed by backend developers and evolved sporadically without any established usability guidelines.
My responsibilities
The whole project has been researched, conceptualized and developed by me.
— User research: quantitative (surveys, usage statistics) and qualitative (interviews, usability evaluation)
— Prototyping, Wireframing
— UI Kit development
— Frontend development (Vue.JS 2 | Typescript)
— Backend development (PHP | Yii | PostgreSQL)
Solution
Here are the key principles I considered while crafting the solution:
— Consistency: To reduce cognitive strain, each element across all pages adheres to predictable rules, ensuring a smooth user experience.
— Backwards Compatibility: Users should have the option to revert to previous versions during the transition, particularly in stressful or urgent situations, allowing them to carry out critical tasks seamlessly.
— Responsiveness and Ease-of-use: The system must be accessible across various devices and user-friendly for newcomers, enhancing overall usability and versatility.
Given the complexity of the issue, the solution was rolled out in multiple stages to ensure effective implementation
Research and Analysis
During the initial stage of development, an extensive research was required. I conducted a company-wide survey to identify user pain points and problems. To enhance user engagement, I provided usage statistics tailored to each respondent. This strategy effectively doubled the response rate. Following this, I carried out one-on-one interviews to gather insights on tasks commonly conducted in the system and user work environment.
Concept development and goals
Based on the findings from the research, I defined a series of goals: 1. Streamline the structure by removing unused pages and services 2. Develop a library of UI components and guidelines to ensure consistency and ease of use 3. Implement a global search functionality for both pages and database items to enhance accessibility and navigation 4. Identify the most used and complex pages and redo them from the scratch.
PIM.Admin UI Kit
I crafted a UI Kit with interactive elements and guidelines attached to them. With this kit, I gave a makeover to the most crucial and complex pages, making them easier to use and navigate.
Ease of access: Universal Search
With the Universal Search, you can find anything in just 5 seconds with only 3 keystrokes: simply press the shift key twice or press the button to open the search window, paste your query (typically an ID or item title) and hit enter to access the first found item.
Rollout and final result
The rollout of such a significant change required careful planning, which was executed in four stages: 1. Presentation of the new design: Introducing the new design to the users 2. "Quiet" release: Allowing users to opt into the new design, which was initially turned off by default 3. Transition to default: Switching to the new design by default once approximately 70% of users had consciously chosen it, while still offering the option to revert to the old design 4. Support and optimization: Assisting users who preferred the old version with transitioning and resolving any issues they encountered, resulting in a final adoption rate of 90% I take immense pride in this project as it was driven by my ambition to help my colleagues. Throughout, I wore multiple hats: empathizing with users as a UX researcher, ensuring consistency as a UI designer, prioritizing versatility as a Frontend Engineer, and optimizing for speed and stability as a Backend Engineer.