Hack for LA

Bringing a new face to Hack for LA

Project Overview

Hack for LA started out as an LA based non-profit organization where volunteers came together to solve complex problems in the LA region.

With a growing number of volunteers joining the organization every week, and a desire to get donors directly to the platform, Hack for La needed a new homepage to help them expand their platform in a way that would allow each of the website’s users to learn more about Hack for LA and decide whether they’d like to contribute to the organization.

Role

UX Designer, UX Researcher

Tools

Figma, Github

Team

Remotely worked with design lead, project manager, other ux designers, and developers

Platform

Web-based application

Deliverables

Wireframes

Timeframe

July 2021 - October  2021

How might we properly introduce Hack for LA to the growing number of  participants in the organization?

Page Changes

Design Decisions

Like many other organizations, Hack for LA transitioned to remote work at the beginning of the pandemic in 2020. While Hack for LA's projects were still LA based, there was now more opportunity for volunteers that that didn't reside in the LA region to join the organization and lend a helping hand. Within a couple of months, volunteers were joining from all over the world.

Hack for LA is one of several brigades under Code for America, but the organization started growing big enough for there to be opportunities for Hack for LA to receive donations directly to the organization instead of to Code for America.

We had some key goals in mind while designing the new Hack for LA homepage:

1. Communicate what Hack for LA has to offer and how people can get involved to our users
2. Present some of the new communities and projects that had been recently introduced within the organization

New Homepage

While changes will continue to be made as we conduct more research with other types of users such as our donors, we've managed to design a completely new homepage on which users would get a brief introduction to Hack for LA, the types of causes that Hack for LA is involved in, the projects that volunteers are currently working on, and the impact our projects are having. Users would be able to explore different sections of the homepage according to their interests and goals.

Original Homepage

Homepage after changes

User Research

Determining Page Hierarchy

We set forth a research plan with some key goals in mind:

Generative Research Goals

• Understand what (such as beliefs, financial motives, other incentives, values) would motivate donors, partners, advisors, and volunteers to get  involved with HFLA
• Understand what different users' priorities are when interacting with the homepage

Design Research Goals

• Determine the hierarcy of information on the homepage
• Determine how we should communicate what Hack for LA has to offer and how people can get involved
• Understand design elements that Hack for LA is missing when compared to similar platforms

C&C Analysis

We looked at the homepages of other volunteer organizations to get a better sense of some of the more common features for the homepage of an organization such as Hack for LA. We discovered several items that were common throughout these homepages, which Hack for LA lacked.

Usability Testing

I conducted 5 usability tests with users on the current Hack for LA homepage. Although our team had assumed that we may not be able to get a ton of insight on the homepage as a whole, since it would drastically change anyway, we figured it would still be helpful to hear a little about the things that could remain on the homepage in some way (such as some of of the projects and a portion of our call to action at the top of the page.

Volunteers did point out some things that we carried with us into our designs:

• In Hack for LA’s heading, we currently call for volunteers to join by saying “Can you design, write, or code? You can help Los Angeles live up to its full potential at Hack for LA” 3 of the volunteers felt like this can be interpreted as something that excludes those who aren’t in those fields (ux researchers, project managers, etc.)
• Though all of the users felt like the current homepage is too long and requires a lot of scrolling, they liked the idea of being able to see at least some of the projects on the homepage

User Interviews

We conducted user interviews with a total of 12 volunteers (5 individually, 7 in a group session after onboarding). We wanted to know what convinced volunteers to join Hack for LA and what kinds of things they would expect to see on the homepage of an organization like Hack for LA.

The volunteers provided us with some insight into what their expectations were for a volunteer organization’s homepage.

1. 10/12 of the volunteers learned of Hack for LA through word of mouth (from friends or from peers that are in the same field as them). 2 of them of them learned of  Hack for LA from online groups  they are apart of (Slack or Facebook Groups)
2. All of the volunteers joined with the intention of contributing to a cause as well as growing their skillset. They were were also interested in gaining hands on experience in a way that would allow them to build their portfolios, gaining team/cross functional work experience, and networking.
3. All of the volunteers liked the idea of giving back to the community and putting their skills to use for a good cause
4. All of the volunteers liked the idea of being able to get a brief introduction to what Hack for LA does on the homepage

Information Architecture

Reworking the Site Structure

We were working on other pages within the website in addition to the homepage. The organization created new initiatives which required pages where users could go to learn more about them. This all meant that we needed to take a look at how these pages would connect and where users should be led when they choose to explore the site from the homepage. 

I worked with another designer on making the necessary changes to Hack for LA’s sitemap, as doing so would help us sort out the information that users should be presented with on the homepage before navigating to other pages.

Previous version of the site map

New version of the site map

Sitemap Legend

Ideation and Wireframing

Mapping Out the New Homepage

We already had certain homepage sections requested by the program manager to take into account. We used those requests in addition to our user priorities to create mid-fi wireframes that displayed the layout as well as some of the content that would be displayed on the page. We took this opportunity to play around with different designs of the same sections. We initially each came up with our own designs and later combined different sections of all our designs into the following homepage options:

Version 1

Version 2

Version 3

As we iterated options, we struggled with figuring out the order in which we should place the homepage’s sections. To sort this out, we sat with 12 volunteers to get their perspectives. We learned that the overall preferred order was as follows:

In addition to the order of page sections, we also wanted users’ insight on multiple design options for some of the sections. We were left with the following selections:

Link to page selections chosen by the volunteers we spoke to: 

http://rosalynbroddie.com/wp-content/uploads/2021/11/Testing-Results.png

Preparing for Next Steps

Next Steps

Conducting Further Research

Because part of the motivation for designing a new homepage was to give Hack for LA a more “official” presentation so that the organization could begin to bring itself out from underneath the umbrella of Code for America, we still needed to speak with another group of our user: Donors.

There was concern with interviewing potential donors who the program manager had contact with before we had an official homepage to show. The program manager was concerned that without an official homepage to test, donors  may be deterred from donating directly  to Hack  for LA, which would in part defeat the purpose of designing the homepage in the first place. As an alternative  solution, my team decided to use the volunteer  insights for a working design of the homepage that  can now be used to test with donors.

What I've Learned

Takeaways

Navigating the Unknown

With the previous projects I’d worked on, I’d grown accustomed to planning research and being able to reach out to each type of user to gather all the research we need before moving forward to ideating and  wireframing. This project forced me to think about how to work around any bumps I come across when it comes to ux research.