Redesigning a website to more effectively educate users on fiscal policy
Timeline: 5 months
Team: I worked alongside a UX Manager, Project Lead, a team of developers and the client.
My role: I designed user flows, the site map and medium fidelity wireframes.
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.
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 and mailing list signup.
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.
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.
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.
Iterating to arrive at the best design
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.
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.
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.