Polygon
Streamlining and redesigning an onboarding process that engages and empowers new clients who are seeking a learning difference assessment
Who, What & Why It Matters
Polygon is a remarkable telehealth enterprise striving to provide families and students of all levels struggling with a learning difference the clarity and full range of tools they need to thrive, from diagnosis to support. They are building the first consumer-facing end-to-end telehealth platform that enables psychologists to administer online assessments for learning differences via remote teleconference in an effort to reduce the cost and time of getting an assessment.
The Challenge
Despite their mission to make the stressful, drawn-out, and high-cost process of receiving this type of psychological evaluation more accessible and affordable, their original onboarding forms were - to put it plainly - tedious, cumbersome, and convoluted. Moreover, the process of filling out any kind of form - especially those inquiring about education, family and medical history - is probably among the least exciting and interesting things to spend one’s time doing. My team was tasked to facilitate Polygon’s goal of streamlining and automating the onboarding process for new clients and to craft an inclusive and engaging user experience.
The Process
Timeline & Output: 3 weeks to streamline the onboarding history form flow
Team: Pearl Suh, Christian Barreto Salgado
Role: UX Research, Ideation, UI Design, End-to-End Prototype & Testing
Tools: Figma, Zeplin, Photoshop, IBM Equal Access Toolkit
Skills: User Interviews, User Survey, Affinity Mapping, Task Analysis, Comparative & Competitive Analysis, Wireframing, Mid-Fidelity Mockups, A/B Testing, Usability Testing, Prototype Development, Implementation of W3C Standards
Our Guiding Questions
We steered our approach to crafting a solution to this challenge by keeping the following questions in mind:
How might we streamline the onboarding process by consolidating new client onboarding tasks and present it to users as a premium experience that educates and inspires trust?
How might we automate the administrative portion of the onboarding process?
Top Level Goals
01/Develop a scalable and automated onboarding form design to ease the flow for both the user and the administrative staff.
02/
Create a premium user experience by cultivating a welcoming and secure online environment during the onboarding process.
03/
Increase the conversion rate of users who request an evaluation as well as the speed of onboarding completion.
04/Design a fully accessible experience that considers people with learning difficulties, ESL speakers and people with low-tech proficiencies in order to build in better scalability for the full life cycle of Polygon.
On Accessible & Universal Design
Since accessibility can be an abstract and dynamic concept that can mean different things in different contexts, our team became immersed in the user research by researching universal design best practices, studying the specific user needs of those with various learning differences, and familiarizing ourselves with the international accessibility web standards established by the World Wide Web Consortium (W3C).
What became clear throughout our research is that crafting universal designs doesn’t need to be complicated. Basically the less users have to think about the interface or design, the more they can focus on accomplishing their goal. Distilling what we already know about UX design best practices and assimilating that with accessibility guidelines, our design framework would encompass the following pillars:
Simple Design
Avoid visual clutter such as long blocks of text, redundant links, and meaningless flourishes that slow users down and overwhelm them.
Design Content For Easy Comprehension
Develop clear and concise content that minimizes extraneous cognitive load - processing that takes up mental resources, but doesn't actually help users understand the content. This also means making the content readable by employing clean typography with plenty of leading.
Use Storytelling & Interaction
Most people retain information through hands-on experience. Storytelling makes content relatable and engaging - especially for users with a learning difference such as dyslexia or Attention Deficit Hyperactivity Disorder (ADHD).
Use Visuals Appropriately
Visualisations help to convey important information - it engages the user and explains complex text. While animations are often used to maintain the interest in a lot of users, they must be implemented with caution as they can pose as a distraction for some users. For instance, too much sensory stimulation may cause autistic and dyslexic users to leave a website.
Provide Orientation Cues & Alternative Ways to Navigate
Don’t rely on the user’s memory. Providing multiple means of navigation such as a navigation bar, search box, bread-crumb trails, or progress bars make websites much easier to use for all users.
So why is accessible and universal design important?
The web is an increasingly important resource in many aspects of life including education, healthcare and employment. As such it is essential that websites, tools, and technologies are made so that everyone can seamlessly and independently perceive, understand, interact with, and navigate the web. In order to do this, inclusive, universal, and accessible design principles should be fundamental parts of the framework that furnishes the development of the web and technology, supporting the social inclusion for people with disabilities as well as older people, people who are not technologically proficient, and people whose primary language is not English.
Taking into account Polygon’s goals and objectives as well as the fact that their target user base are those who may have a learning difference, intentionally embedding universal and accessible design choices into our redesign of the history form onboarding process was of high priority for our team. Successfully doing so would facilitate Polygon’s goal of establishing relationships with new clients based on trust, transparency, respect and compassion.
Employing the Accessibility Lens
Equipped with a foundational understanding of accessible and universal design standards, we visually analyzed Polygon’s current onboarding flow for accessibility purposes. After having critically examined the onboarding forms through this lens, the cognitive overload - a situation in which the required amount of information to complete a task is too much to be mentally processed easily by a user - was unmissable.
The Equal Access Toolkit
During the early phases of our research, we came across an incredibly valuable resource - IBM’s Equal Access Toolkit, which is an open source tool that utilizes IBM's accessibility rule engine and detects accessibility issues for web pages and web applications.
We utilized this web browser extension to assess the accessibility of Polygon’s current onboarding forms and used the scan report generated by IBM’s toolkit to identify specifically what wasn’t working and suggestions for fixes. The most repeated violations as indicated in the scan report included text contrast issues and lack of code attributes to visual labels, violations which can present challenges to users with visual, physical, or cognitive impairments, especially those using assistive technology.
Usability Testing & User Interviews
To help us uncover specific problems in the design of Polygon’s original onboarding process as well as discover opportunities to improve the design and learn about users’ preferences and behaviors, we had five lovely participants test the usability of the onboarding process. We also followed up each usability test with a brief interview in order to gain insights about what users think about the current design of Polygon’s onboarding flow and to deepen our understanding of their specific needs and capabilities when navigating the flow.
The primary patterns that surfaced after affinity diagramming signaled the following patterns:
1. REDUNDANCIES:
Users value their time and want to avoid redundancies as much as possible, especially during what has potentially been a stressful, drawn-out process up to the point they have reached out to Polygon for an evaluation.
Repetitive Questions - Our usability test participants communicated that some questions felt very redundant. Some information, such as name and contact information, was repeatedly asked for on each of the different onboarding forms.
Long-form answer inputs - The original onboarding forms contained a substantial number of questions that required long-form answer inputs - specifically 57 out of the 248 questions asked on the original onboarding forms. Our users expressed that they would have preferred if many questions that required that they type in long responses were replaced with more easily answerable question formats, such as check boxes or dropdown menu options for responses.
2. CONFUSION:
As informed by direct user feedback, Polygon’s original onboarding forms did not provide users with seamless, quick and painless interactions, largely due to the lack of usable, consistent and comprehensible form questions and UI commands.
Inconsistent formatting and information architecture - Our usability test participants repeatedly conveyed that they felt that there was a lack of consistency between table formats from one section to the next. They also expressed frustration with being granted limited response options and not having all the necessary instructions to properly fill out the forms.
Problematic UI elements - Not only did users exhibit or communicate having difficulty with some of clickable UI elements, but again expressed frustration for not being allowed to correct mistakes - For instance, once a radio button response was selected, it could not be unselected and changed.
Unfamiliar terms and confusing questions - Test participants also shared that they found certain terminology unfamiliar and confusing, and needed to open up an additional browser tab to clarify the meaning of those terms.
3. FATIGUE:
The culmination of redundancies, confusing terminology, inconsistent form structure, extraneous form length in addition to the seriousness of the information being shared can result in severe user fatigue - a symptom of increased user effort and major cognitive overload.
Lots of long tables - Throughout the original history form, there are multiple long tables of questions and lots of questions to be typed in which can make an already urgent and stressful process feel daunting.
Length of form - Though the original onboarding form suggests that the form would take approximately 30 minutes to complete, our participants took an average of 45 minutes to an hour to complete the onboarding flow to receive an evaluation for their hypothetical children. The multiple audible long sighs from our users also signaled a nonverbal indication of fatigue. Having excessive, unnecessary, and repetitive fields require more effort on the part of the user, which can lead to form abandonment and decreased conversion rates.
When determining where our team could streamline the onboarding flow and design a form that elevated the overall user experience, we needed to be sure to be mindful of anything in the design that require extra effort from our users - whether that means reading text, remembering information, or making a decision - and try to look for alternatives that eliminate arduous fields and tasks in order to leave more mental resources for the decisions that truly are essential. In order to promote Polygon’s mission and brand identity as helpful, thoughtful and tech-savvy, crafting simple and straightforward content as well as concise and consistent actionable items was key to our design process.
System Usability Scale Score
We also had each of our interview participants rank their experience navigating the flow using the System Usability Scale (SUS) - a reliable industry standard tool for measuring the high-level subjective view of usability.
Based on research, a SUS score above a 68 would be considered above average and anything below 68 is below average. The average score based on participant responses was an indication that the usability of these online forms was a high priority and needed to be fixed.
Comparative & Competitive Analysis
In our C&C analysis, we researched web services that required extensive and personal information from the user and the design choices they made to ease the sharing of those details.
User Survey
Polygon’s original onboarding process did not give users the option to create an account. Instead new clients have a unique url emailed to them to access each of the different portions of the forms - one each for the Release of Information, Consent, Payment, Scheduling, and History form portions. Giving new clients the ability to create a user account was one part of our prospective solution to automating and streamlining the onboarding process as well as giving users a sense of security over the sensitive information they shared with Polygon. To test this hypothesis before actually incorporating it into our design solution, we conducted a survey in order to assess user attitudes and preferences about this exchange of information online as well as broaden our understanding of user feelings and behaviors concerning long online forms.
According to survey responses, users rarely complete a long form in a single setting. So we needed to incorporate design choices that keep the user engaged but also gives them the option to pause and return to complete later. Survey respondents supported our hypothesis by sharing that it was important to have quick, reliable, and secure access to important information in a single and familiar place. Participants also shared that having a user account helped to limit the possibility of miscommunication or required to-do items for a particular service.
The survey made it evident that enabling users to create an account and log in gives them a sense of security and control of the data they share. Thus, letting new Polygon clients see and control their data would help to build trust and foster transparency about what information is stored by Polygon.
We also uncovered the sentiments that users commonly have when they are required to fill out long forms. The most popular results?: boredom, restlessness, and frustration.
So in addition to making the onboarding flow more convenient and secure, we learned that our design choices needed mitigate these negative feelings, keep users engaged, and inspire feelings of trust and empowerment.
Content Mood & Tone
We created a mood board that contained inspirational elements and references for the tone and emotion that we hoped to convey in our visual and content copy design: simple, light, warm and spirited. Gonzolo Rodriguez Gaspar - the creative director whom Polygon hired to assist with the UI animation and graphic design for their website - had illustrated cute and friendly geometric characters for Polygon’s visual rebrand, which helped us shape the narrative we planned to craft for the user onboarding journey.
Feature Prioritization
To help us prioritize which features to include in our designs that would most effectively address our users’ greatest needs and frustrations, we constructed a table listing possible ideas and then ranked them as informed by our research in order to identify the most important features.
Wireframes & Key Feature Development
1.
Customization of Visual Preferences
Given that the target user base for new clients seeking out Polygon’s services are individuals who may have a learning difference, it was important that users are given an option to customize their online journey with Polygon in a way that works best for them. After creating a user account, users are prompted to indicate their visual and navigation preferences before moving forward so that they can understand and engage with the site in a way that helps to ensure their comfort and success.
2. Progress Page
Based on our research it was crucial that we not only provide a reprieve for the user between long flows of content but also to give the user a feeling of recognition for the progress made in their onboarding flow and overall journey. We also wanted to motivate users to move forward with the onboarding flow through positive reinforcement.
3. Section Preface
By including these prefaces before each new section of the history form, we aimed to provide clarity and transparency, allowing users to continuously be cued into pertinent information. Informing users of what they can expect to be asked next gives them the opportunity to prepare whatever information that is necessary to seamlessly move through the site.
4. Progress Bar
This navigational element provides users with a simple, anchored, and consistent way to orient themselves within the overall flow and to anticipate how many more steps are necessary to reach the finish line. The functionality of the progress bar and the flow of content is also reinforced by the addition of visual icons and descriptive text for each main part of the flow.
5. Popup Tip
Based on our research, a situation may arise when a user may come across an unfamiliar medical word or a term that may have different meanings depending on the context. In order to provide clarity, we chose to include popup tips - UI elements that are activated upon a touch or click to give helpful, additional content such as descriptions or explanations for unfamiliar terms.
6. Dashboard Panel
Including access to a dashboard panel throughout the onboarding process gives users a convenient and consistent way to revisit information they have already shared as well as important communications exchanged with the Polygon team. The option to save the progress made and exit the form was integrated into the dashboard side panel, providing users with the flexibility to return to the form to complete at a later time.
A Simpler & More Approachable Onboarding Flow
Usability Testing: Round Two
As stated before, accessible design doesn’t have to be complicated. And telehealth onboarding forms can be more than a formal collection of information from the user that is visually austere and tedious and uninspired in tone. By simplifying the onboarding process and instilling the copy and visual design with a buoyant spirit and informative transparency, we were able to craft a user experience that’s welcoming and painless.
The average time of history completion for our redesigned prototype was less than 15 minutes, a significant decrease compared to the average time it took to complete the original version of the forms.
And as the time of task completion dropped, the average rating that our test participants gave their experiences of our redesign substantially increased.
Design Annotations & Documentation
In order to ensure that we clearly and succinctly explained our design rationale and proactively answered any potential questions about our redesign, we included wireframe annotations as well as documentation that communicates the results and reasoning of our work especially as it pertains to specific W3C Web Content Accessibility Guidelines (WCAG) standards and user research on cognitive differences in our deliverables to Polygon. As Polygon continues to develop and expand its work when our designs are handed off to their development team, we hope that our research appendix and wireframe annotations will effectively inform Polygon of universal design best practices as well as facilitate their users’ ability to confidently navigate and interact with their website.
Retrospective & Recommendations
In retrospect it would have been ideal to have been equipped with deeper and more rigorous insights concerning universal design principles and best practices prior to taking on this challenge, so that we could have hit the ground running with redesigning the onboarding portion for Polygon’s new clients. Nonetheless, this was an immensely enriching and rewarding opportunity to really roll up my sleeves and dive deep into researching accessibility design standards in order to actually understand the process and increasingly critical importance of designing something truly usable for all. Moreover, because we scrupulously recorded our research, we were able to share this knowledge by handing off that documentation to the Polygon team and its creative director along with our wireframes, copy, and prototype. Still, there is so much more we would’ve liked to have completed in moving forward with this project had we been given more than 3 weeks.
01/Revisions & Prototyping
Make more of the high-priority edits to our wireframe visuals and interactive designs as advised by our user feedback.
02/User Testing
Conduct usability tests with members of the target population that Polygon is aiming to serve using the accessibility resources offered by WeCO (theweco.com) - accessibility experts who live with disabilities and help enterprises make their services and products truly usable.
03/Synthesis & Development
Collaborate closely with the development team to ensure the site is perceivable, operable, understandable, and robust on both the front and backends of the design process and attend to any potential engineering constraints
04/Account Dashboard Development
Design and test different iterations of a user account dashboard that gives users the most simple and convenient way to review information such as documents shared with Polygon, communications exchanged with the assigned neuropsychologist, billing details, and upcoming appointments.