COLLEGE TO CONGRESS
WEBSITE REDESIGN
Video of the final prototype, no audio.
College to Congress Final Mockup
C2C-U Final Mockup
CONTEXT: The average cost for participating in a Congressional Internship in Washington D.C. is $8,000 which is prohibitively high for many who want a career in public service. In addition, many of these are low-paid or unpaid exacerbating the barrier to entry.
CLIENT: College to Congress wants to create a more socioeconomically diverse Congress and they do this through their Congressional Internship Program and their C2C-U (College to Congress University) program.
CHALLENGE
It was difficult to understand the programs College to Congress offered based on the information on their websites.
OUTCOMES
Our website redesign clarified the organization's mission and benefits to prospective students and donors.
MY ROLE: UX Generalist, Point of contact for client interactions, meeting and workshop facilitator.
TIMELINE: 3 weeks
TOOLS: Google Forms, Balsamiq, Figma, Invision
SKILLS PRACTICED: User Research, Stakeholder Interviews, Sketching & Wireframing, Prototyping, Usability Testing, Group Facilitation.
DISCOVER
USABILITY SURVEY
Our client had two websites called CollegetoCongress.org and C2CUniversity.org
As a team, we first took a look at each website to identify any major navigation and organizational problems. Using these insights, we wrote questions and tasks for a usability survey that would either validate our assumptions about what needed to be fixed or help us discover new problems to focus on.
Our survey got 35 results in total and I've written out some key findings for each website's landing page below.
COLLEGE TO CONGRESS LANDING PAGE WITH KEY FINDINGS
C2C-UNIVERSITY LANDING PAGE WITH KEY FINDINGS
MOST PRESSING PAIN POINTS
AMBIGUOUS MESSAGING
-
74% of users could not correctly articulate the differences between the Congressional Internship Program and C2C-U.
CONTENT ORGANIZATION
-
The organization's mission statement was small and placed below the fold.
-
Lots of clutter towards the bottom of the page.
NAVIGATION PROBLEM
-
Users could not move back to the organization's main page once they moved to the C2C-U site.
DEFINE
BUSINESS GOALS
Before starting the design work, we needed to find out what our clients needed. We scheduled interviews with 5 out of 6 full-time staff members and decided on the following goals:
CLEAR UP AMBIGUITY BETWEEN PROGRAMS
-
Staff members agreed that there was a lot of confusion between the two programs.
-
They wanted clearer messaging on both websites.
MAKE DONATING PROMINENT
-
College to Congress depends on donors to make their programs possible. As a result, donation options needed to be very visible.
CHECKING OUR UNDERSTANDING
While interviewing and meeting with clients, we created a chart to track the similarities and differences between the programs in order to solidify our own understanding. It was important that we had a deep and accurate understanding of the programs since our scope was now including communication and content strategy.
PAGES SELECTED FOR REDESIGN
Since we had a constraint of 3 weeks, we needed to select which pages would benefit the most from a redesign.
We selected the Landing Pages of both websites and then we selected the Courses Page, Course Details Page, and FAQ page of C2CUniversity.org. This was a newer site and program so our client needed our help more immediately for the C2C-U site.
SKETCHING & IDEATING
I worked on sketching and wireframing the Course Details Page with a teammate.
We noticed that the current page lacked some crucial details about:
CURRENT COURSE DETAILS PAGE FOR C2C-U
-
Length of the course
-
Price
-
Requirements or pre-requisites
-
Enrollment periods
-
Benefits of taking the course such as certifications or networks.
FINAL MOCKUP OF COURSE DETAILS PAGE
SKETCHES AND WIREFRAMES
INFORMATION ARCHITECTURE
CURRENT SITE MAP FOR COLLEGE TO CONGRESS
PROPOSED SITE MAP
DESIGN & TESTING
ITERATIONS
After wireframing on Balsamiq, we moved to Figma for its collaborative features and then used Invision for creating a prototype to give to users. We had an average of 5-7 iterations per page.
CollegetoCongress.org Landing Page Iterations
USABILITY TESTING
We conducted two rounds of usability testing. In the first round, we tested 5 users and in the second we tested 4. Identical testing scripts were used each time so we could directly compare performance.
HERO SECTION ITERATIONS FOR COLLEGE TO CONGRESS
FINAL PROTOTYPE
Interact with the final prototype! You can click through it like a regular website or click on the half-moon tabs on the sides to flip through all our pages.
.png)
REFLECTION
WHAT WENT WELL
TEAMWORK
Our Daily Standups really helped develop trust and transparency as a team. If someone needed help, we knew immediately and could work to delegate tasks efficiently.
PIVOTING QUICKLY
Since we were on such a tight timeline, stakeholder interviews and usability tests were rolling in up to our deadline. I learned how to be flexible and change quickly based on new information that we were constantly learning.
SKILLS TO WORK ON
DATA COLLECTION AND VISUALIZATION
I wish I had created a chart that could streamline data collection for our usability test results. If this collection method was designed well, we could spot trends and significant findings at a glance.
For this project, we wrote our results into tables on Googledocs and reviewed them together but I felt like we had to do a lot of filtering to find meaningful metrics and success rates.