CityServe.us (in development) was planned to help fill a communication gap in the Palau Association's lineup. They help bring together the civic, business, and faith institutions in cities around the world. Gospel Movements.org served the faith leaders in cities, and a new Season of Service website was going to involve the service-oriented groups. CityServe.us was designed to cast the President's vision to the civic and business communities (the secular groups) in cities.
After interviewing executive stakeholders, I wrote a creative strategy outlining this plan, creating CityServe.us.
CityServe was built with Statamic CMS with Zurb's Foundation framework. It was prototyped very quickly with DivShot's web app, using Foundation 4 (screenshots at bottom).
I really like Divshot, it's very fast and delivers usable HTML, CSS (even SASS!) and JS that can be leveraged in a project immediately. It's really useful for form 'sketching' as well.
Zurb Foundation was used for the starter framework. I added some extra conditionals in the Statamic backend to account for media embeds of different heights (such as the Soundcloud widget seen here).
Tag navigation was designed to be an important navigational aspect of the site. Various communities and user stakeholders from various areas of interest would be able to find content relevant to them.
Article view. Foundations excellent Section widget allowed for a tabbed interface in desktop widths, and collapses to an accordion view for mobile viewports. A grid element in the CMS allowed users to add links and icons in the "further reading" section.
The tag-based navigation is prevalent throughout, and supports the distinct and overlapping multiple audiences and interest groups.
Homepage prototype, done with Divshot using the Foundation CSS framework. The production site leveraged the new, semantic Section module, which transforms the tabbed area at bottom to an accordion design pattern in mobile widths.
Article Template - Desktop & Mobile Views
Rapid prototyping with HTML provided many advantages over prototyping with "traditional" tools like MockFlow, Keynote, or InDesign. Foundation's "mobile first" philosophy allowed a quick build, easy iterations (while the client watched - you know they want to!), and immediate, testable, mobile & tablet versions.
While I could have done this manually (my own process involves Jade templating), the drag-and-drop UI is faster in many cases. For web products, I'd choose DivShot to kick things off.
