The portfolio of Jonathan Boho, web developer and designer

Redesign: Media Center

Media Center was a rich-media site that features the best daily photojournalism and videography from The Post and elsewhere. This redesign includes a mobile-first responsive approach that greatly simplifies the navigation and gives a larger showcase to the photos and videos that comprise the site across mobile, tablet and desktop platforms.

Features

• Mobile-first, responsive design built withcustomized CSS framework adapted from Bootstrap and ZURB's Foundation.
• Custom WordPress backend for a scalable, more MVC-like approach to its structure.
• Javascript frameworks and plugins: Modernizr, jQuery, Packery and Handlebars.
• Responsive photo gallery built as custom WordPress plugin.

My contributions

• Worked with stakeholders to create the design and built live comps for the project.
• Helped develop the structure for the custom WordPress architecture, which was then programmed by our development team.
• Wrote all front-end code (HTML, CSS and Javascript) for site and custom plugins
• Currently scheduling moderated user-testing to gain user feedback on the design and functionality prior to launch.

Redesign: The Denver Post

The Denver Post redesign was a massive project that has undergone a couple of stages of design and development. In the initial stage, I was the lead designer on the project. I inherited an existing design and proceeded to revamp it by interpreting the needs of numerous internal stakeholders.

The orginal intention of the project was to make it a responsive, mobile-first site. However, needs arose that forced us to deploy the project early to an existing CMS that could not handle responsive design, and the project was scaled back.

Since then, I have been developing new comps based on the redesign that are closer to the original vision of site. Development of a proof of concept with these designs in WordPress is underway with the hopes of being able to switch to this less costly and highly flexible open-source alternative.

In addition, this alternative design has the added advantage of a full month of user testing we performed on the site in February 2014. Feedback from those sessions have allowed us to consider pushing The Post into a completely new direction, and a version 3 of the site is currently in the wireframing stage. For now, however, this is the working design.

Features

• Fully responsive, mobile-first design.
• Progressive image enhancement for lighter image weight on mobile devices.
• Reduced ads and third-party widgets for better performance and higher focus on content.
• Bubble nav capable of exposing all subtopics without use of scrolling.
• Greater emphasis of in-article promotion, which is designed to keep readers who come into the site via external referrers.

My contributions

• Helped develop original design and comps for home page, section page, search results page and over 20 custom leaf pages.
• Built all front-end code for Wordpress custom theme.
• Completed extensive revisions and offshoot products such as templates for custom content and speciality channels for events such as the Super Bowl and Olympics.
• Developed design for a variety of third-party widgets.
• Led team through user-testing process that resulted in extensive revisions to ad map and potential cost savings of $6 million in operating costs.
• Presented findings of user testing to executives; obtained consensus on changes to site.

The FIlm Yap www.thefilmyap.com

This Indianapolis-based film-review website is a custom WordPress theme. Previous to this design, the site's founders had been using an stock WordPress theme and wanted a custom theme to better match the site's irreverant, outsider-ish look at film. I created both the custom theme and the logo for the site.

Features

• Bold design places emphasis on latest content and reviews.
• Designed to handle coverage of special events such as the annual Indianapolis Film Festival.
• Added areas for promotion and advertising.

My contributions

• Created the site design.
• Built the custom WordPress theme including a number of custom plugins for ad management.
• Designed the site's logo.
• Served as site administrator from 2009-10.

Redesign: Digital First Media Native iPhone application

This version of Digital First Media's iPhone and iPad native applications features a cleaner interface and a full, multi-level navigation that includes options for customization and favoriting topics. In addition, social-sharing options are greatly enhanced. Although the above prototype is of The Denver Post, this app is scheduled to be deployed across all of Digital First Media's 40-plus newspaper properties.

Features

• Native app design for iOS.
• Customizable navigation.
• Clean look and feel.
• Templatized structure makes it easy for fast deployment acoross a number of properties.

My contributions

• Helped create a presentation of the app's design to gain internal stakeholder approval.
• Led and art-directed the team that built the wireframes and high-fidelity comps to send to the development team.
• Communicated with the offshore development team to ensure the app's design and user flows were clear and executed properly.
• With my UX team, executed moderated user-testing to gain user feedback on the design and functionality of the app and made subsequent changes based on the feedback.

American Homecomings formerly www.americanhomecomings.com

American Homecomings is an award-winning site designed to tell the stories of veterans returning home from combat in both the Iraq and Afghanistan wars. The site was built in WordPress by The Denver Post's newsroom development team with stories coming from all of The Post's sister properities. In 2012, the site won an EPPY for Best Community Service of a Media-Affiliated Website.

Features

• Mobile-first responsive design.
• User-generated content section of the site is dedicated to first-hand accounts of veterans' lives.
• Allows veterans to find resources for jobs and physiclal therapy.
• News and press releases from veterans' organizations.

My contributions

• Created the site's design using Photoshop and InDesign for initial mockups.
• Built the front-end code of the home and inner sections that was handed to the development team to build the site's custom WordPress theme.

RCR8

RCR8 is a map-driven single-page web application that helps people find and share great places to go for outdoor recreation.

In addition to the app, there is a desktop, non-map-based version that sorts listings by state and a widget for publishers to add to their site.

For the next version, plans are to port the application to the Angular framework for greater speed and reliabilty.

Features

• Adaptive mobile design. Fully responsive.
• User options include adding spots through the app as well as filtering results by natural attrubtues or by location.
• Partner widget available in 300 and 600px sizes for external third-party publishers as a WordPress plugin.

My contributions

• Created the design and built the front-end framework and code for website and widgets.
• Assisted in building the initial back-end PHP framework that powers the app.

Failed to Death childfatalities.denverpost.com

Of all my work at The Denver Post, I am proudest of my involvement with this investigation for the simple fact that this project exposed an unaceptable state of affairs within Colorado's state welfare system. Denver Post and 9News investigators found that 72 of the 175 Colorado children who have died of child abuse over the past five years were known to human services before their deaths.

This multimedia presentation was part of a broader online package on the investigation. It ties together all the heartbreaking details, including original state documents, video interviews and the stories and faces of the children themselves.

Features

• Mobile-first, responsive, single-page multimedia application built with a custom PHP framework.
• Custom built PHP-based CMS for reporters and editors to enter information, documents and photos.

My contributions

• Worked with reporters to develop the admin tool for the site, which aided in organizing documents during the investigation.
• Designed the project, uploaded and compressed assets and coded the site's front-end presentation.
• Turned the code into a reusable framework for future projects.

Colorado Drives

The original front page of Colorado Drives was a link that went straight to the listings, which, at the time, we thought would be a nice touch since it took people right to where they could start looking at cars. Instead, it turned to be a rather unfriendly and overwhelming experience.

With that in mind, I redesigned the home page to center around a short form to send people to the listings and feature some of the site's reviews and content, which had been completely lost in the original version.

The interior of the site is handled and hosted by a white-label vendor called Vast, who also powered TruCar. The next step would be to revamp some of those pages to make for a more consistent user experience, and to that end, we've engaged on some user testing that has given us some great ideas on a new direction.

Features

• Brief form helps guide people into the listings more elegantly by limiting choice to a few key items.
• Page highlights hidden content and features a broader, more iconic main navigation.
• Bolder visually overall.
• Built using WordPress.

My contributions

• Designed and coded the front-page comp, which was in turn added to the site by our developers.
• Developed the original comps for the inside pages, which were intrepreted by Vast's team of developers.
• Led team to user test results in February. In the process of reviewing the results of those tests to make visual changes as well as changes in how we make money off of the site.

Colorado Variety Performers

Vaudevillians do still live among us. This short, little one-off project for Denver Post's Media Center shows off some great content with a vingette and video for each of the six performers. The front carosuel features a looping, full-body video of each the performers doing a signature trick.

Features

• Fully responsive with flexible-width video player.
• Looping videos in a stage carosuel serves as links to each performer's story.

My contributions

• Did all the coding and primary design, with the lovely stage designed by Joe Jackson.
• Hours of work trying to compress 200MB video files.