About Origo
Origo, a web-based case management database, provides corporate brand protection (BP) teams with a system that supports their everyday operations. Origo aims to be a useful and efficient tool for owners of intellectual property and BP teams who have a big desire to streamline the operations of case management, reporting, and data analysis of anti-counterfeiting activities.
Challenges on UX, enhance usability and ensure the efficiency of operation
Origo is expanding the service arrangement, improving the service quality while taking more stakeholders into the account. The big challenge is to build up friendly usability and improve the efficiency for every stakeholder in every operation process point and reduce the duplication in the database while adding new cases. At the same time, new functions can be well integrated into the use process, providing better management methods.
My Role
Lead end-end design to ensure the adoption of the human-centered design approach. Uplift the usability of the product through a compelling UX/UI.
Lead user research, leverage user insights to inform the design decisions and product strategy.
I worked closely with the PO (PM), the engineering team, and other designers to ensure alignment with a cross-function team.
Desperate to significantly improved user experience and satisfaction from the new look
Origo, developed by DH Anticounterfeit years ago, had significant install bases. Although DH Anticounterfeit had added the most required features to Origo and there was still a high usage of the application, in order to achieve their future vision and offer a seamless, user-friendly experience, we needed a way to deprecate the old version and seamlessly migrate it’s users to the full new version of Origo.
After diving deeper into the various states of the Origo on the web, I found the existing design was overwhelming – providing a mass of information without clear hierarchies and structure. More specifically, the design pattern used to indicate the various requirements were unclear.
Creating a new structure and design system
After several rounds of feedback from stakeholders, I proposed a new structure of the application which includes both interactions from internal BP users and their external partners.
The new structure ensured 2 main things. First, users should experience the least “clicks”. Second, the users should be guided during the process but at the same time also keep the flexibility.
Based on the main structure, I designed several patterns and created a simple design system to improve UI consistency and quality, make the design and development process more efficient and focused. By using it, the hierarchies between different types of information could be clearly read and understood. Users can quickly catch the most important information or search for their required information. Developers also used it as a shared vocabulary, guidance.
A dynamic mode of design management
As the project progresses, the design system is still growing. With more upcoming requirements, new patterns are also required and designed. Several aesthetic compromises to the design system happened because of visual design conflicts between functions. This also leads me that always regularly look back during the management of the design system, patterns as well as the entire structure, rather than only concentrating on running sprints.
Visual design follows the principles and values of consistency and responsiveness.
In consideration of responsive design, use card design as the base for the visual patterns. It maintains a clear structure while retaining flexibility. For some screens, users are able to simply move the cards to rearrange the screen to better fit their individual operations.
Incorporated feedback from several rounds of UX, PM, Legal reviews, a template for the Origo report delivers a consistent brand experience with a modern professional look.
Rollout & Impact
With the new design, the average clicks to achieve major tasks are significantly deducted. The usability and efficiency are both improved. The flow of adding new cases was optimized with the new design which had continuously gained very positive feedback from users. Furthermore, with the optimized flow, the duplication in the database is abundantly avoided. In comparison with the old design, the new UI has prominently uplifted the aesthetically pleasing of the users.
The new Origo will start to replace the old version by the end of 2020. It enhanced the performance, reduced technical debt, and contained more required features. By the beta version of the new design, Origo successfully expanded its customer base.
