Projects
MyNeighbor - NPO
Goodkind - Indonesia
Rule Manager
Internal tool designed to streamline management of rules and regulations
Role
Lead UX Designer
Timeline
Dec 2022 - Present
(9 months ++)
Platform
Website
Team
UX Team
Product Team
Developer Team
Rule Manager Team
Context
Overview
Rule manager is a tool designed to streamline the management of rules and regulations within the financial services sector. It is govern by a dedicated team of fraud analyst to prevent fraudulent activities within financial services.
My Role
I was the lead UX designer responsible for the entire design life cycle. My responsibilities includes strategizing, conceptualizing, designing, and delivering the final design hand-offs to the developers.
Project Brief
Business value
Increasing the productivity of the rule manager tool will have a direct impact on the efficiency of creating and implementing rules; leading to a higher rate at which these rules can be generated, put into action, and decreasing fraudulent transactions.
/01+02
Empathize and Define
💼
Background research
🔍
Discovery interviews
Understanding that users were highly prioritized, we conducted 12 interviews with current users with varying jobs that utilize the legacy tool on a daily to weekly basis. Interviews were 1 hour each and focused heavily on observation as each user walked through their frequented tasks using the tool.
⚡️ Takeaways (post affinity mapping)
User flow
In an effort to refine the user experience, we constructed 7 key user flows within Figma. This visual mapping identifies and annotate areas of friction, denoting them with thumbs-down symbols to signify user pain points. Conversely, areas that were functioning smoothly were marked with thumbs-up icons, signifying their positive reception.
Building upon the existing user flow, we developed a set of recommended user flows taking into account solutions for pain point areas. These proposed flows were designed with the intent to minimize the number of steps required to accomplish tasks effectively.
/03
Ideate
💡
Understand legacy product
During the redesign of our internal legacy product, we have concentrated on improving the user experience to enhance efficiency and elevate overall usability. We acknowledge that areas such as navigation and content structure, amongst others, could benefit from improvement.
Navigation - The legacy system may have grown over time, leading to a complex menu structure and multiple layers of navigation. By simplifying and restructuring the navigation, we aim to reduce cognitive load on users, making it easier for them to find and access the features they need.
Content Structure - The existing structure may have evolved over time, leading to inconsistencies, redundancies, or a lack of logical organization. By improving the content structure, we aim to present information in a more intuitive and user-friendly manner.
Working within the design system
Currently, the legacy product does not utilizes any design system. By implementing a design system we are able to foster consistency, efficiency in development, and a strong, recognizable brand identity.
Firstly, the design system ensures consistency across the entire user interface, creating a cohesive and unified visual language. This consistency enhances the user experience by providing a predictable and familiar interface, which in turn reduces cognitive load and improves usability. Secondly, aligning with a design system promotes efficiency in development. Design systems often come with pre-defined components, styles, and guidelines that developers can readily use. Thirdly, maintaining a consistent brand identity is essential, and a design system acts as a set of guidelines that helps ensure the UI aligns with the brand's visual language.
Creating initial prototype
Recognizing the need for enhanced navigation and content structure in our legacy product, the initial prototype prioritizes overall navigation improvement as a foundational step for the entire product. For instance, the prototype addresses the redundancy issue in tab and section names, ensuring better clarity. Notably, the tab navigation is streamlined to three main tabs, focusing on the most frequently used options rather than presenting 10 different tabs. These navigation enhancements aim to significantly boost the product's overall efficiency and provide a more user-centric experience.
/03
Prototype
🖥️
High fidelity design
Building upon the first iteration, we developed a high-fidelity prototype by integrating a design system for a consistent visual identity and user interface. Simultaneously, we focused on constructing a clear content structure, optimizing information organization and user flow. This approach ensures a polished and intuitive user experience while streamlining development through the use of pre-defined design components.
Components and styling
Commencing the development of a higher fidelity design, we have initiated the incorporation of design system components and styling to uphold visual language consistency. The utilization of these design system elements is imperative for optimizing the development process, ensuring efficiency and coherence in the product's visual representation. This technical approach underscores the significance of adhering to predefined components and styles for streamlined and effective product development.
/04
Usability Testing
⚽️ - To assess product usability, we conducted a usability test employing the initial design iteration, evaluating users' ability to navigate through the product. The recruited participants were chosen from those who had initially taken part in the discovery interviews.
The usability test encompassed a range of scenarios and tasks that users might encounter during their interaction with the product. This included assessing the intuitiveness of navigation, the clarity of information presentation, and the efficiency of task completion. Through this testing process, we sought valuable insights into users' interactions, potential pain points, and areas of improvement.
⚡️ Usability testing takeaways:
Clear Navigational Improvement: Usability testing demonstrated a significant enhancement in the clarity and intuitiveness of the product's navigation. Users were able to seamlessly navigate through the system, showcasing that the implemented design changes effectively addressed previous concerns.
Positive User Feedback: Stakeholders and participants alike provided positive feedback regarding the usability improvements. Users expressed satisfaction with the streamlined navigation, indicating that the changes positively contributed to a more intuitive and user-friendly experience.
#ProjectTakeaways
Reflection
Defining requirement
I learned that having a clear requirement is crucial for the project as it allows us to provide a clear deliverables within the projected timeline. With a clear requirement, it also helps to foster efficient collaboration among teams thus enabling more times for testings and further enhancements.
Quick testing
I also learned that quick testing is essential during product development as it validates users opinion and allowing iteration of the design concepts. Immediate feedback from users help identify potential usability issues enabling fast improvements before the product becomes an issue in the long run. This iterative testing approach also ensures that the final product aligns closely with the user expectations and needs, contributing to a more effective and user-friendly design.
Designed and developed by david.riadi with 🤍 and ☕️
©2024