Web Design

Big Brothers Big Sisters of Long Island

About the Client

Big Brothers Big Sisters of Long Island is a non-profit organization whose mission is to create and support one-to-one mentoring relationships that create a positive difference in the lives of youth across LI.

BBBSLI web mockup

Overview

The Project

  • Responsive Web Design & Development, Marketing Designer
  • 28 Pages

Team

  • Fat Guy Media
    • Web Designer
    • Account Manager
    • Content Writer
    • Sales
  • Client

Year

  • 2020

My Core Tasks

Discover & Define

  • Sitemap
  • Research: Competitors, Brand Assets,

Design

  • Moodboard
  • Wireframes
  • Graphics Creation

Implementation

  • Live Build
  • Browser & Responsive Testing

My Primary Toolset

  • Microsoft Word
  • Microsoft Excel
  • Teamwork
  • Adobe: XD, Photoshop, Illustrator
  • HTML
  • CSS
  • WordPress
  • Google: Analytics, Tag Manager, Search Console
  • 3rd Party Extensions

Before

BBBSLI before mockup

Project Goals

  • Keep up with other BBBS websites by creating a user-friendly and visually appealing website – fully utilizing the national brand guidelines in the design
  • Increase leads for Big Brothers & Big Sisters
  • Boost monetary & clothing donations
  • Include an area for upcoming events on the homepage

The Challenges

Constraints

Constrained by the scope of the project: Since I was primarily using pre-existing content and similar pages from the previous site, our team had to research and brainstorm ways for us to create the best possible user-flows while matching the scope of the project.

The Reasoning

  • Applying the national brand guidelines to the local organization
  • Using the brand language as a guiding light throughout the design process: “Together We are Defenders of Potential”, “Standing Together for a Big Future”, and “Ignite their Potential”
  • The emphasis on active, not passive, actions the community can take in order to support the organization, regardless of method (ex. volunteering as a Big or through donations) – to keep this in mind throughout the user’s journey creation

Typography, Color Scheme, and Button Styles

BBBSLI - Type and Colors

Desktop Low Fidelity Wireframes

BBBSLI wireframe mockup examples

The Solution

  • Brand: Crafting designs with the brand colors, typography, and graphic assets provided in order to truly capture the national Big Brothers Big Sisters brand and values
  • Statistics: Using stats to emphasize the incredible impact BBBSLI has already made on the community
  • Mission: Championing the mission and history of the organization. They have a powerful purpose and by using repetition across the site, it is not a forgotten one
  • Littles/Bigs: Showcasing the young lives affected and their interactions with their Bigs, through yearly events, stories, blogs
  • Home: The homepage was designed with a grid layout in mind so the client could maintain and update the top right carousel with upcoming events and news as needed

The Results

The client was satisfied and happy with the results of the project. They continuously update the website themselves and are currently focused on featuring events. Thy have had great success in donations through the payment registration forms as well.

Analytic Goals Data:
August 2020 – August 2021

Users: 168K
Sessions: 226K
22%: Goal Conversion Rate
400+: online one-time or monthly donations
40,000+: goals met regarding scheduling a donation pickup

web mockup
web mockup
web mockup
web mockup
BBBSLI web footer mockup