Hack for LA brings professionals from creative backgrounds to build digital products with community partners and local governments, to address issues in the LA region. As a UX designer on the Hack for LA website, I was tasked with enhancing the navigation of the site through an upgrade of the footer and sitemap.
Role: UX Designer
Sector: Technology/ Non-Profit Organization
Hack for LA is continuously updating and redesigning their entire site, and with this, wanted to redesign their website footer. I designed a mega footer to showcase the depth of the site while enabling users to see the roundup of the site on the bottom of every page.
MEGAFOOTER
Desktop Mega footer | Option #1
Content grouped into sections based on current site hierarchy (as determined by current top navigation at the time)
Desktop Mega footer | Option #2- FINAL CHOICE
Content grouped into sections based on what we believe will be more easily navigable to users. The goal in this design was to create more natural groupings of information which can encompass all the site’s current content and can more easily accommodate the addition of new pages.
Mobile Footer Options
This footer takes all of the links of the desktop footer and organizes them into compact columns. Previous design on the right for reference.
The goal of creating a mega footer is to enable users to see the roundup of the site at all times on the bottom of every page. Traditional footers tend to be small with minimal content such as copyright information and social media icons. Mega footers are a great solution to house links to other important information such as contact details and copyright statements. They also provide additional navigation options that make it easier for users to find what they’re looking for. Prior to design, I researched the recent trends and necessities in web site footers and proposed the mega footer have the following requirements:
Provides the user with relevant site information
Prompts the user to take a desired step
Invert text colour using your design colors
Provide users with access to your social content
Make it easy for users to get in touch with you
Inform users of the usage of data collected on your site
As the website was recently updated and enhanced, I also created a visual sitemap for users to navigate whilst showcasing the various sections of the website.
SITEMAP REDESIGN
I created a visual sitemap for users to navigate whilst showcasing the various sections of the website as well as high level landing pages on the Hack for LA website. The stacking of pages was created to display repetitive content such as project pages and guides
