BAYVIEW HUNTERS POINT COMMUNITY LEGAL
Optimizing UI + UX on desktop, responsive mobile, & checkout flow for BHPCL.
TLDR;
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.
HIGH-FIDELITY MOCKUPS | 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.
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.
