Quality Connections’ legacy site was based on an open-source learning platform, which had been configured by another vendor to fit the program’s needs. This solution supported many of their basic features but ultimately contributed to a sprawling site that was difficult to navigate and often led to dead ends. After receiving client feedback that the user experience was confusing, it became clear to NHPCO that the Quality Connections program had outgrown its first home and was ready for a custom application all its own.
Before Quoin started the development of the new Quality Connections web platform, we spent time talking with the NHPCO team to better understand their needs and expectations for an improved user experience.
When it came to an improved user experience, NHPCO’s top goals included:
- A distinctive design aligned with NHPCO’s branding
- The ability for participants to visualize progress automatically and clearly in the program as tasks are completed
- Creation of a user-friendly Admin dashboard that incorporates more efficient program reporting, content changes, and other administrative tools
Once these goals and expectations were established, our team got to work. We started by looking at the program and thinking “what could be done design-wise to stay within the current site design while giving it a ‘fresher’ look for users as they proceed through the program?”
Useful Visualizations: Activity Pillars & Progress Rings
The workflow for the Quality Connections program is built around the four Activity Pillars, each of which contains a set of course activities designed to promote education, practical application of learned skills, performance measurement, and innovation. Participants must complete a specified number of activities from each Pillar in order to graduate the Quality Connections program. Therefore, tracking course progress and identifying remaining gaps in each Pillar is an extremely important facet of the user experience.
The previous site utilized a set of colors associated with each Pillar, which we decided to carry over into our new design to enhance users’ feelings of site continuity and familiarity. We also maintained the previous site’s visual iconography for tracking progress: the Progress Rings, whose outer orbitals reflect the percentage of completion of each Pillar.