Client
Ojo (during CitizenDev)
Disciplines
UX Design Web Application
Timeline
1 month 03.2024 to 04.2024
Collaborator
Huy Tran Vu Nguyen
Deliverables
UI Design Prototypes
Tools
Figma FigJam
Ojo Project Management Platform
A [UX] C-OJO
Ojo is a platform for Palpx to manage those vendors, as well as for end-clients to view the progress of projects. Used by multiple branches, the platform consists of a customer relationship management, vendor management, and project management portal.
*Work shown is limited due to a non-disclosure agreement.
Client
Ojo (during CitizenDev)
Disciplines
UX Design Web Application
Timeline
1 month 03.2024 to 04.2024
Collaborator
Huy Tran Vu Nguyen
Deliverables
UI Design Prototypes
Tools
Figma FigJam
Ojo Project Management Platform
A [UX] C-OJO
Ojo is a platform for Palpx to manage those vendors, as well as for end-clients to view the progress of projects. Used by multiple branches, the platform consists of a customer relationship management, vendor management, and project management portal.
*Work shown is limited due to a non-disclosure agreement.
Client
Ojo (during CitizenDev)
Disciplines
UX Design Web Application
Timeline
1 month 03.2024 to 04.2024
Collaborator
Huy Tran Vu Nguyen
Deliverables
UI Design Prototypes
Tools
Figma FigJam
Ojo Project Management Platform
A [UX] C-OJO
Ojo is a platform for Palpx to manage those vendors, as well as for end-clients to view the progress of projects. Used by multiple branches, the platform consists of a customer relationship management, vendor management, and project management portal.
*Work shown is limited due to a non-disclosure agreement.
Introduction
Purposes
Ojo, a highly intricate project demanding extensive collaboration between CitizenDev's developers and designers, aims to provide users a comprehensive platform integrating CRM and project management functionalities.
Designed for B2B users overseeing multiple teams deployable across various client projects, Ojo streamlines the outsourcing process. It facilitates seamless management from initial users assignments and pipelines creation to final quotations and payment stages.
Introduction
Purposes
Ojo, a highly intricate project demanding extensive collaboration between CitizenDev's developers and designers, aims to provide users a comprehensive platform integrating CRM and project management functionalities.
Designed for B2B users overseeing multiple teams deployable across various client projects, Ojo streamlines the outsourcing process. It facilitates seamless management from initial users assignments and pipelines creation to final quotations and payment stages.
Introduction
Purposes
Ojo, a highly intricate project demanding extensive collaboration between CitizenDev's developers and designers, aims to provide users a comprehensive platform integrating CRM and project management functionalities.
Designed for B2B users overseeing multiple teams deployable across various client projects, Ojo streamlines the outsourcing process. It facilitates seamless management from initial users assignments and pipelines creation to final quotations and payment stages.
Challenges
Given the project's scale and complexity, I stumble upon numerous learning opportunities. The primary challenge involved designing an information-packed platform for users in a logical manner to avoid overwhelming them.
Challenges
Given the project's scale and complexity, I stumble upon numerous learning opportunities. The primary challenge involved designing an information-packed platform for users in a logical manner to avoid overwhelming them.
Challenges
Given the project's scale and complexity, I stumble upon numerous learning opportunities. The primary challenge involved designing an information-packed platform for users in a logical manner to avoid overwhelming them.
Question
HMW present complex project information in a clear and concise manner that avoids overwhelming users?
Question
HMW present complex project information in a clear and concise manner that avoids overwhelming users?
Question
HMW present complex project information in a clear and concise manner that avoids overwhelming users?
To tackle this challenge, the development and design teams collaborated extensively during the information architecture brainstorming sessions.
To tackle this challenge, the development and design teams collaborated extensively during the information architecture brainstorming sessions.
To tackle this challenge, the development and design teams collaborated extensively during the information architecture brainstorming sessions.
Discover
Elicitation
The elicitation process was important for us to grasp the vast capability of the platform. Through in-depth meetings with our clients, we refined the core functions, focusing on:
users management,
projects management,
clients management,
vendors management,
payments management,
quotations management.
Based on these insights, we narrowed down to two primary functionalities:
Project Management
Customer Relationship Management (CRM)
These functions work in tandem to create a powerful B2B2B platform.
Discover
Elicitation
The elicitation process was important for us to grasp the vast capability of the platform. Through in-depth meetings with our clients, we refined the core functions, focusing on:
users management,
projects management,
clients management,
vendors management,
payments management,
quotations management.
Based on these insights, we narrowed down to two primary functionalities:
Project Management
Customer Relationship Management (CRM)
These functions work in tandem to create a powerful B2B2B platform.
Discover
Elicitation
The elicitation process was important for us to grasp the vast capability of the platform. Through in-depth meetings with our clients, we refined the core functions, focusing on:
users management,
projects management,
clients management,
vendors management,
payments management,
quotations management.
Based on these insights, we narrowed down to two primary functionalities:
Project Management
Customer Relationship Management (CRM)
These functions work in tandem to create a powerful B2B2B platform.
Define
To better understand the product, I decided to draw out Model Architectures (for Developers) and Process Flows (for Designers). Due to the sheer scale of the project, I needed to streamline through these flows. This approach not only helped me and the team grasp the overall product, but also illuminated how data operates within this platform.
Define
To better understand the product, I decided to draw out Model Architectures (for Developers) and Process Flows (for Designers). Due to the sheer scale of the project, I needed to streamline through these flows. This approach not only helped me and the team grasp the overall product, but also illuminated how data operates within this platform.
Define
To better understand the product, I decided to draw out Model Architectures (for Developers) and Process Flows (for Designers). Due to the sheer scale of the project, I needed to streamline through these flows. This approach not only helped me and the team grasp the overall product, but also illuminated how data operates within this platform.
CRM Module Architecture
I simplified tasks and assigned users to those tasks to understand how they would interact with the product and ensure that I could validate the main function of the product for future design.
CRM Module Architecture
I simplified tasks and assigned users to those tasks to understand how they would interact with the product and ensure that I could validate the main function of the product for future design.
CRM Module Architecture
I simplified tasks and assigned users to those tasks to understand how they would interact with the product and ensure that I could validate the main function of the product for future design.
Admin Module Architecture
The system is proposed to be broken down into 2 different applications for easy development, data management, scalability, and security:
Admin & data management application: This module consists of all data and user management, including CRM, vendor management, admin management, etc.
External application: This module consists of a customer portal, a vendor portal, and also an admin portal to manage all projects.
This Venn diagram is a simplified version of what users can manage in Ojo.
Admin Module Architecture
The system is proposed to be broken down into 2 different applications for easy development, data management, scalability, and security:
Admin & data management application: This module consists of all data and user management, including CRM, vendor management, admin management, etc.
External application: This module consists of a customer portal, a vendor portal, and also an admin portal to manage all projects.
This Venn diagram is a simplified version of what users can manage in Ojo.
Admin Module Architecture
The system is proposed to be broken down into 2 different applications for easy development, data management, scalability, and security:
Admin & data management application: This module consists of all data and user management, including CRM, vendor management, admin management, etc.
External application: This module consists of a customer portal, a vendor portal, and also an admin portal to manage all projects.
This Venn diagram is a simplified version of what users can manage in Ojo.
Product Architecture
After deconstructing into manageable chunks, I integrated both the admin and CRM modules into a unified product architecture, culminating in a somewhat finished Ojo platform.
Product Architecture
After deconstructing into manageable chunks, I integrated both the admin and CRM modules into a unified product architecture, culminating in a somewhat finished Ojo platform.
Product Architecture
After deconstructing into manageable chunks, I integrated both the admin and CRM modules into a unified product architecture, culminating in a somewhat finished Ojo platform.
In this project, my primary focus was designing the Admin & data management application. This involved designing the internal tools Ojo employees would use to manage their projects, vendors, users, clients, etc.
Throughout the project, I worked closely with the other designer on my team to ensure consistency and harmony between the internal application I was designing and the external application they were responsible for.
In this project, my primary focus was designing the Admin & data management application. This involved designing the internal tools Ojo employees would use to manage their projects, vendors, users, clients, etc.
Throughout the project, I worked closely with the other designer on my team to ensure consistency and harmony between the internal application I was designing and the external application they were responsible for.
In this project, my primary focus was designing the Admin & data management application. This involved designing the internal tools Ojo employees would use to manage their projects, vendors, users, clients, etc.
Throughout the project, I worked closely with the other designer on my team to ensure consistency and harmony between the internal application I was designing and the external application they were responsible for.
General & CRM Process Flows
To align both the developers and myself on user flows, data flows, and to ensure the concurrent development of a functional platform, both general and CRM process flows were created. These flows, while akin to user flows, omit screen elements and action elements. Importantly, these flows serve primarily as visualizations of the application's workflows.
General & CRM Process Flows
To align both the developers and myself on user flows, data flows, and to ensure the concurrent development of a functional platform, both general and CRM process flows were created. These flows, while akin to user flows, omit screen elements and action elements. Importantly, these flows serve primarily as visualizations of the application's workflows.
General & CRM Process Flows
To align both the developers and myself on user flows, data flows, and to ensure the concurrent development of a functional platform, both general and CRM process flows were created. These flows, while akin to user flows, omit screen elements and action elements. Importantly, these flows serve primarily as visualizations of the application's workflows.
User Flows
Following the information architecture phase, I proceeded to sketch out user flows. These flows were instrumental in comprehending and defining the specific screens that would require design. Below are two illustrative examples of these user flows.
User Flows
Following the information architecture phase, I proceeded to sketch out user flows. These flows were instrumental in comprehending and defining the specific screens that would require design. Below are two illustrative examples of these user flows.
User Flows
Following the information architecture phase, I proceeded to sketch out user flows. These flows were instrumental in comprehending and defining the specific screens that would require design. Below are two illustrative examples of these user flows.
Design
Wireframes
For this information-intensive platform, our clients specifically requested a wireframing stage. This stage served to align everyone on the design's layout before proceeding to the high-fidelity stage. Therefore, I had to brainstorm wireframes for a multitude of elements, ranging from complete screens to interaction-heavy dialogs.
I utilized the Crazy 8s method to not only expedite the process but also to generate the maximum number of ideas before jumping into digital wireframing.
Design
Wireframes
For this information-intensive platform, our clients specifically requested a wireframing stage. This stage served to align everyone on the design's layout before proceeding to the high-fidelity stage. Therefore, I had to brainstorm wireframes for a multitude of elements, ranging from complete screens to interaction-heavy dialogs.
I utilized the Crazy 8s method to not only expedite the process but also to generate the maximum number of ideas before jumping into digital wireframing.
Design
Wireframes
For this information-intensive platform, our clients specifically requested a wireframing stage. This stage served to align everyone on the design's layout before proceeding to the high-fidelity stage. Therefore, I had to brainstorm wireframes for a multitude of elements, ranging from complete screens to interaction-heavy dialogs.
I utilized the Crazy 8s method to not only expedite the process but also to generate the maximum number of ideas before jumping into digital wireframing.
Hi-fi
In this phase, my primary focus was on three high-fidelity mock-ups: Branches, Projects, and Pipelines Management. These mock-ups represent key screens within the design.
Hi-fi
In this phase, my primary focus was on three high-fidelity mock-ups: Branches, Projects, and Pipelines Management. These mock-ups represent key screens within the design.
Hi-fi
In this phase, my primary focus was on three high-fidelity mock-ups: Branches, Projects, and Pipelines Management. These mock-ups represent key screens within the design.
Deliver
Handover
The handover process involved not just the developers, but also the other designer responsible for the remaining part of the application.
Before handing off our designs to the development team, the UX team collaborated to align and meticulously review the flows of both application designs, given the division of tasks. We ensured there were no discrepancies between the two designs to prevent any confusion for the developers.
Finally, we conducted a meeting to walk the developers through our design files, providing them with clarity on what to expect and where to find specific elements.
The user flows served as a guiding principle, ensuring both designs remained aligned with the user experience.
Deliver
Handover
The handover process involved not just the developers, but also the other designer responsible for the remaining part of the application.
Before handing off our designs to the development team, the UX team collaborated to align and meticulously review the flows of both application designs, given the division of tasks. We ensured there were no discrepancies between the two designs to prevent any confusion for the developers.
Finally, we conducted a meeting to walk the developers through our design files, providing them with clarity on what to expect and where to find specific elements.
The user flows served as a guiding principle, ensuring both designs remained aligned with the user experience.
Deliver
Handover
The handover process involved not just the developers, but also the other designer responsible for the remaining part of the application.
Before handing off our designs to the development team, the UX team collaborated to align and meticulously review the flows of both application designs, given the division of tasks. We ensured there were no discrepancies between the two designs to prevent any confusion for the developers.
Finally, we conducted a meeting to walk the developers through our design files, providing them with clarity on what to expect and where to find specific elements.
The user flows served as a guiding principle, ensuring both designs remained aligned with the user experience.
Features
Branches Management
The branch management feature was relatively straightforward to implement, given its similarity to typical user management features. Admins can create, view details, and edit branches directly within the platform.
Features
Branches Management
The branch management feature was relatively straightforward to implement, given its similarity to typical user management features. Admins can create, view details, and edit branches directly within the platform.
Features
Branches Management
The branch management feature was relatively straightforward to implement, given its similarity to typical user management features. Admins can create, view details, and edit branches directly within the platform.
A branch represents a project team comprising multiple users (team members) and vendors (outsourcing teams). Each branch is associated with several projects. During elicitation sessions, it became clear that the most critical information for branch management was the revenue generated.
Consequently, I prioritized data visualization to inform users about the branch's effectiveness across various projects.
A branch represents a project team comprising multiple users (team members) and vendors (outsourcing teams). Each branch is associated with several projects. During elicitation sessions, it became clear that the most critical information for branch management was the revenue generated.
Consequently, I prioritized data visualization to inform users about the branch's effectiveness across various projects.
A branch represents a project team comprising multiple users (team members) and vendors (outsourcing teams). Each branch is associated with several projects. During elicitation sessions, it became clear that the most critical information for branch management was the revenue generated.
Consequently, I prioritized data visualization to inform users about the branch's effectiveness across various projects.
To showcase data, the largest section of the branch view is dedicated to a dashboard. Additionally, within each branch's details, we present key metrics relevant to the branch, such as revenue and deals closed.
To showcase data, the largest section of the branch view is dedicated to a dashboard. Additionally, within each branch's details, we present key metrics relevant to the branch, such as revenue and deals closed.
To showcase data, the largest section of the branch view is dedicated to a dashboard. Additionally, within each branch's details, we present key metrics relevant to the branch, such as revenue and deals closed.
Project Management
As the name suggests, project management empowers users to efficiently manage their projects. However, after gaining a deeper understanding of Ojo's workflow, it became apparent that acquiring a lead was not the final step. The Ojo team still needed to pitch their ideas to the lead, implying additional stages beyond lead acquisition.
Project Management
As the name suggests, project management empowers users to efficiently manage their projects. However, after gaining a deeper understanding of Ojo's workflow, it became apparent that acquiring a lead was not the final step. The Ojo team still needed to pitch their ideas to the lead, implying additional stages beyond lead acquisition.
Project Management
As the name suggests, project management empowers users to efficiently manage their projects. However, after gaining a deeper understanding of Ojo's workflow, it became apparent that acquiring a lead was not the final step. The Ojo team still needed to pitch their ideas to the lead, implying additional stages beyond lead acquisition.
As a result, for each project's details page, I had to design a pattern resembling the pipelines management feature. This enables users to effectively manage the lead throughout the entire pitching process.
As a result, for each project's details page, I had to design a pattern resembling the pipelines management feature. This enables users to effectively manage the lead throughout the entire pitching process.
As a result, for each project's details page, I had to design a pattern resembling the pipelines management feature. This enables users to effectively manage the lead throughout the entire pitching process.
Pipelines Management
Similar to other sales management platforms, the pipeline management feature empowers users to effectively manage potential clients.
Pipelines Management
Similar to other sales management platforms, the pipeline management feature empowers users to effectively manage potential clients.
Pipelines Management
Similar to other sales management platforms, the pipeline management feature empowers users to effectively manage potential clients.
I leveraged numerous industry best practices while designing this feature, incorporating various pipeline views (Table and Kanban) and a comprehensive lead details modal. This approach ensures that users encounter familiar UX patterns, eliminating the need to learn new interfaces while using the platform.
I leveraged numerous industry best practices while designing this feature, incorporating various pipeline views (Table and Kanban) and a comprehensive lead details modal. This approach ensures that users encounter familiar UX patterns, eliminating the need to learn new interfaces while using the platform.
I leveraged numerous industry best practices while designing this feature, incorporating various pipeline views (Table and Kanban) and a comprehensive lead details modal. This approach ensures that users encounter familiar UX patterns, eliminating the need to learn new interfaces while using the platform.
Key Takeaways
Impacts
///coming-soon
Key Takeaways
Impacts
///coming-soon
Key Takeaways
Impacts
///coming-soon
Lessons Learned
///coming-soon
Lessons Learned
///coming-soon
Lessons Learned
///coming-soon