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.
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:
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.
User Research
Determining Page Hierarchy
We set forth a research plan with some key goals in mind:
Generative Research Goals
Design Research Goals
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.
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:
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.
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.
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:
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.