Project Overview

Mobilize is a social media platform where users can engage in social and civil topics. This product aims to provide political visibility on politicians and propositions at the local, state and federal level while also providing a platform for personalized news. 

The app is currently in beta testing and accessed at https://mobilizenow.io/

Project Goals

  • Baseline the apps product market fit.
  • Discover any user pain points.
  • Provide design solutions based on user data.

Role

UX Designer

Timeline

2023

Tools

Adobe XD
Adobe Photoshop
Adobe Illustrator
Adobe Indesign
Miro

Project Outline

User Research // Ideating // Prototyping // Visual Design

User Reseach

I began my research by creating a research script. Then I started recruiting participants for a moderated usability test. The objective was to baseline users expectations and to gather qualitative data to create user centric design.
‍
Sampling Group :  I interviewed 10 participants from various backgrounds, ages and genders to receive inclusive feedback. The participants are made up of professors, political science students, blue collar workers, community organizers and more. 

Mapping the Research

I transcribed my video recordings and created a variant of an affinity map to help me synthesize my data. Participants are listed on the vertical axis and the user flow each participants goes through is placed on the horizontal axis. The wires helped me find common themes and gave me insight on new user pain points.

Common Themes + Findings

I created a usability report that breaks down each phase of the mobile app that I tested. Starting with the onboarding and ending with overall feedback from the participants. The full report is over 14 pages long. Furthermore I captured each participants NPS score so stakeholders can baseline the apps overall value.

The report is broken down by the page on the left and on the right, shows the general perception from the participants, and any notable comments that can advantageous to the team.

Redesign Opportunities

01

Feed

Make page more digestible and less busy.

02

Information Architecture

Synthesize  “People” and “Headlines”. Emphasize “Ballot”.

03

User Interface

Create a stronger brand identity.

Competitive Analysis

I reviewed various news outlets and social media mobile platforms to benchmark the Mobilize's redesign. I reviewed apps like NPR, Axios, Google News, Nat Geo, Politico, Medium and more.
‍
Key Takeaways
+ Navigation bar is placed on the bottom on the majority of mobile apps.

+ Content blocks that take more 50% of the viewport height appear to less cluttered, which improves readability,
‍
+ Search bar is optimized on the top navigation bar.

Moodboard

Low Fidelity Ideation

Wireframes

Design Solution

Based on user feedback I began my redesign starting with synthesizing the information architecture. The second major change was recreating the “feed” to allow for greater readability. The last major change was introducing new UI elements, such creating  a new onboarding experience, refreshing existing UI elements, introducing new typography and style guide. 

REDESIGN

Onboarding Page

The homepage has been updated with a new sans-serif typeface, a black background, and a gradient from red to blue that maintains a consistent visual language with the previous design.

To increase contrast, the call to action for this page, which is to help users login or onboard to the app, has been emphasized. These updates provide a sleek and modern look while still maintaining usability and ease of navigation for the user.

Feed Page

After receiving user feedback that the feed page was too condensed, I made several design changes to improve its usability. First, I moved the navigation bar to the bottom of the screen to make it easier for users to access the pages with their thumbs.

Next, I increased the width of the images to fit the viewport and also enlarged the heading and paragraph text for better legibility. To help users find relevant content more easily, I added a filter option at the top of the page. Overall, these changes made the feed page more user-friendly and improved the overall user experience.

Ballots Page

I revamped the ballots page to ensure it matched the visual style of the rest of the app. I updated the typeface and added more padding between content blocks to improve the page's readability.

Additionally, I implemented a filter feature for politicians and propositions, which appears above the navigation bar to reduce clutter at the top of the page.