Hack for LA
Homepage Redesign
Project Overview
Hack for LA is a non profit organization that brings together civic-minded volunteers to build digital products, programs and services with community partners and local government to address issues in our 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 researcher, UI design
Tools: Miro, Figma, Github
Team: Design Lead, Project Manager, UX designers, UX researchers, developers
How might we properly introduce Hack for LA to the growing number of participants in the organization?
A New Face
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 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 was 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 three main goals in mind while designing the new Hack for LA homepage:
Communicate what Hack for LA has to offer and how people can get involved to our users
Present some of the new communities and projects that had been recently introduced within the organization
Resulting Pages
We designed 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
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 hierarchy 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 pages that Hack for LA lacked
A brief mission statement about what our organization is and does
Info on the impact the organization’s projects have had
Images that help to convey the work that the organization takes part in and/or the impact it has had
A section that gives information about donating to the organization
Usability Testing (Original Homepage)
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 change drastically anyway, we figured it would still be helpful to hear a little about the things that could remain on the new homepage in some way (such as some 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.
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 learned of Hack for LA from groups they are apart of (Slack or Facebook Groups)
All of the volunteers joined with the intention of growing their careers. They were 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
All of the volunteers also liked the idea of giving back to the community and putting their skills to use for a good cause.
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.
Stakeholders wanted the primary purpose of this sitemap to be a point of reference for the team.
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:
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:
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:
Mission statement
Excerpt of the projects Hack for LA is currently working on
The social causes Hack for LA works on
Info about the impact that Hack for LA’s projects has had
Winner!
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.