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.
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 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.
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.
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.
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.
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.”
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. ”
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.
Concepts were iteratively developed through multiple rounds of paper sketches before jumping to the digital medium and preparing the 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.
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.
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.
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.
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.
Design Specifications Handoff:
Recommendations for Specification Corrections:
Identification of Bugs and Loopholes:
Multiple Rounds of Testing and Feedback:
Refinement of Design Specifications: