eCommerce Symbolic Giving Redesign

ecomm Redesign

Project Scope

  • My Role: Designer, Developer
  • Tools: Sketch, HTML, CSS, JQuery, Blackbaud Luminate Online
  • Deliverables: Wireframes, Landing Page, About Us Page, eCommerce Store

Project Overview

Gifts of Light is a symbolic giving program where users can make purchases on 'behalf of friends and family, and help people in crisis on their journey to recovery.' For example, you may decide to make a 'purchase' of an Emergency Kit, where the hospital will use that money to provide 'basic necessities, like a toothbrush and a pair of socks' to individuals in need of their services.

Design

Due to the time-sensitivity of the project, the client wanted to go directly from wireframes to development. I decided to create higher resolution wireframes that matched their already existing brochure for the same campaign, which included colour blocking to add as much detail as possible without a full design.

Wireframes

wireframes

Development

Having worked with Blackbaud's Luminate Online (LO) in the past, this build was pretty straight forward. I started with the page wrapper (navigation and footer) build, using the wireframes as a guide. Once the page wrapper was complete, I moved to style the eCommerce module. Some hiccups during this phase, as overriding some of LO's default styles can prove frustrating, to say the least. Once eComm was styled, I added a few animations using JQuery, and started adding client images and copy. I went through 3 rounds of edits with the client to work out any kinks and adjust styles that were not in the wireframes.

Launch

This is a much-needed refresh to the client's 2017 launch of the same campaign. We received a lot of positive feedback on the website for how much easier it is to find 'products' and overall more welcoming website to visit.

This campaign, which launched in 2019 and is still ongoing, and is one of the client's most successful campaigns. You can make a difference in someone's life by making a purchase over at Gifts of Light

Old Website

New Redesign

If you want more information about the campaign and an overview of the pages I created, I found this youtuber going through the entire site. Please enjoy ☺️