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.
what were some user research methods that we used?
- heuristic evaluation
- user surveys
- usability testing - primary research
- competitive analysis
user pain points:
- unorganized information architecture
- (80% of users were confused about the navigation bar)
- limited and poor social engagement
- 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
- emphasize branding and the different social aspects that the organization provides to encourage its users to utilize the same platform
- design consistency with implemented style guides
- bigger color contrasts to improve accessibility
what can we do with this research?
priority adjustments
From our feedback on the low and mid-fidelity wireframes, users were confused about ONC’s goal when they first looked at the site. They were unaware that ONC can be used to educate the audience about civics and that it also allows a space for users to safely express their opinions.
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. Once those designs were finalized, we would use this page and its components to help us design the layout for every other page.
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
first iteration of changes
Using user and member suggestions, we implemented these changes to revamp the existing website. Enhancing the readability, accessibility, as well as the responsiveness will welcome users to learn about the different views on current news and certain issues.
how did our new website impact the audience?
Upon completing the final design, user feedback was important so that we could move 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 was clean and “doesn’t seem overwhelming”
issues
- unsure if the proposals, opinions, podcasts were written/created by internal ONC members, community members (users using ONC website), or politicians
- 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
- while the current navigation bar is intuitive, it may be good to expand and create more 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.
View the final prototype through this link, or the live ONC website from this link!
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
desktop screens
mobile screens
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
works
