Redesigning a website to more effectively educate users on fiscal policy
Timeline: 5 months
Team: I worked alongside a UX Manager, Project Lead and a Web development lead.
My role: I was tasked with creating use cases, building out user flows and the site map and designing the 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, mailing list signup and online donations.
Note: Minor design changes were made to the website after the end of my contract.
Understand the organization and its users
One of the first things I did was study the organization and its competitors, as well review the content strategy and the personas. I also met with the Project Lead to better understand project scope.
Determining user flows and information architecture
User research and competitive analysis was conducted prior to my joining the project. Based on the user groups identified in the research phase, I created user flows to determine how each group would navigate the site to discover relevant content.
I also worked on the site map, which went through several iterations as the client and our team 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. The goal was to come up with as many ideas as we could in a short amount of time and tap into the client's expertise. As a group, we sketched out two key pages of the website and identified elements from our individual sketches that could be incorporated into the pages.
Once the production of wireframes was underway, I received feedback from the internal team and client, discussed changes and made revisions.
I also designed responsive wireframes.
In addition, I contributed to building the taxonomy of the site and created annotations for developers.
Iterating to arrive at the best design
Below are some iterations that were made:
The initial design broke up the publications by section, with a search capability in each section. This would be require the user to search through each of the publications to look for articles on a given topic, which would be problematic.
The final version had the search as a separate section on the page where users can search by publication type and/or topic, along with the recent publications highlighted above. This format was used on other pages such as the Analysis and Indicators for consistency.
(Note: The client decided they wanted to eliminate the infographics section altogether, so it was removed in the final version.)
Showcase essential information
In the first iteration, the bios on this page were in an expandable container. However, further discussion with the client revealed that staff were very often contacted by press so it was essential to have more detailed, individual bio pages.
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.
Throwing away designs is part of the process
For two of the pages, I had to scrap my wireframes and start over. I pushed my creative boundaries and found that there are multiple ways to solve a problem - you only have to look for them!