Kayleigh Freshman

Challenge

Designing a site that would meet the needs of a growing open source community. The original site was created early on before FOLIO’s presence grew. With members worldwide, they wanted to provide users with their mission, progress, and a sense of what it would mean to be a part of the community. It became a place to host press releases, showcase upcoming events, and encourage others to join. The first step was to audit the original site, and all of their sub sites (Wikis, discussion boards, Trello, etc.), in order to gain an understanding of the content available to the public.

‍

Content Analysis

Diving deeper into FOLIO unveiled what types of content were out there for the community to see. Performing the content analysis helped to uncover pain points and understand the site structure. Through using Google Analytics I was able to see how users were interacting with the content and what bounce rates were for different pages. It brought light to new concepts/ideas to be woven into the new site and helped outline the future architecture.

I completed a full audit of the current site and its subsites to identify how users were interacting with the content.

I compiled a list of all of the issues and marked them by severity. By prioritizing, it would help to identify what was needed most when redesigning the site.

Based on conversations of what they needed as a community, I took a pass at creating a new site map with URLs and descriptions of content per page.

‍

Personas

Before diving into site maps and wireframes, we needed to have a clear idea of who we were designing for. Working with Rachel Fadlon (Senior Manager, Resource Management & Open Source Projects) we identified the three main groups who support the project and who'd be interacting with the site: librarians, vendors, and developers. We wanted to provide general information for the community, but also personalized content specific to their needs.

‍

Site Structure

Creating a visual site map of its future state helped to grasp the size of the project, and types of content at a glance. It was used as a guide while creating wireframes and copy decks.

Site map presented to stakeholders to show the size of the new site

‍

Content Wires

Once our team had the site structure figured out, we were able to create content wires to bucket out information. Looking at it from a high level allowed us to see the hierarchy of the information and what content we wanted to provide to the user. The content wires were shared with stakeholders to get initial approval to proceed with the project.

Wireframes to show how the double navigation could function at both desktop and mobile.

A look at what the About page could be. Thinking of animation for the hexagons to slowly appear as user scrolls revealing information.

A requirement was to give personas their own section where they could find out how to contribute. Also provided them with background on their different tools and links to access.

It was very important to the community to have a page that would highlight all of the different librarians, vendors, and developers who make the project possible. Also, needed to highlight certain libraries who belonged to the parent foundation.

Desktop view of how the global navigation could work across the subsites. Also, worked with one of the developers to give their site a facelift and show what it could look like.

‍

Copy Decks

Using the site map and content wires as a guide, I created a folder structure and populated it with all of the copy decks needed for the site. Working closely with Rachel Fadlon, we were able to create content that was web ready. As she was the project manager between EBSCO and the FOLIO community, I gained a clear understanding of the community we were working with.

Folder structure with naming that followed the site map

Example showing the copy deck for the homepage

‍

UI & Visual Design

Next step was creating a unique design to engage users as they interacted with the site. I designed a couple options, presented concepts to stakeholders, and was able to get approval on a design direction.

Throughout the stages of approval, there were many iterations between design, functionality and content. Fortunately with XD I was able to quickly make changes and return it to the stakeholders for feedback. The final prototype (before we moved completely to Wordpress) was one that showcased mobile and desktop for all of the pages.

Option One: Top section would take over the full browser window. It would be a slider to highlight the main features the community wanted to showcase. Inspiration from Google Open Source site.

Option Two: A little more reserved, showcasing imagery of library's interiors. Utilizing the hexagon shape (to pair with the bee within the logo) as a texture and accent throughout. This was the design direction the FOLIO board ended up choosing.

‍

Style Guide

The style guide included responsive typography, color palette, button styles, icons, patterns for backgrounds, and other elements. I collaborated with another designer, Jen Darsney, to flesh out the branding in relation to print.

Responsive typography for the site. I wanted to make sure the content was always legible and worked with our developer to increase the tracking.

‍

Before & After

Before the site was limited structurally, but also in the amount of content available to users. It didn’t provide the benefits of joining the community or how to get involved. The colors were warmer with reds, oranges and purple.

After the site was able to meet the needs of the growing community. It provided helpful information to people visiting the site and gave librarians, vendors and developers their own section to help build their relationship with the communities. The color palette was cooler, featuring purples, blues and grays; inspired by other tech and open source community sites. The pop of orange was used to highlight their logo and add some interest throughout. Every page was designed with a responsive layout to ensure the same experience regardless of the device used. The community was very pleased with the end result and they'll be able to update the site as needs change.

‍

Development

I was fortunate enough to work with a very talented developer, Sallie Brooks, to bring my designs to life. She developed it using Wordpress and customized the backend allowing updates to be made with ease.

‍
Please visit FOLIO to see the rest of the site and interact with it across different devices.

‍