What is Partners for Advancing Health Equity?
Partners for Advancing Health Equity defines itself as a research learning collaborative that looks to advance health equity access and solutions for all people. They look to foster collaboration at a national level across all sectors.
.png)
Team Setup
Challenge
Partners 4 Advancing Health Equity was a completely new website meaning that this would not be a redesign effort. Stakeholders wanted to create a new .org website that was funded by a grant from the Robert Wood Johnson Foundation. The main goal of this project was to create a website with similar functionality to the Self-Sufficient Research Clearing (SSRC) website but with a modern look and feel. SSRC was chosen because of is search library functionality which was an aspect that was heavily prioritized during this design effort.
The Challenge within the Challenge
The main challenge with this website is that stakeholders looked to us to provide guidance and recommendations without providing much information on their audience. They did not have a strong opinion regarding look and feel but wanted a modern website that was bold.
Stakeholders did provide four page types that they wanted us to focus on. These pages were:
home, about, connect, and collaborate.
With that information, I began researching several websites in the health equity space to better understand how they laid out their websites. One of those websites was the American Public Health Association which provided a foundation for information architecture.
Because there was minimal guidance I was able to decide the direction of the design and I worked closely with our visual designer to align on images, logos, and the color palette.
The discussions we had during brainstorming sessions helped me frame the wireframes in a manner that would easily be translatable to a higher fidelity design.
Solution
Because we wanted to create a website that allowed users to learn about health equity through attendance of events, mural board collaborations, blog posts, access to industry experts, and a library of resources. The project was split into two phases. with each ending with the launch of new pages.
Phase 1:
Phase 1 was focused on building out a solid MVP. As previously mentioned, the 4 pages the MVP release were home, about, connect, and collaborate. This phase set the stage for later phases and I established and suggested early on that regular meetings with the client were necessary because the requirements were so limited. From those conversations, I began wireframing each of the pages.
Because this was not a .gov website, were able to be a little more creative with layouts and also could come up with a color palette which will be discussed further in the high fidelity mockup section.
Home Page
For the homepage design, the objective was simple: introduce users to the website and shows upcoming or recently completed events. During this phase of the project, the stakeholders were also interested in a membership of some kind. Since the homepage is the main point of entry for most user groups, I wanted it to be simple.
Above the fold, I created space for an image and the heading. The stakeholder also wanted to add some additional text to contextualize the website below the title. As you continue down the page, you find spotlighted events and at the bottom a call to action to join their community membership.
.png)
About Page
For the about page, the aim was to provide users with background information on the collaborative and what its purpose is. I thought of how place to display both the mission and story of the organization. I decided that they both had equal value and added a divider. This was placed at the top of the page so that users could understand this organization immediately.
The main calls to action were the connect or collaborate pages. Because both words begin with a "C", I also wanted these elements to have equal value. I worked with the creative designer to create a logo that reflected each word within the context of this. I also suggested adding in a quote from someone of significance to personalize this section.
This page also introduces the faces behind the collaborative and its efforts. We thought that it was important to show the people who are moving this vision forward and provide them with a space to shine.
Social media is something that the client also wanted to emphasize on the website and I chose to place a specific call out to now only place social media icons but associate them to their respective organizations.
Connect Page
For the connect page, we wanted to show users different ways to connect and engage with the collaborative community.
In brainstorming conversations with the client, they mentioned wanting to highlight upcoming events to encourage people to sign up. Because this was a major area of focus, I decided to place it at the very top of the page below the header section. That way, it is the first action item someone sees.
Spoke about with the stakeholders about the upcoming resources pages that we would be building and I convinced them that a call out to the resources section would be a great way to move users over to that section of the website.
*In later design iterations, once I moved on to another project, the team decided to not include this section*
I also advocated for adding a sign up widget on this page since we also wanted to capture user information. This sign up box was placed at the bottom of the page.
Collaborate Page
For the collaborate page, we aimed to actively involve users in the health equity community. The original design of this page was a lot more involved than its current iteration because the stakeholders wanted to include several core items.
Something that the stakeholders really were pushing at the time was the idea of using Mural to collaborate with their community. I wanted this aspect to be the most prominent call out on this page. I thought of this cascading effect of calling out three important value propositions that this Mural collaborations offer. The user could sign up for a session by clicking the button at the bottom of the section.
Other sections on the page were resources; led users to infographics, the blog section, and products pages. Also, I wanted to add an events sections towards the top to grab a users attention immediately.
I also felt that it was important to anticipate questions that a new user may have. I decided to add a small FAQ section at the bottom of the page to help mitigate doubts.
Phase 2:
Phase 2 was focused on building out the resource library page design. The resource library is a hub where a user can access free and field-tested information. The aim was to make it as simple as possible for users to get information, all in one place.
The stakeholders wanted this search experience to look modern and with that information, I decided to use other resource sections from websites like the Administration of Children and Families as a jumping off point. From there, it was all about putting the pieces together and grouping the filters in the correct groups.
For the display of the actual resources, I wanted a simple header, short description, date of publication.
High Fidelity Designs
After I finished the wireframing and received approval from the client, I worked with the visual designer to help them understand the vision of these designs moving forward. I help the visual designer find assets like the graphics used on the about, collaborate, resources, and connect pages at the top.
I also help them establish a color palette that was used throughout the entire website. With our combined efforts, we launched the website.