Passion Project: Matty K’s 7 Seas

CLIENT: Matty K's 7 Seas 

In the summer of 2016, a young local man passed away. A group of family and friends devoted to honoring his memory, set forth to raise funds to build a playground as a lasting memorial and tribute to his life. They posted a request for assistance with creating a website. I was happy to volunteer my services.

REQUIREMENTS AND OBJECTIVES:

With an opportunity to promote the charity at a well-attended local event, the group required a fast turn around on this simple website. The group wanted to be able to promote fund raising events and opportunities, identify the group’s intentions and board members, and needed to instruct potential donors as to how they could contribute to the cause.

MY ROLE: 

  • RESEARCH -  Performed competitive analysis and conducted user interviews to uncover pain points when contributing to non-profit charity organizations
  • WIREFRAMES -  Based on research findings I created lo-fidelity wireframes and quickly after hi-fidelity wireframes created in Sketch. These helped to more clearly define the functionality and get quick buy in to designs and strategy.
  • PROTOTYPES  - Because we were working on a very tight deadline I consistently updated Invision prototypes to communicate design changes to stakeholders.
  • BRANDING - Worked with stakeholders to design a logo that could be used effectively across all marketing materials  
  • ILLUSTRATIONS/ICONS - Created icons and assets as needed
  • UI and WORDPRESS DEVELOPMENT: Provided all work on the UI and built the site in WordPress

STRATEGY:

Keeping in mind that I had less than three weeks to complete the project, I spoke to a half dozen people who have donated online to causes in the past. The resounding message was the need for legitimacy and security.  I also relied heavily on competitive analysis. I took a look at ten websites of non-profit organizations to identify best practices and conventions. Hoping to keep the site as simple and user-friendly as possible I identified the need for 4 pages based on the synthesized data.

I created hi-fidelity mocks in Sketch of the four pages: HOME, ABOUT, FUND-RAISING EVENTS & DONATE. It was essential to me to provide an Invision prototype as well so that I was certain that content and design approach was acceptable to my stakeholders. We had little time for redesign.

HOME : hero image with enticing copy, primary button above the fold with a clear CTA , secondary button to lead the user to a page containing details about the fund-raising events

ABOUT: information regarding the charity, identifies board members.

FUND-RAISING EVENTS: lists current news and events, links to appropriate social media pages, contact information for coordinators.

DONATE:  hero image of the proposed playground, a large primary button with a clear CTA to donate (taken to Paypal), mailing address for donations, contact information to offer assistance other than financial.

Once the general content was approved I pivoted to work on the mobile version recognizing that much of our audience was younger and would more likely be exploring the site on their phones. I built the responsive site in WordPress and was easily able to adapt the desktop design to the mobile requirements. I provided a link to the draft site so that the stakeholders could monitor the status of the progress. This kept us on schedule as there was constant transparency as to missing content or edits that were required.*

We successfully launched the site on the deadline requested, the birthday of the young man whose life was lost. We continue to iterate on the design and the site has successfully begun to raise funds.

*ROADBLOCK!

Because this is a grass roots charity organization with the main focus to raise money towards a specific goal, saving money is a huge focus. I offered to host the domain under my existing hosting account anticipating that this would work seamlessly as I had done it several times before - more importantly it would not pass any of the cost to the non-profit. Building the WordPress site for Matty K’s 7 Seas.org was no problem. I planned on redirecting the domain name and masking the URL that would contain the root directory information - quick fix! However - I didn’t realize that when a domain is forwarded with masking it breaks the responsive ability of the site and allows only the desktop version to be viewed on every device whether it be mobile, tablet or desktop. Big decision: Do I

A. Set up multi-site hosting in WordPress. This would create a network but it is generally used for much more elaborate sites,

B. Purchase a new hosting account. This would allow the organization control over the product rather than navigating through my existing account. I would have to migrate entire site to this account.

C. Let it ride. Viewing the desktop version only does not seem to be a barrier to collecting donations. According to data - About 40% of users are viewing the site on mobile and only 14% of them are visiting the Donate page.

I think this is a satisfactory MVP. As of now the lack of responsive capabilities do not seem to be negatively deterring the collection of donations. Within the next few months - it will be determined whether or not this organization will continue to pursue other projects. I will make my decision to rebuild the site based on the outcome.