Be Honest CMS

One of my most rewarding moments from college is when I was able to make a low-fi content management system (CMS) from scratch, to help support the graphic design program’s biggest event of the year. You can read more about Be Honest here, but as a quick snapshot, Be Honest is an opportunity for Sophomore, Juniors, and Seniors to ask for feedback from professionals and community members while showcasing their work within the professional setting of Wieden and Kennedy’s Portland office. Be Honest had quickly become one of my favorite events each year since it represented a giant celebration for everyone’s growth and hard work throughout the year. For the 2018 showcase, I was asked to help out with project managing, designing, and developing the website experience.
The Project Brief

The ask for this project was to develop two website builds a pre-registration splash page with basic event details. In addition, we needed to create a full one-page website featuring an event timeline and all 120 student profiles. Each student profile needed to include the student’s first and last name, 3–4 photos of their work, a link to their portfolios, and a link to their Instagram account.

Considering the mass number of student profiles it became evident early on that we needed to rely on a template or a data-based system to develop all these profiles in a timely matter. In years past, the team working on the Be Honest website had used a system of utilizing HTML and PHP to create a quick template and variable base system to satisfy the need. This worked, but it ultimately relied on the developer to have specific file names and required body copy to be manually inputted into the HTML files, required a large file structure system on the developer’s computer, and ultimately required knowledge that most students do not know. There had to be a better way...




The Inspiration

Before taking on this project, I worked as a teacher’s assistant within the graphic design program for one of the beginning coding classes. In this role, one of my duties was to help with assigning and inputting in grading into the grade sheet. This grade sheet was brilliant! On the front-end, it worked as a Google Sheet doc. Through the back-end though, the sheet was connected to a custom website where students could type in their Student ID number in and be able to see their individual project grade(s), their overall grade, and what they were missing—in real-time.

Once digging deeper into the overall developer system for the Be Honest website, I thought can we reuse the same concept from the grade sheet? The answer was—yes. It quickly became clear that the spreadsheet could act as the data-based system and CMS system that we were looking for earlier in the process. Since the event registration relied on students filling out a Google Form, that meant the results were collected and displayed as a spreadsheet in the end. Once registration closed, we connected an aJAX script that converts the spreadsheet into a JSON document whenever an edit is made in real-time. The full code example  can be seen here.



Results

Once this system was turned on, all we had to do to make edits to the website was to make adjustments to the spreadsheet. This form of editing, through the spreadsheet, requires no coding knowledge which means virtually anyone who understands basic aspects of the system and Google Docs can edit the site seamlessly at anytime just like a natural CMS system.

One fact that has been super exciting since developing this system, is that students and instructors of PSU GD have continued to use this system in other website builds. Not only is it still being used for the Be Honest website, but it now powers 4 different event based websites for the program. This is huge considering how much time and effort this system saves staff and students, eliminates downtime in between edits, and almost anyone can manage these sites without knowing how to code or having to pay for software. ✌️