Humanity for Yang

Background

Timeline: 4 months

Role: Product Designer

Tools: Adobe XD, Adobe Illustrator, Wordpress

Problem: There are so many resources and infographics created by supporters. How could we consolidate all of these resources so that supporters can get find information easily? The campaign needed a way to increase outreach and volunteers.

Solution: Humanity for Yang is a hub of information and volunteer opportunities that relate to the Yang 2020 presidential campaign.

Design Process

As part of a team of five, we created the Humanity for Yang website, which is a hub of information related to Yang and campaign volunteer opportunities. As one of the designers on the team, I was tasked with creating the layout and button designs for the website.

When creating the layout, I wanted to create a website that was accessible and usable to everyone. I think it is important to represent Humanity First values by showing that the designer cares about the users. The Springboard UI pattern was the best way to help users navigate through volunteer options, resources, and policies. According to Fitts' Law, the time spent to move to a target depends on the distance to it, thus users spend much less time navigating through a website with larger buttons compared to smaller buttons.First, I created tiles for the Resources page so that we could implement a Springboard UI pattern. Springboards make navigation easier and help visualize the links better. When creating the buttons, I wanted to utilize flat icons so that users could easily understand the metaphors within the tiles. Keeping up with the branding guidelines, all tiles utilized the font "Montserrat" and used specific red and blues.

Takeaways from first mockup

1. The homepage should have a Get Started and Donate button in order to easily navigate users to pages on how to help with the campaign.
2. We needed to add social media tiles instead of a list of social media handles and buttons.
3. Make titles more apparent by adding Yang Blue font color and Yang Red underlines.
4. Shift tab links so that each link had the same format (i.e. Get ____).
5. Include descriptions for each resource tile.6. Include a button that allowed for users to choose which language they get their information in.

User Testing

My team utilized Google Analytics to track user behavior and demographics of our website. Results show that our. site was viewed by people from around the world, especially 25-34 year olds. We also looked at user behavior to see how users interact with the website and to see which pages are the most popular. Google Analytics was a very valuable tool that allowed my team to understand user behavior and scope. The data helped my team improve the website according to user needs.

Demographics

The results show that users from around the world use our website, so we have to make sure that the website is accessible and comprehensible to everyone. In order to accommodate people from around the world, we added translated pages and a button that leads to a page that allows users to change language.Using the behavior flows, we found that most users come to the website to find information on how to get started to volunteer the campaign, which was a priority for the campaign at the time. With this information, we decided to add buttons for phone banking and canvassing to the front page.

Future Directions

As the campaign evolved, Humanity for Yang was tasked with meeting the needs of Yang2020. Using data from Google Analytics and feedback from regional campaign officers, we improved upon the website.In our final product, we decided to add canvassing, phone banking, and donation buttons to the first page in order to highlight priorities for campaign volunteers. Further, we added the option for users to change languages in order to make resources and volunteer information accessible and inclusive to all users. We also added additional pages that allow users to create andjoin local Yang Gang events.

Keep in touch with Humanity for Yang on Twitter!