Our National Conversation
.webp)
Summary
Our National Conversation is a non-profit organization that provides a safe platform for users to engage with unbiased political content.
Users have mentioned that the existing website appears to be outdated as well as having a confusing user-flow.
The UI/UX Design team communicated to complete a website redesign to solve these user pain points before the 2024 election.
Role
Tasks
Tools
Time
What is Our National Conversation?
Our National Conversation is a non-profit organization that seeks to reduce partisanship and promote effective solutions to America’s challenges. ONC provides a platform with unbiased political content and constructive dialogue.
Challenge
The existing website struggles with clear navigation, content engagement, and modern design.
Goal
This redesign primarily focuses on enhancing its social presence and user experience.
Solution
We will meet the audience's needs of a user-friendly and updated website through improvements based on user research.
Synthesizing prior research
Prior to joining the internship, the UI/UX Design Team have already conducted user research. Our job was to synthesize their research and incorporate our findings into future designs and prototypes.
User pain points:
- unorganized information architecture
- (80% of users were confused about the navigation bar)
- users commonly struggled to understand the company’s mission
- (60% of users could not understand what ONC was about)
- outdated website and some hard-to-read content
- (54% of users would be encouraged to use the website if the design was simpler and more modern)
What were some of our goals for this redesign?
- establish an intuitive navigation system to match user expectations
- prioritize user feedback to increase user engagement, improve their expectations, as well as site functionality
- design consistency and bigger color contrasts to improve accessibility
What did we do with the previously done research?
Priority adjustments
Users were confused about ONC’s goal when they first looked at the site. We wanted to address this by aligning our redesign with their initial expectations. We started by working on decluttering and improving consistency on the homepage’s redesign.
Here were some designs from the previous ONC website and some pertinent suggestions/changes that were made accomplish our redesign goals.
Header
- adjust buttons to be consistent and easier to see
- condense to provide more space for page content
Let's talk about it
- make content responsive to allow users to access it on different platforms
- increase text size to improve readability
Infographics
- better responsiveness to allow more room for other information
- hover picture to see the infographic's title
- click to zoom in on image rather than open a different page to view
Media
- media without description of sources
- create a different page solely for visual and auditory social media content
Footer
- make footer smaller to prevent overwhelming users
- remove unnecessary links
How did our new and improved website impact the audience?
Upon completing the final design, we prioritized user feedback before moving forward with launching the finished site. Due to a tight timeline, our team went about interviewing a total of five participants to receive a public opinion.
Positive feedback
- 5/5 users were able to understand ONC’s mission through the website
- navigation bar was smooth and self-explanatory
- 4/5 users were confident in completing the tasks
- users felt that the image to text ratio “doesn’t seem overwhelming”
Issues
- News, Opinions, and Proposals pages had little to no differences between each other
- overall clutteredness to the same three pages, as well as the homepage
Suggestions
- create additional subsections for easier navigation to a particular section on a page
- ensure “Explain That” page is intuitive to users on its purpose as a Civic Ed page
- consider removing some of the right column content in News, Opinions, and Proposals page to reduce clutter and avoid stressing users
Finalizing the redesign
Style guides
We dedicated one week to fine-tuning the website by splitting up the tasks to make sure everything was consistent throughout every page.
This included both the desktop and mobile versions—triple-checking every font, its size, and spacing to ensure they aligned with the 8pt grid system. From here, we adjusted our style guide to reflect the changes made to the site.
Prototyping & final revisions
Using our usability testing results and previous research, we designed a more modern and user-friendly interface that solved their pain points while also meeting their expectations.
While my main contributions were on the "Explain That" and "Multimedia" pages, the overarching goals of the final designs were to increase accessibility, consistency, improve user retention, and better reflect ONC’s branding and mission.
Improvements
- compressed header and footer to optimize functionality and space usage for other important ONC content
- header background color changed from white to the brand’s primary gradient, reflecting the organization’s branding
- adjusted card colors, background, and text to enhance contrast for the most optimal accessibility
- style guide and components were changed to improve the site's overall consistency
- complete redesign of the “Let’s Talk About” section in the “Explain That” page to ensure a responsive design for different devices
- created a “Multimedia” page for users to view all visual and auditory ONC content
Reflections
This redesign project was collaborative in which we seeked to improve the user experience throughout the ONC website. The end goal was to reflect ONC’s brand and mission through a modern and user-centric site.
The tasks done to achieve this consisted of multiple iterations based on critique from ONC’s target audience, emphasizing consistency through every page, and implementing the brand’s colors while simultaneously meeting accessibility standards.
Successes
- increasing user satisfaction and engagement
- improving readability and accessibility to surpass standards
- designing a new and updated look for ONC's website
Challenges
- solving issues with the confusing information architecture/navigation bar
- understanding and tackling users concern with overwhelming text and information
Key learning
- maintaining consistency throughout designs
- balancing user and team feedback
Next steps
- creating space for advertisements to fund the organization
- launch and use analytics (as well as usability testing results) to learn new ways we could improve the site
View my other works
View works
