NumbersUSA
Website and Mobile App Design
Project Summary
A non-profit political organization, recognized the need for a website and CMS upgrade, encompassing a website redesign, improved information architecture for page navigation and content organization, as well a mobile app platform which focused on participation in political initiatives.
Role
Senior Product Designer
Key Team Members
Problem
NUSA's website was hindered by an outdated design and poor content organization, leading to a difficult user experience. Users struggled to locate essential information, limiting their engagement with the organization's initiatives. The outdated design fails to meet modern usability standards, further reducing user interaction and participation.
Solution
We proposed a comprehensive redesign of NUSA's website to modernize the user interface and improve content structure for better navigability. This redesign introduced a clear, intuitive information architecture and user-friendly design elements to enhance the overall user experience. The updated website facilitated easier access to essential content, boosting user engagement and participation with NUSA's initiatives.
Discovery
Phase
Planning Session
During the planning session, we encountered crucial insights and challenges that shaped our strategy:
Insights From Stakeholder Interviews
Conducted in-depth interviews with key stakeholders to understand business objective and user needs.
Definition
Phase
Pain Points
User Personas and Journey maps
Focusing on developing user personas and journey maps helped us bring NumbersUSA's diverse audience into sharp focus:
Persona Sample - Inquirer
Name: Alex Smith
Age: 26
Occupation: Marketing Analyst
Background:
Alex is a curious individual who has recently become interested in learning more about the immigration system in the United States. As a marketing analyst, he values information and wants to understand the complexities of immigration policies to form an informed opinion. Alex is well-educated, politically engaged, and actively seeks out reliable sources of information.
Quote:
“I want to learn more about how immigration policies affect me and my community, but I need reliable and fair view from my information sources.”
Persona Sample - Inquirer
Goals and Behaviors:
Persona Sample - Inquirer
Challenges and Pain Points:
User Journey Map Sample - Inquirer
Discovery | Information Gathering | Engaging with Content | Exploring Solutions | Taking Action | Engaging with Advocacy |
Alex conducts a Google search to learn more about the United States immigration system. He discovers NumbersUSA as one of the search results and clicks on the link. | Alex lands on the NumbersUSA homepage and explores the different areas on the website. He navigates to the “ Legal Temporary” page within the “Information” section of the website, where he learns about the concept of “Chain Migration”. Intrigued, Alex clicks on the “Chain Migration” page link. | On the “Chain Migration” page in the “Issues” section, Alex finds a collection of videos that provide insight into the challenges associated with the current immigration system. After watching the videos, he starts questioning the effectiveness of the existing approach to immigration. Alex notices a link on the page that suggests an alternative way of organizing the immigration system, so he clicks on it. | Alex is directed to the "Families" page in the “ReEnvisioned” section, where he discovers NumbersUSA's proposed solutions for immigration reform. Intrigued by the legislative proposals, he proceeds to the "Solutions" page. | In the "Solutions" page, Alex finds detailed information about the legislative reforms advocated by NumbersUSA. He becomes convinced that supporting these reforms aligns with his values and desires to help make a difference. Alex notices a call to action and clicks on it, leading him to the “Action Board” page. | On the “Action Board” page, Alex finds instructions on how to contact his Members of Congress. He takes the initiative to select a pre-written message expressing his support for the proposed reforms and sends it to his elected representatives. Alex feels empowered and motivated, knowing that he has taken an active step towards influencing immigration policies. |
Detailed Sitemap and User Flows
Focusing on refining the website's architecture through a detailed sitemap, ensuring an intuitive and user-friendly navigation experience:
Website - Sitemap
Mobile App - Login/Register Account User Flow
Mobile App - Sitemap
Mobile App - Account Profile User Flow
Mobile App - Donation User Flow
Mobile App - Take Action User Flow
Page Layout Templates
A structured approach to ensure the website's usability, aesthetic consistency, and strategic alignment with our content framework was introduced. Six distinct templates were developed, each tailored to fulfill specific roles within the site's architecture:
Content Search/Filter Feature
To refining content accessibility, we implemented a dual approach to content discoverability, integrating both a user input search bar and a sophisticated filtering system.
Mobile App Gamification Feature
Enhance user engagement and motivate users to take action on political initiatives through a gamified feature that encourages participation, and rewards.
Content Migration Strategy
For the transition from Drupal to WordPress, we combined automated and manual migration methods for an efficient and precise content transfer. Working closely with the stakeholder content team manager and our development team, we aligned content types and taxonomy for automated migration, while selectively employing manual migration for complex content like main pages and media.
Securing Approval for User Experience Direction
In a meeting with the NUSA leadership team, I presented the outcomes of our Definition phase, a comprehensive showcase of our strategic planning.
Design
Phase
(3 weeks for website and an additional 4 weeks for mobile coinciding with the website development)
Initial Design Mockups
To evolve the existing design mockups created by the previous agency into a refreshed visual identity that resonates with the organization's brand and voice, the UI designer (on my team) and I focused our efforts on:
Discontinued Agency
Final UI Design
Finalize Design System
The UI Designer and I collaborated closely to finalize the design system, which streamlined our design and development process. By creating and maintaining this system, our development team has been able to efficiently produce user interfaces that are consistent and scalable across both the website and the mobile app and are also aesthetically pleasing. The design system includes:
High-Fidelity Design
Utilizing the approved high-fidelity mockups from the previous agency, our focus shifted towards crafting detailed UI designs. This involved utilizing the design system, and page layout templates to create visually compelling designs that engage users while ensuring consistency across the website.
Website Page Layout Template Designs
Website Page Layout Template Designs
Mobile App Designs
Mobile App Designs
Prototyping, Usability Testing, and Iterating
Interactive prototypes brought our designs to life, allowing us to simulate user interactions and the overall flow of the website and mobile app. This step was crucial for visualizing the end-user experience and for identifying any usability issues that needed to be addressed before development began.
Stakeholder Collaboration and Feedback
Throughout the Design phase, ongoing collaboration with stakeholders was essential. Regular reviews and feedback sessions were held to ensure the evolving designs remained aligned with the project's objectives and stakeholder expectations.
Development
Phase
(21 weeks for website and an additional
11 weeks for mobile app development)
During the development phase, my contributions were multifaceted and pivotal across several key areas:
Automated Content Migration Strategy: I collaborated closely with the developer and NUSA's content manager to devise a strategy for automated content migration.
Manual Migration Oversight: Taking a hands-on approach, I supervised the manual migration process for complex content.
Gamification Feature Design: I spearheaded the design and specification of the gamification feature for the mobile app, aimed at enhancing user engagement, which I successfully presented to the NUSA leadership team for their approval.
Mobile Application Design: In collaboration with our UI designer, We finalized the design for the mobile application, ensuring it was ready for development.
User Acceptance Testing (UAT) Involvement: Throughout the UAT process, I played an active role, applying iterative design adjustments based on user feedback.
Project
Launch
After 7 months of discovering the issues, defining our objectives, designing solutions, and developing our product. We first launched the website and 4 months later we launched the mobile app for iOS and Android.
Launch Successes
Project Challenges
Project Learnings
Thank You
Let’s Connect!
Website: https://stevekim.io/
Email: steve@stevekim.io
MX Phone: +52 624-224-4028
US Phone: +1 619-650-4324