Improving accessibility on a government program website so underrepresented groups find it easier to read and apply.

01. Overview

Context

NIDDK has a summer research program called "STEP-UP". Each year, the scientist that leads this program receives emails from high school and undergrad students asking questions about the program that the website already has answers to.

We want to reduce the number of inquiries the staff at NIDDK receives for a summer research program.

Timeline: 2 months.

Constraints: work within the NIDDK design system, content needs to follow government tone and voice.

KPIs:

  • Number of emails stakeholder receives

  • Number of applicants

What I did

  1. competitive analysis

  2. user research

  3. heuristic evaluation

  4. stakeholder presentations

  5. web design (in Axure)

02. Discovery

2.1 Competitive analysis

I analyzed 8 competitor programs on their information architecture, content strategy, and design to gauge where we are.

Among these programs, Mayo clinic stood out due to their clear and engaging copy writing, custom visuals, and big CTAs.

I presented my findings to the team and we aligned on the top "pros" that can improve STEP-UP.

Impact on final design

We rewrote the content from the students' perspective by clearly listing the benefits that matter to them the most and used easy-to-scan headings.

2.2 User research

My team and I interviewed 5 students to understand their experiences, needs, and wants with summer research programs.

We recruited 3 undergrad and 2 high school seniors. They span a range of geographies (urban, suburban, rural) and have a mix of application status. We took turns interviewing and taking notes. 

Example questions

  • When first arriving on a summer research program website, what information are you looking for first?

  • What do you need to know about the application process before applying?

  • Talk about challenges you’ve faced, missing information, or pain points in experiences you’ve had browsing summer research program websites, focusing on the informational website rather than the application process.

I summarized interview notes and wrote a report using story-telling techniques to debrief stakeholders. Here are the top 5 findings:

Impact on final design

For homepage redesign, we emphasized attractive aspects of our program that students said they liked: flexibility of the location, finance, networking opportunities, etc.

On the "what to expect" page, we numbered the steps for better scanning, and used blocks to highlight what students said they look for first in research programs: details of the program, such as dates and time commitment. 

03. Insights

3.1 User journey map

I created a user journey map to synthesize research and discovered student pain points. 

This aligns the team and stakeholders.

3.2 Idea prioritization

Based on the user journey, I brainstormed areas of opportunities that can improve each step of the students' journeys to apply to our research program. 

After consulting with PM and engineering, I placed my ideas on a prioritization chart. 

Discovery: improve SEO and social media presence. This will let more students discover us. 

  • Pro: increase the number of applicants.

  • Con: it's out of scope. We don't have the budget to maintain a social media account.

Understand: improve copywriting, information hierarchy, and reflow FAQ page into other pages.

  • Pro: users spend less time reading but have increased understanding. Decreased cognitive load. 

  • Con: we don't have a copywrite on the team. 

Compare: add photos of past mentor, researchers, participants. Have live chat feature. 

  • Pro: applicants will be more likely to apply due to having insights of past cohorts. Having a live chat will definitely decrease inquiries sent to emails. 

  • Con: we don't have well-taken photos from past cohorts. For live chat, it's out of scope. 

This chart formed the basis of what design team recommends for short and long term solutions.

3.3 Heuristic evaluation (AKA: what’s wrong with this website?)

I evaluated UX of Step-up in each step of the user journey. I discovered 2 key areas of improvement that became the focus point of the redesign.

Readability

Readability is defined as "measures the complexity of the words and sentence structure in a piece of content" by Nielsen Norman Group. On average, STEP-UP has a reading level of grade 16, far exceeding the target audience's grade level (grade 12).

More importantly, having appropriate reading level is part of the WCAG accessibility guidelines (SC 3.1.5 level AAA). Since our client is in the government sector, emphasizing readability as an accessibility requirement was crucial to the redesign.

Impact on final design

To better persuade scientists (working for the government) who are used to academic writing, I created "Designing text for users" PPT deck to convince stakeholders the benefits of writing effective and concise copywriting. It also resulted in buy-in on adding a content strategist to our team. 

CTA

The intended CTA is a ghost button at the top of the page, which is less discoverable in general than solid ones. In this case, it is on teal background, looking similar in style with other texts.
Additionally, the issue the client had – receiving too many emails from prospective applicants – may be caused by the most obvious CTA on the page: his email link.

Impact on final design

We redesigned the banner image with light background, well-lighted photo, clear slogan, and one single solid button for CTA. There is much less visual noise compared to the original one. 

We reflowed FAQ from its own page to every page with relevant content. In addition, the visual prominence of the staff contact link was reduced from heading to paragraph. In this way, students will need to scroll through all the FAQ to reach this contact link, which will definitely decrease the number of emails the scientist receives. 

04. Ideation (homepage example)

Before

Iterations

Final version

Reflection

During this project, I improved on several skills including:

  • Stakeholder presentations

  • Axure wireframing

  • Writing UX reports

One thing I learned was to sound more spontaneous when interviewing users, instead of reading word-for-word on a script by practicing the script with the UX lead.

Some of the challenges included being constricted by client's design system and web platform. For example, there's no way to implement search of the FAQ questions. Additionally, I would also do some usability testing of the old and new design with the students if the budget allowed. This way, we can more accurately understand students' browsing behaviours and if their painpoints were improved. 

Ideally I would have the specific KPI improvements to provide, but I was put on another project before I can see the end result. But I do believe the new version achieved the impact we desired – less to read, easier to understand.

Thank you for reading! :)