Manheim Township Historical Society
Website Redesign Case Study SPC, Fall 2013 Bri Piccari
Contents Introduction 03 The Client 07 Concrete5 09 Initial Meeting 11 Creative Brief 13 Deliverables 15 Design & Development 21 Hindsight 29
Introduction
Background information & the team behind the re-design.
Advanced Computers in Design Bringing the experience of the Software Productization Center to the classroom; graphic and interactive design and computer science students teamed up to work with a few local non-profits to either redesign an existing site, or create one from scratch.
Universal Goal To create an user-friendly website for both user and administrator with the content management system, Concrete5.
introduction // 4
The Line-Up: Computer Science Tom Hlavaty – Tom is a senior computer science major at MU. He was born in Lebanon, PA and currently lives in Millersville. He’s interested in Natural Language Processing and Machine Learning.
Zach Harsh – Zach is a fourth year student studying computer science at MU. He was born and raised in Lancaster, PA and currently resides in Strasburg. He loves to play and create video games.
introduction
// 5
The Line-Up: Art + Design Bri Piccari – Senior Art + Design major, concentration in graphic and interactive design. Interested in front end web design/development, lovely typography and lettering and successful problem solving and collaboration. Likes to consider herself as a jack of all trades, or at least tries to.
Oh, and I’m also the sole designer. Responsibilities – Any and all design collateral, communication enforcer, creative brief cop, font end/back end translator and small and large problem solving.
introduction
// 6
The Client Manheim Township Historical Society
Based out of Manheim Township in Lancaster County, PA. The organization is made entirely of volunteers aiming to preserve the area’s history and heritage one building at a time. Their current project is the restoration of the Stoner House, located in Manheim Township.
Our main contact was Roy Baldwin, the organization’s current president. He was always readily available via e-mail and invited us to a number of MTHS events, including a board meeting to present the project, meet the board and tour the Stoner House. A few weeks into the project, Roy was accompanied by Natalie and Greg, both members of the society. The three of them worked as a group to make decisions on behalf of the society, with Roy having the final say in all decisions. Natalie was our main source for assets and helped organize content and what images should appear on each page.
Client // 8
Concrete5 Content Management System
Concrete5 is a Content Management System (CMS). From almost no documentation anywhere online, the forums being full of tumbleweeds and the lack of logic behind the creation of it, I think my feelings for this thing are fairly obvious. On the plus side, my tweet showed up on their site (oops) and I finally got a handle on it. Last week.
In all seriousness, if C5 just had some better documentation and a tweaked a few things (I’m looking at you, ‘boxes’), I wouldn’t mind working with it. I mean, it did teach me a few things...
Concrete5 // 10
Initial Meeting Questions, Answers and the Unknown
For the first meeting, we were pretty full of questions, as was Roy. Introductions and biographies aside, we got down to the important stuff: • The Society would like their website to act as the centralized location for information, events, on-goings, etc., along with their social media. • The Society currently has 300 members, and a separate blog, which they would like to add to the new site. They need a site that is ‘clean, easy to use and navigate. Keep the older folk in mind.’ • If this website were a person, who would it be? Ben Franklin. Roy gave us a lot of information during the first meeting, I have so many notes, I couldn’t keep them straight, but he kept coming back to the main ideas.
initial meeting // 12
Creative Brief The end all, be all of signing your life away.
creative brief // 14
Deliverables All the things.
Case Studies So, uh, case studies. Don’t get me wrong, I understand the why, I just don’t completely get the how. I believe I attempted two or three of these and they might have been somewhat correct. I’ll leave this sort of thing to my teammates, throw the creative my way.
Content Inventory This one makes sense to me, even if it’s just a tad boring. Looking back we could have used this deliverable a lot more in the process, especially when it came to organization of assets. It was pretty easy to look at it and figure out what assets were missing. Keeping up with it turned into a bit of a problem, which led to a lot of confusion.
DELIVERABLES // 16
Personas Personas are great, it’s really helpful to put a face to the various audiences that are likely to be using and visiting the site. I try and reference these as much as possible, especially when considering age and technology gaps. It’s important to cater to the low level user, but also have the attention of the higher level user.
DELIVERABLES // 17
Card Sorting This stage got complicated and was pretty messy. We originally did the exercise with our client, as well as two others. Afterwards, while analyzing the results, I realized the results didn’t make much sense. I can only assume the directions weren’t as clear as they could have been or there was a misunderstanding. So I took it upon myself to do more card sorting, via an online service. I sent a link to five different participants, of which the results are to the left and below. The results of the previous card sorting with my best translation are on the next page.
DELIVERABLES // 18
DELIVERABLES // 19
Manheim Township Historical Society Site Map Version 1.0 October 08, 2013
HOME
ABOUT
ABOUT MTHS
ABOUT MT ALL CONTACT INFORMATION
PROJECTS
STONER HOUSE
RESTORATION COMMUNITY ROOM PARANORMAL ACTIVITY GALLERY
KEY = main nav item = page within nav item = page within subnav item
ORAL HISTORY GRAVE INVENTORIES
EVENTS
BLOG
GET INVOLVED
CALENDAR
IN THE NEWS
MEMBERSHIPS
TOURS
BLOG POSTS
NEWSLETTER
MEETING MINUTES
FUNDRAISING
DONATE ARTIFACT DONATION DIRECTIONS
Notes: - Contact can be found within multiple pages, depending upon page content (i.e. involvement contact information under get involved, project contact information under project, etc.) Also general contact info will be at the bottom of every page within the footer. - Social media at top of every page within header. - Donate widget on numerous pages. - Directions can vary, will be found when appropriate on numerous pages, central location directions at discretion of client, will clarify Thursday at meeting.
Site Map From the card sorting, the site map is created, which is basically a skeleton for the site’s navigation. It consists of primary, secondary and tertiary levels. Surprisingly, this went through more iterations than I would’ve guessed. When putting the map together, another team member decided his personal opinions were more important than the research we had done as a team. In some cases, some elements should be moved, despite card sorting, it’s important to keep error in mind. Sticking to the research for this site was important when considering the large age gap and technology usage. The second card sort had these two factors in mind and involved individuals of both audiences.
DELIVERABLES // 20
Design & Development And now the fun really begins.
Style Tiles Style tiles are helpful for showing the client stylized elements rather than just ideas and possibilities. This helped get the design signed off on rather quickly so development could begin. What could’ve easily been a very long process, surprisingly wasn’t. After an in class critique, of the two top left tiles, both seemed to be good directions to go in, but maybe I could combine them and go from there. The bottom two tiles are products of just that, with the one directly below being the tile chosen by the client.
DEsign & development // 22
ABOUT
PROJECTS
EVENTS
BLOG
GET INVOLVED
ABOUT
DONATE
PROJECTS
EVENTS
BLOG
GET INVOLVED
Contact Us
Oral Histories We want to hear your story!
Phone: (717) 569-6638 E-mail: mthistoricalsociety@gmail.com
Please contact Deb Frantz at (717) 569-6638 or mthistoricalsociety@gmail.com for more information.
ABOUT
PROJECTS
EVENTS
BLOG
GET INVOLVED
DONATE
(GPS Coordinates: 595 Granite Run Drive)
HOME
2155 Street Road Manheim, PA 12084
ABOUT
PROJECTS
EVENTS
BLOG
GET INVOLVED
325-123-5231 answers@email.com
2155 Street Road Manheim, PA 12084 325-123-5231 answers@email.com
ABOUT
PROJECTS
GET INVOLVED
DONATE
Stoner House Overlook Community Park 601 Granite Run Drive Lancaster, PA 17601
HOME
BLOG
The purpose of the project is to provide an accessible, restored historical farmhouse on the Overlook Community Campus main street with an educational history museum and home for the Historical Society for the benefit of the Manheim Township community, especially our children.
Donations can be made payable to “MT Historical Society” and mailed to the P.O. box address above.
We are also accepting written family histories, historic photographs from throughout the Township, and suggestions of names to contact for oral histories.
EVENTS
PROJECTS
Winner of the 2011 Historic Preservation Trust C. Emlen Urban Preservation Award Logo (see photos folder) The Stoner House is located at 601 Granite Drive in the heart of the Overlook Community Park in Manheim Township. The house faces the new Manheim Township Library and sits beside the renovated Stoner Barn which houses Barny’s restaurant and a banquet facility. It is perfectly positioned as the central location of community activities on the main street of the Overlook Community Campus.
Mailing Address: P.O. Box 5250 Lancaster, PA 17606-5250
The oral histories will be included in the Genealogy Archive and Research Center in the Stoner House, future home of the Manheim Township Historical Society.
ABOUT
The Stoner House
Manheim Township Historical Society
We are recording in-home interviews with long-time Manheim Township residents about the way of life, as they remember from many years ago to the present day.
DONATE
EVENTS
BLOG
GET INVOLVED
DONATE
This project would fulfill the vision of the Manheim Township commissioners who bought the property in 1998 to establish a multi-dimensional hub for Manheim Township. The restoration completes a traditional farmstead for community use in Manheim Township. The house has been vacant and in disrepair for 15 years. It has been considered a blighted property which must be restored or demolished in the near future to meet the visual desirability goal on the main street vista. The barn next door has been renovated and the new library across from the house opened in 2011. Due to financial hardships, the township can not fund the restoration. Therefore, the renovation has become a community-wide effort lead by the Manheim Township Historical Society, the Friends of the Stoner House, and the Stoner family to raise the funds necessary to save and restore the house.
$150,000 has been raised for this historic initiative and we are in the final push to raise the remaining $70,000 needed in order to complete the project and host the grand opening in summer 2014. The Stoner House is designated as a Level 2 historical site by the National Preservation Trust, which signifies great historical significance (scale of 1-4 with 1 as the highest).
See the final restoration plans here.
DONATE
The Stoner House Restoration Restoration of a historic homestead, circa 1750, in Overlook Community Park. 1991 Historical Sites Survey Update In order to prevent more historical sites from disappearing, it is crucial to understand the current state of buildings in the Township and to advocate for improved protection of historical sites. A preliminary review in 2013 concluded that of the 750 sites on the original 1991 survey, 64 (8.5%) of the sites no longer remain: Level 1 (highest rated): 5 of 35 (14.3% demolished) Level 2: 14 of 96 (14.6% demolished) Level 3: 28 of 263 (10.6% demolished) Level 4: 10 of 100 (10% demolished) Level 0 (unrated): 7 of 256 (2.7% demolished)
Wire frames
HOME
ABOUT
PROJECTS
EVENTS
BLOG
GET INVOLVED
DONATE
2155 Street Road Manheim, PA 12084
Wire frames are usually done in a low-fidelity manner, to just give the designer and developers and idea of where things are going. However, I quickly figured out that if I didn’t want the design to go haywire, I was going to have to create some pretty high fidelity wire frames, very specifically laying things out for the developers. A plus of high fidelity wire frames is that adding color, photos and some graphical elements are the only parts of the process left. 325-123-5231 answers@email.com
Join us for our Monthly Meeting
HEADER
HEADER
Sub-title
Sub-title
Praesent sit amet massa quis purus facilisis tincidunt non ac augue. Sed
Praesent sit amet massa quis purus facilisis tincidunt non ac augue. Sed
urna urna, interdum in elit sit amet, pulvinar condimentum dui. Nullam ac nisi lectus. Cras non gravida lorem, ut malesuada dolor.
urna urna, interdum in elit sit amet, pulvinar condimentum dui. Nullam ac nisi lectus. Cras non gravida lorem, ut malesuada dolor.
HOME
ABOUT
PROJECTS
EVENTS
The Manheim Township Historical Society meets on the last Tuesday
BLOG
of each month from 0pm to 0pm at 1234 Main Street, Lancaster, PA 17603. Directions available here.
GET INVOLVED
DONATE
2155 Street Road Manheim, PA 12084 325-123-5231 answers@email.com
ABOUT
PROJECTS
EVENTS
BLOG
GET INVOLVED
DONATE
Post title, 00/00/00 00:00PM Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada mauris a aliquet posuere. Maecenas bibendum dictum odio, sit amet volutpat ligula pharetra at. Mauris eget condimentum risus. Sed laoreet arcu arcu, et molestie urna feugiat consequat. Morbi mollis dictum magna, in fringilla turpis vulputat Read more...
Blog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum ornare quam, ut pulvinar augue scelerisque sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.
Archives August 2013 July 2013 June 2013 May 2013 April 2013
March 2013 November 2012 October 2012 September 2012
HOME
2155 Street Road Manheim, PA 12084 325-123-5231 answers@email.com
ABOUT
Post title
Post title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum ornare quam, ut pulvinar augue scelerisque sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.
PROJECTS
EVENTS
BLOG
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum ornare quam, ut pulvinar augue scelerisque sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.
GET INVOLVED
DONATE
Some layouts did change once development began, such as the blog page to the left lost it’s slider after looking at what assets the client had and realizing the majority of their images wouldn’t fit within the slider’s constraints. I weighed the options and decided pixelated images are not the way to go and ditched the slider.
deSign & development // 23
Initial Designs Usually the design process has to be a bit flexible, with changing assets, entirely too long copy and/or trying to resize awkwardly sized or low resolution images. Initial to final designs weren’t terribly different when we got to the final product. One of the biggest changes that didn’t come through on the final design was the light tan above a darker tan. It was something I had done to help break up some of the information and determine some form of hierarchy.
DEsign & development // 24
Working with the developers proved to be a tad difficult at times. As someone who’s used to not just designing but then developing my own sites, figuring out the best way to hand off files didn’t come easy. In the beginning stages, neither developer knew much HTML or CSS, but had somewhat of an understanding of it. I offered to code each page, so it could then be translated to a PHP doc, but the developers insisted on taking an existing theme, and modifying it based upon my designs. While they had thought this would be the easiest method of going about it, it proved to be more of a pain in the ass than expected. With the little documentation of Concrete5, a lot of time was spent figuring out how to customize certain aspects, let alone the best way of doing so. With their method chosen, I handed over the start of a CSS document, defining type tags and colors, and PDFs annotated with what was an H1, H3, etc. I did work side-by-side with the group for part of the development, pointing out, what to them looked like small issues, but are a larger deal to the designer. After offering to help multiple times, a more defensive teammate ‘allowed’ me to help out with the CSS and fixing spacing, typography and color issues.
DEsign & development // 25
As the process continued, I periodically took screenshots, with notes, pointing out changes that needed to take place. I ended up taking responsibility for the changes that needed to take place as less e-mails began to get answered. It was an interesting process that allowed me to get hands on with the development end of things, learning more about manipulating the themes to work for me, rather than against me and how much CSS really plays a role in the structure of a site.
DEsign & development // 26
Eventually, the end came and the live site looked pretty damn close to the designs I created. (Shout out to CSS). There’s too many pages to add every single on in here, so go check it out live, www.mthistoricalsociety.com. There were some limitations we couldn’t get around, or customize as much as I would’ve like to (I’m looking at you, ugly slider arrows). The amount of troubleshooting that went into things such as the navigation, which the secondary level decided to separate from the primary on rollover, and the awkward amounts of spacing concrete5 had around it’s boxes and layouts. deSign & development // 27
deSign & development // 28
Hindsight
It’s always 20/20. Always.
Understanding limitations Concrete5 was new to all of us, and apparently to a lot of the internet as well. With not a lot of documentation on the platform, we were left to our own devices to try and figure out what did what and why. Testing limitations became a large part of the development and design process. A lot of customization of code, diving into CSS and trying to find ways to lock positions for future changes by the client.
Better organization, better productivity Looking back, using some sort of project management system would’ve been super helpful in keeping track of what this person does, that person didn’t do, etc. The project plan should’ve taken care of this, but wasn’t updated often or very great for communication.
Putting a foot down Hopefully in the four (or more) years we spend in college, we learn a few things. In most cases, the majority of what you learn is about your intended area of study, and maybe quite abit about another area that might interest you. That being said, put your foot down when neccesary, stick to your decisions and be prepared to back them up. hindsight // 30
Overall, it was quite the learning experience and a valuable one, at that. I’ve got a bit more insight into working with difficult teammates, problem solving something I don’t understand and why communication makes or breaks a project.
hindsight // 31