Shaping the future of progressive politics
Client Name: National Democratic Training Committee
Project Type: Website Redesign
Duration: 6 months
Team: CTO, Product Design Manager, UX Researcher, Product Designers, Data Analyst, Developers
What I did: UX Research, Information Architecture, Wireframing, Prototyping, Usability Testing, QA
The National Democratic Training Committee is a nonprofit PAC that trains Democratic party candidates at all levels of government to run for public office for free. NDTC believes that by empowering Democrats to get involved in local politics, they can help shape the long-term future of progressive politics.
The Challenge
Experiencing rapid growth as an organization, NDTC realized the need for a more unified and focused approach to teaching Democrats to win, considering the steep political challenges facing the party in 2020.
Research and usability studies on the existing NDTC website showed the need for:
Updated information architecture for clear user orientation
Personalized content pathways for different learner group types
Consistent user experience bridging on-site learning and online learning
The Approach
Focus on the journey and experience of three core user groups: Candidates, Campaign Staff & Local Leaders
Rearchitect the navigation, core page layouts and flows to the online course academy for efficient access to information
Redesign an accessible website, rooted in ‘Blended Learning’ best practices like personalized learning pathways
The Outcome
The Full Story
Navigation Research
Speaking with different stakeholders and users of the website showed a lot of content was either hidden from users, categorized incorrectly, or redundant altogether. We reorganized content based on who needed access to what information and prioritized it for learners, partnering organizations seeking event information, and news outlets reaching out with media queries.
My team and I conducted a comparative analysis study on navigation best practices. We then developed multiple lo-fidelity prototypes and tested with representative users at a live training event to determine the best layout.
Existing navigation- accidental triggers on hover; outdated hierarchy
Comparative research on navigation design
Navigation layout concepts for A/B testing
Final Navigation System
We found that the dropdown mega menu layout tested well with most users and allowed for:
More options to be visible at one glance
Flat navigation- accessing the deepest nested page in the site within one to two clicks
Larger click areas, especially for the less tech savvy or users with accessibility needs
Expanded and collapsed states of the mega menu
Wireframing & Page Layout
The existent website needed an updated homepage presence that would address multiple user goals. Research pointed to 3 main learner groups:
Users committed to running for office- Candidates
Users looking to work as staff on campaigns- Staff
Users volunteering with local parties- Local Leaders
Additionally, users also accessed the website to check upcoming training event schedules and locations. That meant, that information pertaining to training events had to be readily visible and accessible on the homepage.
I conducted heuristic analysis of the website and researched other political training organizations to help emphasize NDTC’s brand value. I produced layouts that created:
Core user tracks above the fold for easy and quick discoverability
Accurate messaging through visually impactful imagery and language
Thoughtful placement of Call-to-Action buttons for directed flows
Existing homepage
Comparative Analysis
Sketches of homepage concepts
Early wireframe of homepage
Final Screens
My team and I iterated on initial concepts to refine flows throughout the website. We developed a hierarchical taxonomy that not only helped us organize content flow, but also aided the establishment of a team-wide accessible component library. That helped expedite our workflows as we further developed the visual interface. We conducted a successful usability test before final launch, in which users overwhelmingly appreciated the updated design and overall seamless experience throughout the website.
In addition, the pattern libraries developed for this project, helped drive an org-wide style guide for training workbooks and resource guides used during in-person events, thereby connecting different parts of the user journey into one seamless visual experience.