Program-Management Tool
Concept to MVP Ground up product design
Project Brief
The founders had a large document outlining the requirements of the tool. Our Product design team helped them crystallise these complex requirements into a comprehensive well-considered Web experience.
We started practically from scratch, and built the whole User Experience for the MVP in the first phase.
Customer
A European startup founded by very experienced Program management company. The founders were interested in productising their vast experience of Program Management, using Digital Twinning technology.
Large fintech organisations have many concurrent programs running, Each program having several projects that affect number of IT tools & systems. any Change generally affects dependent systems, & projects.
The Product creates a Digital Twin of organisation with Programs, Projects and The stakeholders, could potentially identify the inter dependencies and plan the work better to save efforts time and money.
The Design Process
- Domain & Product Concept Understanding
- Stakeholder Requirements
- User Understanding
- Competitor Analysis
- Product Concept Development
- Created Use Cases
- Created Workflows for Different Personas
- Defined IA
- Paper Sketches
- Designed User-friendly UX/UI
- Simplified Complex CRUD Flows
- Proposed Data Visualizing Ideas
- Clickable Prototyping
- Proposed Several Clean & Neat Visual Design Options
- Final UX Specifications & Design System
- Product Testing & Iteration after Development
1. Requirements & Planning
1.1. Understand Concept of the Product
Study Phase: Domain and Concept understanding
The founders had created a hefty document of unstructured requirements of the concept solution they had in mind, Our research and design team spent long several sessions of discussion with founders to understand their concept and internalise the value of the solution. Team had to study the Program management domain for complex IT systems and their dependencies and get to know the terminology used before understanding the concept.
Brainstorming the Solutions and white boarding
Some Brainstorming sessions with Customer side founders, and Technology Architect were needed to articulate the exact features to be included, design the hand offs with project management tools, defining all the facets of the Digital twin and so on.
Some white boarding sessions with the founding team enabled our designers to bounce off certain UI paradigms to map over the taxonomy of the product.
1.2. Define User Personas
We Identified 6 different personas who will collaborate with each other to together create the digital twin understand dependencies and keep monitoring effects of any Change on their own Projects or programs.
CTO
Tech Head
As the CTO, I am responsible for the overall technology strategy and direction of the company. I Provide leadership to the technology team, ensuring the development and implementation of innovative solutions. I have to balance short-term project demands with long-term strategic goals.
Pain Points
- Lack of a unified platform for long-term strategic planning and execution.
- Difficulty in Finding Inter dependencies between projects and delivery dates.
- Manage budgets, resources, and timelines of deliverables of my program, especially with lot of dependencies with other projects and systems.
Program Manager
Strategic Planner
“I am responsible for the strategic planning and execution of large-scale programs that align with the organization’s objectives. I need to collaborate with project managers, team leads, and stakeholders to ensure all projects within the program are on track.”
Pain Points
- Lack of real-time visibility into project status, dependencies, and overall progress.
- Difficulty in demonstrating the strategic value of the program to executive stakeholders.
- Program level time and
time commitments
Project Manager
Contributor
“I Manage my project with limited resources and racing against time. Any unfourseen eventualities and issues with dependent projects have effects on my deliverables. resulting in non productive efforts spent. ”
Pain Points
- Delays and obstacles in completing tasks due to resource limitations., and accessing project resources.
- Lack of autonomy in decision-making
- Difficulty in collaborating with team members, especially in remote or distributed teams.
2. Ideation & Paper Sketches
2.1 Critical User Flows
We identifies 5 workflows which will demonstrate the value of the product to the end user. In all these workflows, the ‘Happy Path’ was designed so as to identify how the batton is passed from person A to Persona B, with different approval logics and workflow logics.
User flows were crafted after a comprehensive assessment of the current proof-of-concept product, ensuring a systematic approach to understanding user interactions, needs, and navigation within the application.
Our Information Architect created a short Taxonomy document listing all the important terms the product uses, though the terms changed during the course of design, it was necessary to get on the same page when it comes to meaning of product terminology.
2.2 Paper Sketches & Whiteboarding
Concepts were iteratively developed through multiple rounds of paper sketches before jumping to the digital medium and preparing the wireframes.
3. Wireframing & Refine
3.1.Wireframes
Our Designers created several wireframes to freeze user flows, UI, interactions and it was helpful to avoid more & more Hi-fidelity iterations and a clear focus on functionality. The wireframes allowed us to visualise exactly what kind of UI elements will work in different scenarios and making sure there is consistency in the pattrns.
3.2. Zero-Code Clickable Prototype
Our UX Designers created a Finished looking Zero-Code Prototype. This prototype proved to be a tangible demo which was used by the founders to showcase and get feedback from target customers. The Clickable demo proved to be really useful because the customers could actually see the whole story unfold in front of their eyes with dummy data and the processes and sub flows which are performed by different stakeholders.
The Wizard approach of creating complex objects alike ‘Change’ or the PERT charts demostrating the dependencies on related systems visualised on timelines could bring out the real value of the product in front of the customers.
Interactive design patterns like table interactions, data filtering, status indicators, etc, were introduced to make the prototype more meaningful and relatable for different personas of users.
4. Visual Design & UX Specification
4.1 Final Hi Fidelity Screens design for the MVP
After the Clickable prototype demonstrated and discussed with prospective customers, we finalised a set of features for the MVP.
Finalising the Visual Design: Our Visual Designers created branding for the product, (which later became branding for the company as well) The Visual Designers created 4 modern visual design options complimenting the brand design guidelines. and one final visual style was finalised.
Detailed UX Specifications: The Detailed design for all the screens was created for every flow in the product. Starting from the login screens to Dashboard for every persona showing the updates and relevant metrics were designed. Finalisation of the complex patterns of multi step wizards, Table, views, filter options and interactions, and most importantly the Change creation canvas where a visual representation and creation of change was done.
Interactive design patterns like table interactions, data filtering, status indicators, etc, were introduced for enhancing the usability and ease of understanding.
4.2. Design System
Since the product had several stakeholders and interdependent workflows, Consistency was utmost important to increase the learnability of the system. OUr Design system expert created a very detailed ‘Design System’ with all the Commonly used UI patterns like Tables, filters, wizards, buttons, canvas, stepper, form fields, and Notification systems, Kan Ban board Cards like collaboration systems and so on.
The UI developers could pick from the final design system and build / customise certain UI elements to be used in the application.
Some examples of component specifications and visual style guide from the design system.
4.3. Designing for Digital Twin and Dependency
Designing for the ‘Digital Twin’ of an organisation was the highlight of the design in this project, How to create a Digital Twin was necessarily selective ‘Metadata’ of all the programs, projects , systems within the organisation was quite demanding. It is like creating a Second virtual twin for the purpose of simulating changes to identify dependencies.
Showcasing the Dependencies: The Second Challenge was Showcasing the dependencies to a granular Level.
5. Implementation & Quality Control
Design Specifications Handoff:
- Detailed design specifications provided to development team.
- Designed reusable & responsive UI components that helped developers a lot while implementing.
Recommendations for Specification Corrections:
- Co-ordinated with front-end developers to adjust HTML & CSS as per UI specs.
Identification of Bugs and Loopholes:
- Observed many UI & functionality related issues and raised those issues in JIRA and assigned to respective person to fix.
Multiple Rounds of Testing and Feedback:
- Conducted iterative testing sessions post-implementation.
- Solicited feedback from design team and relevant users.
- Implemented optimizations to make the product more lightweight and efficient.
Refinement of Design Specifications:
- Revised design specifications based on feedback and corrections.
© 2024 All Rights Reserved.