Week 9B Outside of Class: Art of Recycle Interview & Creative Strategy

Over the weekend I was able to talk to one of the owners of Art of Recycle, Josh, or as he's known to the public, Mr. Nobody Special.  My main questions for him were concerning the keypoints of Art of Recycle's mission, who he thinks is currently using his site, & what audience he would like to see using the site.

The mission is to heal and grow community.  The objective is to promote awareness of the value of the resources we are sending to the landfill every day and to teach skills to empower people to make use of these essentially free supplies in their world around them.

The current users are primarily local residents that are looking for information about workshops, as well as people searching for a local craft store.

Additional prospective users are in several classes: 1) people interested in the greater reuse/upcycle community (this is why we have developed the our neighbors page with scrap stores around the world and are working on collecting a list of upcycle artists and galleries), [and]  2) people looking for quality DIY tutorials on a broad range of reuse projects. We have a connected blog with our own tutorials on it.

Based on this interview and issues discovered last week, I've decided to go about the following creative strategy...

• Create consistent donation button
• Restructure and clarify navigation
• Create content pages that are easier-to-read, as well as more exciting
• Combine imagery and visual hierarchy to make Art of Recycle's mission and unique offering more apparent 

While doing research, I found Smashing Magazine's Non Profit Website Design: Examples and Best Practices to be a great resource.

Week 9B In-Class: Non-Profit Site Exploration & Analysis

Yesterday in class I spent most of my time looking through local & regional non-profits for this next project.  I've been really kind of obsessed with dance & theatre these past few weeks (& really most of my life), so I thought it'd be cool to look into doing a project related to one of my passions--outside of design of course!

  

(Ephrata Performing Arts Center, Art of Recycle, Lancaster Creative Factory)

 

(Ballet Theater of Lancaster, Theater of the Seventh Sister, Gwendolyn Bye Dance Center)

 

(Philadelphia Dance Theatre, Arden Theatre Company, Walnut Street Theatre)

(Lantern Theatre Company)

I ended up picking Art of Recycle to do this project for, again creating two responsive web pages.  I spent the rest of class going through & analyzing the site.

Organization 

Nav: About Us, Get Involved, Workshops, Parties, Bowling, Our Neighbors

• Blog, facebook, pinterest, twitter, meetup (all social networking links) are under About Us nav - optimal placement?
• Maps & Directions located under both About Us & Workshops - optimal placement?
• Contact Us located under About Us - optimal placement?  Should this be its own nav?
• Bowling is a new part of Art of Recycle's mission, not held within the same building or sharing all of the mission's keypoints.  Should this be a separate entity?

Issues

• Donate button inconsistent throughout site
• Our Neighbors content is all one page; each "subpage" is simply an anchor - this is different organization than the rest of the site. Also had to scroll a great length to return to menu
• Comic Sans...combined with Times New Roman
• About Us clicks to its own page - not all top-level navs do this - inconsistency
• Workshops & Calendar click to same page, just with slightly different anchor position  (Same for Parties & Craft Parties)
• Bowling clicks to its own page, different from Bowling Parties
• All text centered on page
• All-around a little difficult to read
• Text & menu is responsive-ish, while rest of page elements are not

Week 9A In-Class: Micro Project 2

Monday I teamed up with my classmate Steph to work on our second micro project of the semester.  For this project, we picked from a selection of icons & created a simple webpage around it.  Steph & I picked this mountain/outdoors-y icon & decided to create a webpage for a hiking app.  

Our app would bring together the essentials for a day of hiking:  a GPS-enabled trail map, an interactive compass, & current & future weather conditions. 

Initial website concept sketches, along with sketches for 3 apps

Due to time constraints we decided to make the homepage focused on only one aspect of the app.  After deciding the map would be the sort-of main aspect of the app, with the compass & weather forecasts as secondary features.  For the prototype app (& phone) featured on the webpage, I chose to use Golden Eagle trail in northern Pennsylvania.

Reference map of the Golden Eagle Trail

Illustrated map of Golden Eagle trail with current location (in yellow) & secondary features, compass & weather conditions.

Proposed icons for compass, map (main), & weather conditions, but in this case used to illustrated what was included in app.

Completed webpage for Hike Essentials

Week 8B In-Class: Final Website Redesign Critique

This week I completed & handed in my redesign for the Lititz Chocolate Walk.  It was certainly a rough few weeks, but I'm pretty happy with how it turned out.  I presented Wednesday for the final critique & received some helpful feedback, including...

• Extend map to give it more horizontal orientation - make flush with nav
• Extend footer & top nav to full-width
• Walk & Tickets buttons should have some interaction - motion or shift
• More hierarchy in listings
• Number locations on map
• Make sponsors larger
• Align fb button with rest of nav
• Change text color in footer on 2nd page
• Make header pattern larger or repeatable to avoid seam
• Add tertiary color to add to monochromatic theme
• More social media, even if they don't have it 
• Header image may need to be narrower on mobile
• Add title for subpage
• Add hover states to all nav, buttons, & links

Week 8A Outside of Class: Final Responsive Site for Lititz Chocolate Walk

Most of my other homework out of the way, I could finally focus completely on finishing this site.  I had a lot of work, but I think I pulled through.  I finally finished illustrations, figured out how I wanted the hierarchy in my content to be like, & was able to get down to coding too!