Feature: Site Homepage

Problem Statement

How do we build trust and introduce users to eRegs while balancing:

• Marketing (i.e. calling out features that differentiate eRegs from other regulations sites)
• Getting users into the regulations quickly

Considerations

• We needed to make it clear that eRegs is a pilot project
• We wanted users to understand where and how we were getting our content and to what level it had been vetted by policy owners (i.e. how trustworthy is the site?)
• It was important to display recent changes and list when the site was last updated
• Search would be important to display
• We wanted to link out to Final Rules in the Federal Register
• Orienting users is important (i.e. display title, chapter, subpart, part, section)

Design History

Last updated August 2021

First Stage of Iterations (Figma Mockups)

Initially we tried a few versions of UI designs, some that felt more "government"-like (unadorned, plain, no/minimal graphics, short hero banner area that gets into the table of contents more quickly) and some that felt a bit splashier (strong visual impact; modern, heavier marketing website feel - illustrations and site context occupying the entire area above the fold).

Some takeaways:

• Photos seemed awkward for a regulations site - happy people didn't feel right, but neither did typical government symbols like buildings
• Flat illustrations felt more neutral
• We decided to include healthcare iconography as well as reference patients and providers (specifically, we ended up depicting a person in a wheelchair who appears to have agency and both a male and female doctor; all three have different skin tones)
• It felt better having a more modern look/feel vs. a bare/plain one

We presented two strong design options to our CMS product owner and DIS director (one plainer/minimal, one splashier), and they liked the splashier design. We built this.

Research Findings

More about this study: Site flow findings and recommendations

• Because the table of contents was not visible above the fold, when users were asked to look for a regulation they defaulted to search rather than scrolling down. This is not necessarily bad, but search is currently not as robust as we want it to be.
• Users might not understand that they can scroll down the page.
  • It was unclear if users didn't know they could scroll, or if they jumped to search because search is so visible and the table of contents would have required some exploration - behavior might be different with less pressure to complete a task while being observed
• Interacting with an actual website rather than a flat mockup, our policy SME found that the content calling out features and the illustration felt like it was getting in the way, preventing her from getting to the meat of the table of contents quickly enough
• Users easily found the last updated date in the footer

Second Stage of Iterations (Live Code - Working Draft)

• We added UI elements to suggest scrolling down and that would scroll to the table of contents quickly on click
• We made the hero banner area smaller so that it no longer hides the table of contents
• We removed the features bar that had previously lived below the banner, which also gave us more vertical space
• We removed the second, duplicated last updated date on the right side of the page

Moving Forward

• Test the working draft version with the UI changes with users
• We're also creating mockups of other possible ways to handle the site homepage based on research findings