App, Desktop & Mobile Website

A website & app for learning about local politics and boosting youth voter engagement.

Young Vote SF

Young Vote San Francisco (YVSF) is an educational website and app that teaches young people about local politics in San Francisco.

YVSF’s goal is to boost youth engagement in San Francisco politics, educating young people about the political landscape of the city and encouraging them to vote. The YVSF app and website needs to connect with a young audience. It needs to meet users where they are at, engaging those who have minimal knowledge of politics.

Responsibilities: User Research, Competitive Auditing, Wireframing, Prototyping, Branding, Copywriting

Understanding the User

I conducted interviews and created empathy maps to understand the characteristics, feelings, and needs of the users I’m designing for.

Based on what I learned through the interviews, I identified three main pain points.

  1. Too much text and not enough interactive elements

  2. Excessive wordiness and complex jargon

  3. Political information is presented in a heavily biased way

I then created two different user personas to represent YVSF users: Nico and Francis. I also designed user journey maps for both personas to explore what steps they might take to accomplish their goals related to learning about local politics.

Nico's Persona

Nico's Persona

Francis's Persona

Francis's Persona

Nico's User Journey

Nico's User Journey

Francis's User Journey

Francis's User Journey

Competitive Audit

I performed a competitive audit to study three different direct and indirect competitors to YVSF.

Competitors:

  1. The City of San Francisco (direct) -https://sf.gov

  2. Voter’s Edge (indirect) -https://votersedge.org

  3. All Teen Politics (indirect) -https://www.allteenpolitics.com

Findings:

Both direct and indirect competitors lack interactive content and strong visual design. Interestingly, I was unable to find any direct competitors that provide local political information to young adults in San Francisco.

Starting the Design

After gaining a clear understanding of my target user demographic, I created a set of paper wireframes for my app site pages. For each page, I experimented with different layout ideas before choosing the best one. I then turned my app wireframes into mobile wireframes. Next, I scaled up the mobile layout for each page so they would fit a larger screen, thereby creating a set of desktop wireframes.

Once I had my three complete sets of paper wireframes (app, mobile, and desktop), I transformed them into digital wireframes using Adobe XD. I then connected my digital wireframes to create three low-fidelity prototypes for the app, mobile, and desktop experiences.

Left: Home page app wireframe ideas Above: Finalized home page wireframes, mobile and desktop

Digital Wireframes (Desktop, Mobile, and App)

Usability Study

Using all three of my low-fidelity prototypes, I conducted a usability study to find out how users interacted with the prototypes. I asked participants to perform a series of tasks related to navigating the site and locating specific information. Each participant performed the same tasks on the desktop, mobile, and app prototypes. I recorded their reactions, asking them questions about their experience afterwards. I then used my findings to edit the prototypes and improve the user experience.

Research Questions:

  1. How long does it take users to find out who the Supervisor is for a specified San Francisco district?

  2. What can we learn from the user flow, or steps users take to select and watch a video?

Sample size: 5 participants (3 male, 2 female)

Ages: 18-29

Main Findings:

  1. Users would like the Board of Supervisors to be added as another topic category.

  2. Users want more interactive content in place of text.

Mockups

After finalizing my low-fidelity prototypes, I added color, imagery, and text to create mockups resembling what the design would look like in its final form. I created one set of mockups for the desktop site, one for the mobile site, and one for the app. I then turned these into three high-fidelity prototypes which can be seen here:

The Editing Process

 BEFORE

 AFTER

Topic buttons arranged in static carousel with red background

News caption text aligned to the left instead of center

“Weekly News Quiz” layout made more organized

Variation created in the size of news articles & videos

Footer added

Breaking up the Page

On revisiting my initial design, I realized that there was too much content and text without enough page breaks, color, and space. I decided to reorganize my page in a number of ways. I condensed the topics section by organizing the different topics into a static carousel that users can click through. I added a red background shape behind the carousel for further emphasis, as the topics are a key navigational feature of the site.

I further broke up the page by grouping the “Weekly News Quiz” elements together using boxes, isolating them and giving the quiz its own space.

Lastly, I changed the sizing of the news articles and videos. Instead of having them all be the same size, I created two different standard sizes. I varied the placement of videos/articles of the larger size and those of the smaller size in a 1:2 pattern.

THE

BRAND

The Young Vote SF logo depicts the San Francisco city hall, representing city government and politics. I used shades of blues and reds for the color palette, as both are associated with American politics.

Color Palette

Logo

Logo and Heading Font: Bodoni 72 Oldstyle

Body and Heading Font: Adobe Clean

I also designed a number of images, some involving the logo, to place on various pages of the site. The hand imagery represents the way in which Young Vote SF aims to support young voters, lifting them up and empowering them to engage with local politics.

Thanks for tuning in!

Have thoughts or questions? Let me know!