PTKO 5-22.png

Website redesign to educate users on fiscal policy


Redesigning a website to more effectively educate users on fiscal policy

Concord Coalition

CC case study cover.png

PROJECT DETAILS

Timeline: 5 months
Team: I worked alongside a UX Manager, Project Lead and a team of developers.
My role: I was tasked with creating use cases and designing user flows, the site map and medium fidelity wireframes.

challenge

Update a grassroots organization's website to better educate and empower users

The Concord Coalition is a non-partisan grassroots organization advocating for responsible federal fiscal policy. The organization's website was built in 2008. The site design had fallen behind industry standards and the architecture was outdated such that it risked the integrity and security of the site itself.

Also, the organization was adding new initiatives such as events and new publications. Due to these reasons, the organization wanted to redesign their website. 

solution

A website that allows users to easily access the resources they need to advocate for fiscal responsibility

The redesigned website allows users to find the information they are looking for via refined navigation and search and incorporates new features such as event registration, mailing list signup and online donations.

CC Old and new home pages.png

Note: The above is my interpretation of the high fidelity design. After the end of my contract, minor changes were made to the wireframes and a visual designer worked on the mockups.

PROCESS

Understanding the organization and its users

I started the project by studying the organization and its competitors, reviewing the content strategy and understanding the personas. 

Determining user flows and information architecture

I created user flows to determine how each persona would navigate the site to discover relevant content.

 

I also worked on the site map, which went through several iterations as we worked through determining what pages would be transitioned to the new site and how content could be streamlined.

sitemap

Leading a collaborative design session

To kick off wireframing, I led a design studio with the client and internal team. By tapping into the client's expertise and drawing from the ideas from our group , we came up with preliminary designs for two key pages.

 

 

 

 

 

Creating wireframes with team & client feedback

Once the production of wireframes was underway, I received feedback from the internal team and client, discussed changes and made revisions. I also annotated wireframes for developers.

Responsive.png

Iterating to arrive at the best design

Refining Search

The initial design of the publications page divided publications by type, with a search capability in each section. As this would require the user to search through each of the publications for articles, the next iteration showcased most recent publications at the top of the page and included a search section below.

Publications.png

Showcasing essential content

In the first iteration, the bios on this page were presented in an expandable container. However, further discussion with the client revealed that the press looked for detailed bios so individual bio pages were designed. 

Staff page.png

reflection

I really enjoyed working on this project and I learned a lot, not only about the UX process but also about client management. Here are some takeaways:

Copywriting is part of the designer's job

Although the client was going to hire a copywriter, I spent time on the messaging, particularly for the calls-to-action. This helped the client better visualize the page and provided a framework to build upon.

Getting feedback from developers early in the process is key

Showing the Technical Lead my designs as I was creating them helped clarify what was and wasn't feasible from a development standpoint.

Be empathetic to the client's concerns

When I received pushback on certain aspects of my designs, I listened carefully to the client's concerns so I could understand their point of view. In some instances, clarifying my reasoning by sharing examples helped and in others, I found alternate ways to solve their problem.


 AlzCare Labs / Concord Coalition / Free the Need / Side projects