Overview
The Center for European Policy Analysis (CEPA) is a nonprofit, nonpartisan, public policy institution based in Washington DC, focused on strengthening the transatlantic alliance through cutting-edge research, analysis, and programs.
CEPA’s real struggle and challenge with their old website was that their vast content lacked a structural taxonomy and that users had a hard time browsing and getting to important reports and articles that CEPA produced and published.
Role
UX Design
User Research
Why was a redesign needed?
Overall, a primary goal for CEPA is to improve the site’s holistic user experience and interface to make it easier for them to find the content they’re after. To aid with this, CEPA would also like to improve on their taxonomy to create better alignment between their business goals and users’ expectations.
UX Process
Research Plan
The first step for this particular project was to create and confirm a research plan. This plan was informed by client interviews and a kickoff call. The plan outlines research goals, pillars of success for the overall project, hypotheses and methodology to help communicate to the CEPA team what I was doing and why.
Desk Research
Discovery and secondary research were a very important phase of this project, not just for inspiration, but to really be able to understand, in full, what CEPA did and what types of design elements would truly align with their vision, values, and goals for the redesign.
High Level Working Solution
Design a website that allows for users to browse, read and easily access all of CEPA's content and resources while still allowing the team to easily upload and maintain content and keep like content together in one place.
Sitemap
Creating a sitemap for CEPA provided an interesting challenge. I need to use the sitemap as a way to convey and account for all of CEPA’s content and figure out the best ways to break and rebuild the website’s overall IA, to align with the overall redesign goals.
Iterations and Final Sitemap
After reviewing the first version of the sitemap with the CEPA stakeholders, there were some changes that had to be reflected, in order to allow users to complete tasks, and highlight CEPA’s main goal of increasing traffic and organizing massive amounts of content.
The biggest changes came in form of revisions to the primary page titles and the content that they housed. CEPA wanted to highlight the issues that their organization covers and allow users quick access to browsing content through landing pages.
Wireframe Ideation
Once the CEPA team approved the final sitemap, it was time to jump into designing and wireframing. Before I begin to create mockups or interactions in Figma, I like to first do a brainstorming session on either pen and paper, or in a separate design file.
I like to create the modules before I think about page layout. This helps with consistency and streamlines the build for any development teams involved.
Early Wireframes
After some brainstorming and sketching, I had a pretty good idea of where I wanted to start. To begin, I focused on the most important pages and finalized a module list of designs that could be used over and over again throughout the website, that could house different content.
Implementing Client Feedback
After presenting the first round of revisions to the client, they were able to come back with a consolidated list of feedback.
Moving forward in the design process, I was able to understand and accommodate for all changes that the client made, or provide different solutions based on the wireframes and pages that they had already seen. Below is some example feedback.
Wireframes V2
Usability Testing
Once wireframes were approved, I began to conduct remote usability testing. It's important to note that the way that the UX process was phased out, the results of the usability testing would inform and finalize the wireframes.
I used a remote usability testing tool called Maze, which allows users to move through a Figma prototype and answer questions that measure the success of these tasks based on heat mapping, how successful they were, and the amount of time it takes each user to complete the tasks.
Below are some sample questions and paths that users took that would later support the formal research report presented to the CEPA team.
Formal Research Report
As part of the wireframe process, CEPA received a formal research report written by yours truly. The purpose of this report was to highlight best practices and applied psychology in UX design, to really back up the changes that were going to be made in finalized wireframes.
Paring this applied research report with the full usability report is just one way that UX deliverables can put the client at ease, and are also great resources for the team to turn to if they have any questions, or are unsure of design decisions that will make the website the best it can be.
Excerpts for the research report can be found below.
Final Designs
After taking a deep dive into the research report, and the usability test findings, I was able to implement final changes to the wireframes.
I based these changes off of the completion of tasks, as well as the overall success of each test, thinking about ways to enhance the wireframes based on what I saw and heard during those tests.
Impact
The UX process for CEPA really focused on testing and iteration. Taking a modular first approach to the design seemed to work for producing the best content.
Overall, this website redesign had a lot to be with structure and research, and how UX research and UX design really go hand in hand.
The final product was a website that has been up 100% in user traffic and retention, thanks to some key modules to allow users to browse for content through categories and programs.