GCC PMO Maturity Index
About the project
Overview:
The GCC PMO index is a web application showing data based on self-assessments done by the targeted PMO entities in GCC via the Digital Trust Manager. We have created a version of self-assessment tool with features specific to Project Management Offices.
My Role:
UI/UX design, Front-end development, Application Development Management
Idea
We conducted series of meetings with our client and gathered enough information on what they were trying to achieve.
The goal was to promote the usage of the Digital Trust Manager (a self-assessment platform) and use that data to create a compelling website to view informative insights into how PMO departments in the GCC region stand with regards to their level of maturity.
I then created a user-flow document and a sitemap to present how different sections of information can be accessed.
Wireframes
The idea of the design was based on the collected demographic information of our target users.
Corporate, simple, minimalist yet engaging, intuitive and informative. Based on these descriptions of how the final product should be, I have designed a set of wireframes them and presented different concepts to the stakeholders.
Designs
Prototype testing
I have created the prototypes using Adobe XD and we tested our designs with the QAs from our team and users assigned by our client, documenting their verbal and nonverbal feedback.
Design Iterations
Based on the testing results and feedback from our test users, we have done changes to the design prior to delivering final high-fidelity prototype.
Responsive design
Though the application was intended for desktop users, the designs were based on an approach with full consideration to mobile and tablet users.
The application is fully responsive and adapts to any device. The carousel of images displayed in the desktop version was hidden in both tablet and mobile to maximize what is visible in the view port and reduce page weight. The navigation is also moved to the top as a burger menu to reduce clutter and have the user focused on the content.
Custom components
We have used a minimum number of components to keep the visuals standard and minimal. I have created custom reusable components using JavaScript, HTML and CSS and created the page templates incorporating these custom components. This approach saved a lot of time for the developers.
Pull out menu
Animated numbers
Bar charts with animated digits
Interactive charts
Features
Comparative data
The GCC PMO Maturity Index is publicly available but users who have done the assessment can login to the Digital Trust Manager and access additional sections showing their organisation’s data compared with results from the rest of the PMO entities.
Business insights
This sections shows top items of a particular subject or criteria based on the responses of all PMOs who did the assessment.
For example, the demo video on the left shows the top 3 reasons for project delays and failures with bar charts displaying percentage.
Maturity index overview
The maturity index overview section shows the average maturity index of all participating entities drilled down by country, industry, organisation size and type of Project Management Office.
Organisational overview
This section highlights data from an organisational standpoint. Maturity index grouped by the different types of organisations are presented using a combination of a bar and line chart where the bars show the average index and the line showing the number of PMOs for each type of organisation.
Other groups available are by PMO Domain and by how the PMO department is placed within the organisation (i.e. a standalone department, as part of another department or integrated with other units.).
Assessment areas
Digital Trust Manager offers assessments in different areas of the business. This section highlights the average maturity index per area across all the organisations that have done the assessment.
Arabic version
Our target users are mostly arabic speakers and so it was very important for the application to render smoothly and correctly in right to left direction.
The advantage of a single page application is the whole site is only loaded once. We have used that advantage when we implemented the language switch and unlike other implementation of this feature, the page does not reload when switching from one language to the other giving a sleeker experience.
Downloadable report
A customized assessment report can be downloaded from the self-assessment tool that shows levels of maturity in detail and provide recommendations for improvement.
Application Development Management
For this project, I have worked with 3 of our developers and a data analyst. Our data analyst was responsible for crafting the queries required to generate the data presented in the application.
Agile Methodology
To track the progress of deliverables we followed the Scrumban methodology where we combined the rituals of Scrum (sprint planning, daily standups, reviews and retrospectives) while viewing the stories and tasks from Azure DevOps’ kanban board where we used cards to visually represent the stories and move the cards through their respective stages in the board.