fade_in
Winner of the 2015 MITX Award for Most Innovative Non-Profit Marketing.
 A Finalist in the 2015 MNN Non-Profit Excellence Awards for Excellence in Communications.

By far the most educating and exciting project of my career; working as the Creative Director & Designer, Chief Information Architect and Principal Web Developer. I lead the functional, and technical aspects of this project from concept to completion.  Including driving a Strategic & Heuristic Review, Competitive Analysis, User Persona Development, Content Inventories and even conducting Stakeholder Interviews.

From there I moved onto the Design Stage, including mood-boarding, wire-framing, and designing an effective navigation.  In fact, the greatest challenge we faced in this project was the navigation; with the breadth and wealth of information provided on the site, it was a huge undertaking to find a balance to present it in a way that is both usable and understandable. While still maintaining both political and business objectives, and not becoming overwhelming.

Update:  While the UI/UX, and IA Components and remain intact, since my departure the organization has made design changes that have altered the typography and color palette of the website from that which it was originally intended.

Completed: January 2015

 

See It For Yourself!

The Process:

 

fade_in

 

Download the Redesign Roadmap Download the Wireframes

 

Out With The Old:

 

fade_in

 

The new website carried all existing features, and added the following:

  1. Eliminates both front end and back end pain-points

    1. Pain Point: Updates to homepage calendar needed to be manually updated and monitored on a daily basis, and then changed in at least 2 spots.
      1. Solution: Calendars now update automatically, can be custom propagated across various pages, and through a Responsive JQuery slider multiple months can be viewed without leaving the page. Events maintain all previous options, while adding several more. They can be color coded as well as sorted by associated Fenway Programs. Event pages allow for images of the entry to help aid in directions, which as also now available right from the event page. I have also added buttons on each event page to allow you to automatically input the details of an event into your own Google, Apple, or Exchange-based calendar seamlessly.
    2. Pain Point: Previous pages were created by a developer whose coding ability was self taught, WYSIWYG components were unreliable due to the improper and contradictive use of inline CSS and linked stylesheets.
      1. Solution: Page updates now have a customized, reliable and easy to use Visual Composer, with Powerful CSS Stylesheet driven front-end design to ensure typographic hierarchy remains consistent across all pages within the site.
    3. Pain Point: Provider profiles would need to be swapped out and hand coded in an antiquated table layout.
      1. Solution: Each provider and staff profile is now modified and maintained in a unique user profiles, with check box attributes to allow them to be automatically propagated across various pages within the site. Adding new providers is as simple as creating a new profile. A provider moves from the South End to the Borum, simple, simple uncheck one box and check the other. Done.
    4. Pain Point: The previous website needed to have two sites maintained, one mobile version, and one desktop version.
      1. Solution: The new site is fully mobile optimized, components that are not relevant on mobile, are not shown on mobile. Menus, and selectors that don’t work as well, have been modified to accommodate mobile UI standards fully automatically. As well as with narrower screens on older desktop computers.
    5. Pain Point: Media within the old site was difficult to find, due to poor labeling, poor organization and lack of maintenance.
      1. Solution: The new site employs a system to easily sort and catalog all images, based on the type of image or suggested use.
  2. Streamlined Navigation for Desktop, Table and Mobile

    1. Desktop & Tablet (Landscape) – Incorporates both a new mega-menu, and traditional dropdowns to illustrate the full breadth of Fenway Services at a glance. Presented in a useable, and clear manner, visitors will be able to find everything they might want to know. Whether they are prospective or existing Clients, Donors, or Employees.
    2. Phone & Tablet (Portrait) – Incorporates a mobile styled hamburger button that expands into a touch-friendly menu hierarchy. Activated by button or swipe, the interaction is designed to feel much like a native mobile application.
  3. Enhanced Search Functionality With Auto Suggestion

    1. Our previous in-site search function was deemed inoperable, the new search function aims to assist the user by suggesting the first five most relevant results. As users type, and AJAX script runs to search for relevant results, if the result they are looking for doesn’t populate, then they can press enter to be forwarded to a traditional results page.
  4. SEO Clout & Expired Link Management

    1. I have created a script that manages expired links, and links to references within the old site. Old links have been cataloged, and will systematically point any user who might have an old link to the most relevant new page. This also will transfer existing SEO clout and Google rankings to the same new page, minimizing errors during launch caused by delayed search engine crawling & indexing.
  5. Short URL Management

    1. The new site carries over all previous short URLs and their functionality, as well as allowing any page to have a systematically generated, or customized short URL for easy sharing and customized analytics.
  6. URL Clarity & Strategic Hierarchical Structure

    1. The new sites URL structure mimics the menu structure throughout, making it easier for users to see where they are, or are being directed without seeing the page itself.
    2. For example, Here are two links for the Dermatology page:
      1. Old Site: fenwayhealth.org/site/PageServer?pagename=FCHC_srv_services_obstetrics
      2. New Site: fenwayhealth.org/care/medical/obstetrics/
    3. As a bonus, because the pages are served in a more direct manner, instead of using a redundant server-side script to direct in the way that Convio does, we will be able to get much clearer, accurate and more granular analytics, to help drive visitor behavior in future editions of the site, not to mention in-site, button specific analytics.
  7. Enhanced Caching, Performance & Security Features

    1. Our new site is hosted on a brand new server, with more than twice the RAM, 4 times the processing power, enhanced bandwidth and an SSD hard drive, with drastically lower costs than Convio. Not only that, but the site has advanced caching enabled to cut load times across devices, even with all of these advanced features, performance across devices and platforms are consistently better than our previous platform.
    2. We’ve also employed additional security, including Activity Auditing, Remote Malware Scanning, Security Hardening and Post-Hack features. Automatically checking for malware, spam, blacklisting and other security issues like .htaccess redirects, hidden eval code, etc.
  8. Multimedia Enhancements

    1. Our new site has built in options to make adding multimedia easier and more seamless than ever.
      1. Tiled, Sortable Profiles for all Fenway Board, Staff, and Provider Profiles
        1. All profiles are now managed through individual profiles, and assigned attributes, including:
          1. Board of Directors
          2. Management Team
          3. Primary Care Providers
            1. Sortable by Accepting new patients, location, and skills.
          4. Dentistry Providers
          5. Optometry Providers
          6. Behavioral Health Providers
          7. TFI Faculty
      2. Tiled, Sortable Profiles for TFI Studies
        1. All TFI studies will now have to opportunity to have their own landing page within the Fenway Health website. The Current Studies Page now contains a flow of tiles that can be sorted by the criteria of the potential participant.
      3. Animated Charts, Graphs, Buttons & Milestones
        1. Animated charts, graphs and milestones help bring to life, and illustrate material that might otherwise be visually boring. This adds an element of engagement and connection with the visitor to the site.
      4. Fully Dynamic, HTML5 & Mobile Compliant, Re-Usable and Customizable Sliders
        1. The new site allows sliders to be built independently of their location, with separate ordering, and separate assignments throughout the site. Eliminating the need to recode anything. Simply check the box for which location(s) you’d like it to go, and then drag and drop for ordering. Slides can also feature videos, CSS animations, parallax backgrounds, and transparency effects if needed. Also, embedded videos use cutting-edge HTML5, WEBM, and OGV technology, while maintaining graceful degradation for deprecated browsers.
      5. HTML5 Compliant In-Site Audio Video Rendering
        1. Embedded videos use cutting-edge HTML5, WEBM, and OGV technology, while maintaining graceful degradation for deprecated browsers.
      6. JQuery Animated Panels and Toggles
        1. Fully responsive animated panels to organize lengthy content.