top of page
DLab Home Page mockup.jpg

Timeline

January 2016 - June 2016

Area of focus

UX Design · Graphic Design

Team: Ryan Pierson, Shripriya Sudhanshu

Description

How can skilled tech volunteers find meaningful projects to join? How can tech for good organizations find volunteers to move their projects forward?

 

Democracy Lab is a nonprofit organization that connects these two groups, creating a community of social impact technologists. Through in person hackathons and a platform that promotes collaboration, they make it easy for tech savvy volunteers to find projects worthy of their skills and their time. In order to grow their impact, DLAB asked us to redesign their home page layout. 

I helped them create a new landing page that told their story effectively, engaging new projects and volunteers. I also helped them with banners and posters for their hackathon events which greatly increased turnout. 

WHAT IS DEMOCRACY LAB?

DemocracyLab_Logo_2019_TAGLINE.jpg

DemocracyLab is a non-profit organization.
They seek to advance tech innovation in social, non-profit and civic sectors through the power of tech-for-good volunteerism.

editCodeForGood_072719_MSReactor-064.jpg

SHARED

DIGITAL

PLATFORM

IMG_8278.jpg

TECH

FOR GOOD HACKATHONS

SOCIAL IMPACT TECH PROJECTS

SKILLED

VOLUNTEERS

DemocracyLab_white Icon.png

REDESIGNING THE LANDING PAGE

"DemocracyLab's landing page needs to be updated to provide clarity, improve trust and provide additional content that guides users."

Goals: Increase platform engagement, Reduce bounce rate, Improve SEO

Existing Home Page Issues

old DLab site 2.jpg

Hero image with different call to action buttons for volunteers and project leaders

Many found this confusing and weren't sure which they would be this early on the process, clicking neither. 

Jumps right into projects

Left many with questions: Who is democracy lab? Are they running all of these projects? How do I know which ones to look at?

Project search page is easy to use

However most either scrolled through the projects or clicked on one or two without returning to the call to action button at the top of the page. Simply browsing the projects does not help DLAB get more people to sign up onto the platform. 

Sponsors make what possible?

What do they do? How are they involved? Still unclear on what exactly DLAB does unless you go to About page. 

DLab Landing 1.png

Initial Redesign Sketch

Low-Fidelity Wireframes 

2 out of the 5 rounds of rough wireframes with some updates and changes based on client feedback and user testing

DLab Landing 2.png

Simplified CTA to one button for all

Abbreviated project highlight section

How it works sections clearly define the two different user's paths

Testimonials from project leaders and volunteers

Hackathon section describes events DLAB hosts and allows corporate partners to sponsor their own

CTA at end of page ensures each user has multiple easy opportunities to join

DLab Landing 4.png

Updated menu bar and slogan 

Led with brief "about us" section based on testing

Changed "how it works" section to include icons, reduced text and secondary CTAs

Shortened  testimonials to one at a time to allow for length of quotes DLAB gathered

Simplified Hackathon section and moved sign up form to secondary page

Reordered page so sponsors and partners were grouped

Ended with smaller CTA - single button like at top of page

FINAL LAYOUT

DLab Home Page mockup.png
DLab Landing 6.png
Dlab Mobile.png

HACKATHON BANNERS

Digital banners for DemocracyLab's quarterly events. Registration via Eventbrite was greatly increased with the improved graphics and posters. 

DLab Hack-Trick's Day Banner .jpg
DLab Hacky New Year.jpg
DLab Hack Thanks Banner Final (no textio
bottom of page