KULA Causes

Building a platform to drive meaningful brand loyalty

Project Summary
While working at Fruition as a UX Designer, I had the opportunity to help build a unique fundraising platform that allowed schools and non-profits to raise money for their causes through brand loyalty.
Role
Sketches, Wireframes, Visual Design, Concepts, Mockups, Design Support

Year
2016
KULA Causes
Project Background
KULA Causes was a fundraising platform founded in 2011. Their goal was to revolutionize fundraising by moving away from traditional, outdated forms of fundraising such as chocolate bars, raffle tickets, bake sales and silent auctions.
Instead, KULA allowed supporters of local schools, community groups and causes to donate by making everyday purchases from their favorite brands through KULA’s Shop, Earn and Donate (SED) ecosystem. By allowing loyalty members to seamlessly convert their rewards currency into a donations, KULA inspired consumers to buy from certain brands by leveraging consumer values.
To make their platform a success, the KULA team engaged the team at Fruition to design and build both a responsive, public-facing website powered by WordPress and a feature-rich administrative dashboard powered by Drupal. 
Project Deliverables
1. Responsive public-facing brochure website design powered by WordPress.
2. Customer-facing landing page templates for causes, sub-causes and campaigns
3. Administrative dashboard design for administrators, managers and supporters powered by Drupal.
My Role
I worked closely with the Creative Director, Lead Developer and project managers, providing sketches, wireframes, concepts, visual designs, mockups and general design support as needed.
The Process
Thumbnail Sketches
We utilized a mobile-first approach, sketching on lined graph paper. Important calls to action and features were highlighted in green. The Creative Director provided feedback (seen in pink) and minor revisions were made before moving on to wireframes.
KULA — Thumbnail Sketches
KULA — Thumbnail Sketches
Wireframes
Medium fidelity wireframes for both desktop and mobile devices were produced using Axure. We created multiple rounds of wireframes for the cause, sub-cause and campaign page templates, public-facing website and administrative dashboard.
KULA — Wireframes — Cause Landing Page Template

Cause Landing Page Template

KULA — Wireframes — Sub-Cause Landing Page Template

Sub-Cause Landing Page Template

KULA — Wireframes — Campaign Landing Page Template

Campaign Landing Page Template

KULA — Wireframes — Donate Landing Page Template

Donate Landing Page Template

Visual Design
KULA already had a logo and color palette set in stone so we started there and produced four different visual looks using a campaign page template. I explored a variety of fonts, tab styles, button styles and visual elements. Ultimately, the tabbed navigation at the top of the page was abandoned but the basic framework for the page was carried over to the mockups phase.
KULA — Visual Design
KULA — Visual Design
KULA — Visual Design
KULA — Visual Design
Mockups
Once the visual design was finalized, we moved on to mockups. Many elements were reused to save time in the development phase.
KULA — Mockups — Cause Landing Page Template

Cause Landing Page Template

KULA — Mockups — Sub-Cause Landing Page Template

Sub-Cause Landing Page Template

KULA — Mockups — Campaign Landing Page Template

Campaign Landing Page Template

KULA — Mockups — Donate Landing Page Template

Donate Landing Page Template

Results & Lessons Learned
Results
Unfortunately, KULA Causes came to the end of their journey in 2017. Schools and non-profits using KULA were able to generate close to 5 million dollars in donations.
Interested in hiring me for a project? Get in touch!

More Projects

Back to Top