Holistic Measurement Platform
The main aim of the project is to enhance the current HMP website and suggest an independent website which allows users to customize the reports according to their needs and access dashboards directly from the website
Jan 2022 - Aug 2022
UX Manager
Global Sector Leads
Brand Managers
Digital Marketers
Software Developers
User Research
Design System Creation
Accessibility Evaluation
Usability Testing
Problem Statement
The app had a cluttered interface, making it difficult for users to navigate and find essential features. But the onboarding process was also causing frustration, leading to lower new user adoption rates. Therefore, improving personalization, customization, and streamlining the interface will enhance user engagement and overall experience.
Methods Followed
Secondary Research, Primary Research, Ideation, Wireframing, Design system, High-Fidelity Prototypes, Usability Testing.
TL;DR
The methods revealed key issues with graphical visualisations and navigation on the SharePoint website, including unclear graph relationships, missing labels, and lack of breadcrumbs. Insights from research and user feedback guided Wireframing, high-fidelity prototyping, and iterative testing.
Usability Testing Insights
Users praised the organisation, soothing colors, effective data visualisation, and clear insights on the dashboard.
Users found key features like report creation, type selection, and saving difficult to locate due to poor visibility and guidance.
Users recommended better button placement, clearer naming, larger fonts, and improved text hierarchy for easier navigation and readability.
Research Summary
What we did?
Secondary Research
Heuristic Evaluation
Competitive Analysis
Literature Review
Accessibility Evaluation
Primary Research
Stakeholder interviews & Surveys
Affinity Mapping
Personas & User journey mapping
Information Architecture
Prototyping & Testing
Wireframing
Design System
High-Fidelity Prototyping
Usability Testing
Major Findings and Insights
“The level of complexity of the website is too high. A simple view would be good for a quick overview.”
“I want the ability to customise the dashboard according to my ability.”
“It needs to have different levels of capabilities so if someone wants a plain view or more details that should be provided.”
“Would love to see when data telling us what we should do like quantifying the impact, what challenges they have a how they can solve them.”
Navigation Pain Points
There was no search function provided in the current website.
Additionally, the absence of breadcrumbs caused confusion to users in terms of navigation.
The current sign-in process is lengthy, requiring excessive information. Simplifying it to just email, role, region, and desired metrics could streamline access.
Usability Flaws
Users became overwhelmed with the amount of information they were provided with.
Red link buttons on the homepage caused confusion due to their alert-like appearance were noted.
The platform did not meet accessibility standards(WCAG) due to the lack of an accessibility widget.
Chart inaccuracies
The heuristic evaluation revealed issues such as unclear relationships between graphs, improper labelling, and unfamiliar metrics lacking tooltips.
Apart from these users also provided recommendations during the stakeholder interviews, which are as follows:
User Recommendations
The platform would benefit from advanced predictive analytics and enhanced data visualisation features like customisable templates and automated report generation for better insights.
Features like customisable charts, limited chart displays (1-3 at a time), and an inbuilt help chatbot could enhance HMP, inspired by tools like HubSpot and Google Analytics.
What I learned from these methods?
Secondary research revealed usability issues like unclear graphs, missing labels, and unfamiliar terms. Heuristic evaluation identified navigation problems and confusing red buttons.
Competitive analysis showed HMP lacked customer experience KPIs, accessibility features, and chart customization, with additional accessibility issues like poor contrast and missing alt text.
Stakeholder interviews and surveys provided insights into workflows and software usage, which were organized into categories like frustrations and goals, helping to shape personas and user journey maps.
Iterations and Wireframing
The initial wireframe includes key screens for two user flows, starting with sign-up screens that gather user info like ID, region, interests, desired metrics, and preferred brands. The landing page features accessibility options, followed by filters for reports.
The main dashboard displays data visualisations and date filters, with a chatbot widget at the bottom. Additional wireframe iterations by a fellow intern introduced a homepage for recent report statuses, a right navigation for business areas, and list view screens for different business sections.
User Flow
The above user flow shows how users can create a new report and a new dashboard as well.
Design System
After completing mid-fidelity wireframes, colours, typography, and components were finalised and added to the Figma design system. Colours were chosen based on contrast ratios and competitor apps like Google Analytics and Salesforce Datorama. Icons, shadow styles, logos, and data visualisation components were also incorporated.
High-Fidelity Prototyping
After incorporating all components into the design system, the high-fidelity prototype was finalised and divided into three key user flows: Viewing, Using, and Creating reports.
The Viewing Reports flow covers sign-up to accessing data and trended reports, while the Using Reports flow focuses on filtering, sharing, and exporting. The Creating Reports flow streamlines naming, selecting sources, and saving reports.
Usability Testing
After creating the high-fidelity prototype, we tested it with target users using Maze, a usability testing platform. A questionnaire and task were created, and the prototype was uploaded to Maze, allowing users to perform tasks directly integrated with Figma.
Task and Methods
Main task Given to the users was a two parter where; “1. View the acquisition report available under first party data tab. 2. Create a new report within the same dashboard and save the new report.”
Usability Metrics/Methods conducted for the testing were:
Completion metrics: Task Complete sucess rate (task performed without any errors), Fail rate.
Duration metrics: Time on task, Errors
Satisfaction: SUS (System Usability Scale)
Questions:
Before tasks:
What is your role in the organisation?
How often do you use HMP?
After the tasks:
What prevented you from completing the task?
How was your experience completing this task?
How was the language on this page?
what features do you find the most valuable and why?
Do you have any suggestions to improve the overall tasks?
Do you think the screens have any confusing/unnecessary sections/modules?
SUS (System Usability Scale)
Insights
20% average complete success rate suggests that 13% and 29% of our general user population will complete the task with no error.
69.7 for SUS score suggests that the design is fair and above average in terms of usability but there are still a lot of pain points that the users still face while using the design.
Positive insights:
Negative insights:
Suggestions:
Limitations
Early limitations for HMP included uncertainty about using a flexible software for custom report layouts versus creating a standalone website.
Ultimately, we decided on developing HMP as an independent website. Another limitation was the inability to implement all desired changes and features simultaneously, due to technical constraints on the development side.
Future Scope
The future scope for HMP includes expanding customisation options, such as enabling users to modify chart colors and graph styles for more tailored reports.
Additionally, HMP could explore new KPIs relevant to stakeholders and integrate user behaviour metrics for deeper insights. Ensuring mobile responsiveness is also a priority, focusing on compact data visualisations and a UI optimised for smaller screens.