Research Campus

Over the years, the AmeriCorps.gov site has been aggregating all the resources developed by each of its centers without any design governance. As the content grew, the site became so disorganized that users struggled to find the resources that they needed. The Office of Research and Evaluation heard feedback from their users that evaluation resources were inaccessible and evidence reports could not be found within the sites layout.

The new AmeriCorps Research Campus aims to solve the Office of Research and Evaluation’s needs by providing a site where users can easily search for and access evidence reports and evaluation resources. This new site is part of a broader effort to modernize and improve the users experience of AmeriCorps.gov

  • My Role: UX Designer

  • Timeline: 1 year

  • Current Status: Ongoing

Key Stakeholder Requirements & Design Approach

Since the AmeriCorps Research Campus is an effort by the Office of Research and Evaluation which lives within AmeriCorps.gov, we must adhere to certain government standards for the new design of the site.

  • U.S. Web Design System, an open-source library for government websites

  • 21st Century Integrated Digital Experience Act (IDEA), which outlines eight specific requirements that public sector organizations have a legal duty to meet

  • Section 508 Accessibility Requirements

Additionally, a key ask in the statement of work was for the design of the new Research Campus to maintain the same styling as AmeriCorps.gov so that is recognizable to the user as an extension of AmeriCorps.gov. This means that all UI of AmeriCorps.gov will be incorporated throughout the new AmeriCorps Research Campus where ever possible.

Our team worked in an Agile workflow methodology partnering with leads from the Office of Research and Evaluation. The agile methodology allowed for constant collaboration and iteration, ensuring that the research site met the evolving needs of AmeriCorps and its users. Through regular sprint planning meetings and daily stand-ups, I have been able to work closely with cross-functional teams, including developers and stakeholders, to foster a strong understanding of user requirements and project goals. This iterative approach, combined with a user-centered design approach, has allowed us to quickly identify and address any usability issues, resulting in a more intuitive and efficient research site. The agile workflow has also given me the flexibility to adapt and pivot as new insights and priorities arise, ultimately delivering a valuable product that serves the needs of the government agency and its users effectively.

Creating design standards

In order to ensure consistency and maintain a cohesive brand identity, we created a pattern library based on the existing AmeriCorps website. A complete audit of the existing site was taken, reviewing all of the sites patterns, styles, templates, and page structures.. Detailed inventory and spec information was documented for future use.

Through creating a design patterns library, we help design and developers maintain consistency and create a new user-friendly intuitive website that is easy to navigate while matching the styling of the parent website.

  • Creating a UX Pattern Library: An Essential Step for a New Website

    When embarking on the development of a new website, one of the most valuable steps is the creation of a UX pattern library. This essential resource serves as a reference guide for the design and development teams, ensuring consistency and efficiency throughout the project. In the case of basing the new website on an existing one, the pattern library becomes even more critical to maintain the familiar user experience and avoid any confusion from the current user base.


    The first step in creating a UX pattern library for the new AmeriCorps Research Campus was to thoroughly analyze the existing website AmeriCorps.gov. This involves studying the layout, navigation, typography, color schemes, and other visual and interactive elements. By understanding and documenting how these components contribute to the user experience, we determined which patterns should be carried over to the new Research Campus. This analysis not only helped to maintain consistency but also allowed for improvements and refinements to be made on the existing patterns

    
After identifying the key patterns from AmeriCorps.gov, the next step was documenting and organizing them in the pattern library. Each pattern identified was accompanied by a clear description, including its purpose, usage guidelines, and any related considerations. Additionally, visual representations, such as wireframes or screenshots, were included to provide a visual reference. Finally, we categorized the patterns based on their function or location within the website to further enhance the accessibility and ease of use of the pattern library.

    
Collaboration and feedback are fundamental aspects of creating a UX pattern library. As the designers, we closely partnered with the development during this process, allowing for continuous refinement and iteration. Regular meetings were held to discuss the patterns, address any issues or challenges, and gather insights and suggestions from the team members.

    
Finally, the UX pattern library should not be considered a static document but a living resource that evolves alongside the website. As the new website is developed and user testing is conducted, adjustments and improvements may be required. The pattern library should be updated accordingly to reflect any changes made to the UX patterns. Regularly reviewing and maintaining the pattern library ensures that it remains valuable and relevant throughout the lifespan of the website.
In conclusion, creating a UX pattern library for a new website based on an existing website is a crucial step in ensuring a consistent and user-friendly experience.

  • To ensure accessibility requirements would be met on AmeriCorps Research Campus site, I conducted a 508 compliancy review on AmeriCorps existing site. Several key findings were highlighted. These findings were documented in the pattern library under their offending style. By making notes of any failed 508 testing, I was able to avoid accessibility issues in future designs of AmeriCorps Research Campus site.

AmeriCorps Research Campus MVP

How we determine MVP and why it matters:

MVP or Minimum Viable Product is a prioritization construct our team used to ensure that while working in an agile workflow, we were still on track to build the right thing first, with as little risk (e.g. dependencies) or complexity as is absolutely necessary for success longterm.

By isolating the right things to focus on first, our team was able to delivered value to users faster, makes safer assumptions, and will be able to evolve the site intelligently with new data gathered post-build.

We determine the scope of an MVP by examining all the identified features and functionality and stacking them into logical evolution order (e.g. you must have built X to build Y).

  • Clear MVPs were identified for AmeriCorps Research Campus through the Statement of Work from the Office of Research and Evaluation. Additionally, through our user research, we added a few more MVPs to create a valuable set of features based on the evolving needs of the users, rather than the needs stemming from the prior environment.

    Key MVPs we focused on were :

    • Creating a homepage that reflects the feeling of AmeriCorps.gov but has a distinct presence and indicates to the user that they are on a different product.

    • Users must be able to browse reports or webinars of interest.

    • Users must be able to use a main search through keywords and filters.

    • User must be able to browse and use available resources including viewing detail pages for any migrated content.

    • Users must be able to get support and give feedback.

    • Users will be freely able to access the site (no login) and be able to navigate back to AmeriCorps.gov easily.

    MYP KEY RESULTS : When tested, users should be able to find what they need easily and understand the purpose of the product.

How can we organize the AmeriCorps Research Campus?

Once we had our MVPs for AmeriCorps Research Campus identified, we created an information architecture for the new site. This involved organizing and structuring the website's content to ensure that it will be easy to navigate and understand. With a solid information architecture, our team was able to create a website that is intuitive for users and meets their needs.

Thinking through user steps.

After creating an information architecture for our site, we tested it out by crafting user stories and creating user flows to ensure a seamless user experience.

By mapping out the paths users will take, we were able to identify potential issues and improve the overall design of the site. This helped us create a website that is easy to use and meets the needs of our users.

  • As part of our research, our team identified 32 key user stories to account for any user needs the new Research Campus may have.

    We used these stories to create user flows. User flows are a visual representation of the steps and decision making users take to achieve a specific goal on a website.

    By mapping out these flows, we were able to identify any potential roadblocks or areas for improvement in the user experience. This process also helped us ensure that our information architecture was intuitive and easy for users to navigate.

What will the site look like?

After our information architecture and user flows were in place, we began creating wireframes for the new page templates. These wireframes help us to visualize the website's layout and content before we begin designing. By creating wireframes, we can ensure that the website's design is both functional and visually appealing.

We started the wire framing process with rough hand rendered sketches to make sure we were aligned with stakeholders on the rough layout of these page templates. After reviewing, we moved on to creating lo fidelity mock ups. These mock ups were created in Figma and were rough outlines of how the page would be set up and what the page grid would look like. During this process we went through several rounds of iterations to find the right page structure for the site.

The images you see on the left are from an early round of iteration. They very closely follow the UI on AmeriCorps gov campus as per the statement of work. After meeting with key stakeholders and leaders from the Office of Research and Evaluation, we decided to slightly alter the appearance of the pages navigation header, footer, and title section while still closely following AmeriCorps.gov for all color, styling, and components. By doing this, we were able to give AmeriCorps Research Campus its own identity while visually tieing it back to its parent website, AmeriCorps.gov.

Below you will find the high fidelity mock ups we landed on for AmeriCorps Research Campus. These represent the 9 core page templates we used throughout the site depending on the needs of the page content.

  • Homepage

  • Evaluation Landing Page

  • Evidence Exchange Search Page

  • Search Page

  • Evidence Exchange Topic Page

  • Detail Page

  • Story Page

  • Topic Page

  • Webinar Page

Lets test it out!

Conducting user research on the AmeriCorps Research Campus search site was a critical step in ensuring its effectiveness and usability. By engaging with potential users, we gathered valuable insights to inform the design and functionality of the platform.

Through interviews and usability testing, we identified user needs, preferences, and pain points, allowing us to tailor the search site to their specific requirements. By understanding how users navigate through the site, what information they seek, and the challenges they encounter, we were able to optimize the platform's features and layout.

Ultimately, user research provided the foundation for creating a seamless and user-friendly AmeriCorps Research Campus search site that catered to the needs of its diverse user base.

How did users react?

Search Filters

In early iterations of AmeriCorps Research Campus, users testing showed that users were not utilizing the filters to search. The filter menu was presented primarily through drop downs menus, which majority users skipped over during their searches. To account for this, we adjusted the filter menu to be a right aligned side menu so that users could quickly see filter options available. This increased the use of the filter menu by 70% and allowed users to quickly find the results that they were looking for.

Homepage Organization

73% of users asked said they would use the AmeriCrops Research Campus to search for Evidence Reports through the Evidence Exchange. In early iterations of the homepage, we presented the user with a card to direct them to the Evidence Exchange so they could search. 47% of users tested skipped over this card and went to the search menu at the navigation header. This search menu searched the entire site and was not specific to the Evidence Exchange. To improve user experience, we added a search bar specifically for the Evidence Exchange to the homepage so users could quickly identify where to look for the Evidence Reports they were searching for.

Search Tags

During user testing, 73% of users expressed frustration during searching for finding a particular evidence report. Overwhelming feedback from users included that search results blended together and were not distinguished enough to quickly identify the report they were looking for. To help users find reports they needed, we developed color coded tags on search results to highlight what type of evidence the search result presented was. This allowed users to quickly scroll through the results and identify the report they were looking for. Users expressed strong preferences for the tagged results and gave positive feedback on their search experience with this design adjustment.

So what’s next?

As we move forward in our UX design process, the next steps involve seamlessly transitioning from the ideation and development phase to bringing our concepts to life. With our Figma mock-ups in hand, we are now ready to pass on the detailed specifications to our talented developers, who will skillfully translate them into a functional CMS (Content Management System) using Drupal. This collaboration between designers and developers is crucial for ensuring a smooth implementation of our user experience vision.

Effective collaboration between UX designers and developers is essential for a successful design handoff. Clear communication, attention to detail, and a shared commitment to delivering a high-quality user experience are key throughout the entire process. Here is what we will review with our developers to ensure a seamless handoff :

  • We started by our handoff process by creating detailed design documentation that includes wireframes, mockups, user flows, and any other visual assets, making sure to clearly label and organize each design element for our developers reference. We complied all documentation in Confluence and Notion so our developers would have easy access.

  • Our first step in design specifications was to outline all components and elements of the page templates we created for Research.AmeriCorps.gov. This included dimensions, fonts, colors, spacing, animations, and any interactions available to users on each frame. We provided visuals for developers reference, including visuals for smaller screen sizes and outlines for screen breakpoints.

  • After our assets were outlined and organized to handoff, we set up time to meet with our developer partners to walk them through the designs, explaining the rationale behind design decisions and addressing any questions.

    We reviewed with developers the interactive prototypes created in Figma, so that the they could experience the designs interactive elements firsthand.

    Responsive design considerations were outlined as well, showing developers how we wanted elements to adjust for smaller screen sizes. All breakpoints and responsive behavior were outlined in spec documentation.

    Figma’s developer handoff was a key tool in the design handoff for Research.AmeriCorps.gov. By utilizing developer mode we were able to generate code snippets and assets automatically, reducing the manual work for developers.

    Key to our design meeting was fostering open communication between designers and developers. Encourage developers to ask questions and provide feedback on technical feasibility or potential improvements.

  • During the implementation phase, design will closely collaborate with developers to identify any technical challenges or discrepancies between the design and the final product. Iterate as needed.

    Once the development is complete, our plan is to conduct usability testing to ensure that the implemented design meets user needs and expectations.

    After the launch of the product, the team will continue monitoring user feedback and analytics. Any issues or improvements that arise will be addressed.

As the developers delve into their work, we will maintain open lines of communication to address any questions or concerns that may arise. In addition, we will continuously monitor the progress to ensure that the finalized product aligns with our initial design intentions. By diligently executing this process, we are confident that we will deliver a seamless and captivating user experience.

Previous

RegSpot Compliance AI
Next

511NY Rideshare