BAYVIEW HUNTERS POINT COMMUNITY LEGAL

Optimizing UI + UX on desktop, responsive mobile, & checkout flow for BHPCL.

portfolio_mockup1_team.jpg
 

TL;DR

BHPCL wanted to improve the user experience of maneuvering their website—from finding a case a user would want to donate to, to revamping the donation checkout flow.  As the Project & Design Lead for both desktop and responsive web on mobile, I worked closely with the rest of the designers to create designs and implemented them with our developers to make sure the designs were feasible within the website platform's current restrictions.

Ultimately, we delivered and shipped our design solutions at the end of the Social ImpHACKED hackathon!  Click to see the final deliverables for desktop, responsive mobile, and check-out flow.

 

 

OVERVIEW

Social ImpHACKED was a Hackathon hosted by Remind in the city of San Francisco that brings together tech and nonprofit worlds to provide technical assistance for local Bay Area nonprofits.

Over the course of a weekend participants split into multiple teams and paired up with a nonprofit of their interest, and were given the opportunity to solve some of the small but tangible problems that nonprofits face when it comes to increasing efficiency and building relationships with existing & future clients.

I chose to work with Adrian Tirtanadi at Bayview Hunters Point Community Legal—an award-winning nonprofit that is passionate about providing justice to the community.  He and his team are working to create the country's first system of universal access to legal representation, and are currently representing the underserved San Francisco communities.

Our challenge was to ultimately increase the motivation to donate to individual client cases featured on BHPCL's website.

 

 

ABOUT

BHPCL opened its doors in 2013 to serve those in the Bayview/Hunters Point neighborhood because it was the only high-need neighborhood of San Francisco without a legal aid office.  After years of watching existing legal aid nonprofits turn away more people than they helped, they are changing the system by helping those who can't get the legal representation they need.

 

TEAM CHALLENGE

Our challenge was to ultimately increase the motivation to donate to individual client cases featured on BHPCL's website.  We were able to complete this by improving both the user's onboarding experience and the donation check-out flow.  To make sure these changes were maintainable for future designs, I worked with a team of designers and developers to ensure our proposed designs were feasible, all while keeping to BHPCL's existing brand guidelines.

ROLE: PROJECT & DESIGN LEAD

As the Project & Design Lead on a team of 8, my role during this 3-day hackathon consisted of working closely with the other team members (both designers & developers) and overseeing all aspects of the UI and UX of the website for both desktop & responsive mobile designs.  Managing this project involved job story/user analysis; competitive research; lo-fi wireframe ideation & sketching; hi-fi mock-ups; and final implementation working with developers.

 
 

 
 
 Hackathons are a mess of post-its, papers, charging cords, and snacks.  Lots of snacks.

Hackathons are a mess of post-its, papers, charging cords, and snacks.  Lots of snacks.

 
 

 
I want to help BHPCL with their cause.
These stories break my heart.
How can I help sponsor a case?

DESIGN PROCESS

  1. Define the Problem/Job Stories

  2. Competitive Analysis

  3. Ideating & Sketching

  4. Hi-Fidelity Mock-ups

  5. Implement!
     

1. DEFINE THE PROBLEM / USER JOB STORIES

In order to improve the user's experience, we first had to familiarize ourselves with the current flow of BHPCL's website.  After doing so, we created user job stories and developed hypotheses that would help us create a solution that is better suited for the hierarchy of information that is needed to make the donation process as seamless and as easy as possible.  Doing this helped us clearly visualize the step-by-step process we needed to keep in mind when designing for both the user's and BHPCL's business needs.

 
portfolio_whiteboard1.png
 
 

2. COMPETITIVE ANALYSIS

To find out what is currently out there when it comes to donating to a [compassionate] cause, we did some quick research on other popular crowdfunding & fundraising platforms:

 
 
 
portfolio_competitor1.png

For each competitor, we performed a website tear-down to see what was working and what was not working for us as 'users'.  With those tear-downs we noted which interactions and features from each that we thought would be great to incorporate into the redesigned BHPCL user experience.

 
 

3. IDEATING & SKETCHING

Once we narrowed down which interactions and features we felt best suited both BHPCL's needs and the user's needs, we wanted to explore as many options as possible in a short amount of time.  With the given time constraints and scope of the project, I led a Lean UX design studio for a quick ideation session.

 
IMG_2311.JPG
 

During this session, we made sure that we kept both BHPCL's and donors' needs in mind while sketching and iterating on UI ideations for both desktop and responsive mobile web.  We went through feedback for the sketches and went through this process several rounds until we finally converged on a set of UI sketches that we felt was intuitive and would improve the flow of information for the user.

 

4. HI-FIDELITY MOCK-UPS

FOR DESKTOP WEB

After we wireframed with the selected UI sketches, we headed straight into hi-fi prototyping.  Below are the changes we proposed (and implemented!) for the case list card page and the individual case pages for desktop web.

 
 
 
 
 

 
 
 
 
 

FOR RESPONSIVE MOBILE WEB

After we finished designing the desktop web pages, we took a look at the current responsive mobile website.  The UI and the current arrangement of information hierarchy made it difficult to read what was in front of us, so we made a few simple changes that helped tighten up the structure of the given information about "Sponsoring a Case."  The following shots and annotations show the changes we made for the case list card page and the individual case pages for responsive mobile web.

 
 
 
 
 
portfolio_caselistcards-RW-individualafter2.png
 
 

Here, the animations show a scroll-through of the Case List page on mobile responsive web, as well as the new hamburger menu that features an accordion style dropdown for sub-categories.

Changing the menu color to be opaque and reorganizing the tabs to be on a sub-level make it easier for the user to navigate through the mobile webpage.

 
 

 

Moving on to the individual case pages, the following shots and annotations are the changes we proposed to implement for responsive mobile web.

 
 
 
 
 
 
 
 

THE DONATION CHECKOUT FLOW

Our last challenge to tackle was to improve the donation checkout flow.  After conducting a quick tear-down of the other popular crowdfunding & fundraising platforms that we did research on, we converged on a set of changes that we felt would improve the donation flow and provide the user a better sense of security and fulfillment.

 
 
 
 
 

5. IMPLEMENT!

WORKING WITH OUR DEVELOPERS

During our ideation rounds, we worked and communicated with our developers to make sure that the designs we wanted to implement were actually feasible.  Since we were restricted with the website's existing platform limitations [Wordpress], some of the technical work they tackled included:

  • How to develop for maintainability [primary challenge]

  • How to make changes to the donation flow, which was handled by an open-source WordPress plugin—meaning, whatever changes are made to the open-source file will directly affect whatever websites are using it

  • Creating a plugin extension to take advantage of existing hooks and override default behavior

Once those tasks were solved, we were able to deliver and ship the final product over to Adrian!

 

 

THE TAKEAWAYS

With the given timeframe, leading a team of 3 other designers and 4 developers to solve & ship a problem was definitely a challenge. While there were moments where certain design concepts weren't implementable due to platform restrictions, it was highly rewarding when you're able to put your heads together to come up with alternate solutions that work just as great, if not better, than the original idea.

The best thing is we were able to deliver what we promised, and our client was happy with the end result.