Case Study: Refresh Website with Responsive Design

Website Developer for New Website (2015)

CBM of Maryland has provided a range of children's ministry services, including Summer camp, since 1935. The webmaster wanted to convert a Dreamweaver static page website, seeking advice and assistance building an Avada-themed WordPress site. The organization has several paid staff and volunteers who plan to be content contributors to the site. 

My role involved discovery and design, building wireframes, graphic design of site icons, a sitemap, building the image sliders, menu navigation, online donation form integrated with PayPal, and page layout. Additionally, I built a full web administrator guide and a Google Analytics dashboard to display website statistics.

Sitemap

Web page table organization

Design Considerations

• Select a font, color schemes and icons with a "kid-friendly, brighter" direction - introduced multi-colored ribbon across home page with single color branding on top-level pages. Used Adobe Color to find color scheme.

Document Colors - Option #1 (underground)

Primary Color	Secondary Color	#3	#4	#5
Blue	Green	Yellow-Orange	Orange	Red-Orange
364A73	518C86	F2C166	F25835	F23E2E
54 74 115	81 140 134	242 193 102	242 88 53	242 62 46
button shade 495672	button shade 6a8c86

Design Icons - Camp and religious concept

Home Page Design

• Use IAO Medical Ministry for design consideration and layout
• Use a Maryland map behind main content section on home page (see Medical Ministry site)
• Make sure home page slider is responsive

Design Page - Wireframe - Top-Level Page (Get Involved)

Launch Date:

March 23, 2015

Live Site URL:

http://www.cbmmd.org/

Design Tools:

• Google Draw for wireframe and sitemap documentation
• Adobe Color CC for color scheme and manipulation
• Adobe Photoshop CS6 for page icon design
• Chrome Developer Tools for CSS element discovery and modification
• Google Analytics for website statistics

Content Management System:

WordPress 4.1.1

Site Theme:

Themefusion's Avada was selected because it's one of the most popular and versatile WordPress themes. The theme has a built-in mobile-friendly design, flexible styling and navigation, easy Google Analytics integration, along with state-of-the-art image sliders. 

Site Plugin Modules:

• Gravity Forms and Gravity Forms PayPal Add-on
• Contact Form 7
• Media Replace - Allows replacing media without deleting and uploading.
• Mailchimp for Wordpress plugin provides integration with the After the Harvest Mailchimp listserv so supporters can sign up to receive an e-newsletter maintained on Mailchimp.

Project duration and labor:

The project took about 60 hours over 2 months

Google Analytics:

Google Analytics chart through April 1, 2015

---

KC Startup Hunger Relief Organization Needed a Website...Fast!

Website Developer for New Website (2014)

After the Harvest is a small startup organization devoted to distributing donated farm produce to area food pantries to feed hungry people in the Missouri-Kansas area. They formed the organization after breaking ties with a national organization, and they needed to set up shop quick. The organization with two paid staff needed an efficient way to communicate with volunteers, farmers, pantries and donors. Facebook and Twitter helped, but a website was crucial for After the Harvest to build their organization's following.

My role involved organizing a discovery session, gathering photos and text from staff members, selecting the WordPress site theme and plugin modules, building the image sliders, menu navigation and page layout, as well as posting events, images, and other content. Additionally, I built a Google Analytics dashboard to display website statistics.

Launch Date:

August 4, 2014

Content Management System:

WordPress 3.9.1

Site Theme:

Themefusion's Avada was selected because it's one of the most popular and versatile WordPress themes at a cost of $55, the only cost for the website project, including all donated labor. The theme has a built-in mobile-friendly design, flexible styling and navigation, easy Google Analytics integration, along with state-of-the-art image sliders. 

Site Plugin Modules:

• Timely All-in-One Event Calendar 
• Contact Form 7
• Media Replace - Allows replacing media without deleting and uploading.
• Mailchimp for Wordpress plugin provides integration with the After the Harvest Mailchimp listserv so supporters can sign up to receive an e-newsletter maintained on Mailchimp.

Project duration and labor:

The project took about 1 month and 30 hours for two people. 

Comments about the website:

• VERY nice Lisa and team!  Clean - professional - great action photos....I like it a lot. Well done. -- Rob Reiman
• Really great job on the website!  It's great looking, informative and (as nearly as I could tell) all the links seem to work as expected.  It definitely supports the professional image of our organization. - Jim Merrill, After the Harvest board member
• Oh my goodness! What an awesome website! Thank you for all your hard work and dedication to it! - Gerardo Martinez, After the Harvest board member
• I so agree, it is fantastic. Great job Matt, Derek and Lisa!! - Mark Smith, After the Harvest board member.
• This is really great. Thanks to you, Matt and Derek for your hard work. It paid off with a beautiful website! -- Sally Luck

Google Analytics:

Google Analytics chart through September 23, 2014

---