UX/Visual Design
cff logo.png

The Center for Fiction

 
cff.png
 
 
 

The Center for Fiction is the only nonprofit organization in the U.S. dedicated solely to the art of fiction. In the summer of 2018, The Center tasked Brooklyn Digital Foundry with redesigning their content-rich, but ultimately outdated website. 

The redesigned website needed to reflect their history, celebrate the dynamism and expansiveness of their new space in downtown Brooklyn, and remain a warm, inviting, supportive presence for writers and readers in the New York literary scene and nationally.

 
 
 
cff screencast.gif
 
 

My role involved discovery, user research, information architecture, and wireframes. I helped to introduce an editorial-first design to The Center's website in order to make the stories, essays, and writing tools more visible and accessible to their audiences. 

 
 
 
 
CFF Synth 1.jpg
 
 
 

We kicked off discovery with stakeholder interviews with The Center staff and a comparative analysis of eight other writing centers, organizations, and websites.

 
 
 
cff survey gif.gif
 
 
This similarity matrix was used to determine the most common groupings of content that users created.

This similarity matrix was used to determine the most common groupings of content that users created.

 
 

User research also included a Google Analytics audit, comprehensive card sort testing, and an audience survey with 114 respondents. From there, we determined that our goal was to update the look and feel of the site, while bringing its wealth of resources, programming, and content to the forefront, and we created a new site map that reflected this.

 
 
 
 
cff user flows.png
 
 
 

The Center's website needed to also incentivize visitors to do things like sign up for memberships, donate, and register for events. I created user flows to facilitate an internal understanding of certain transactional points throughout the user experience of the site.

 
 
 
Screen Shot 2018-08-29 at 3.52.19 PM.png
 
 

In order to ensure consistency in our wireframes and UI, I created a library of different UI elements and modules.

 
 
 
Home page@2x.png
All Content@2x.jpg
Basic template@1x.png
 
 

During the wireframing process, we designed a header with a content hub that would be persistent throughout the site and established an icon system to highlight the diverse editorial content and allow visitors to easily understand what was available to them.

 
iPhone 6 cff mockups.png
Visual Design by Amy Gao

Visual Design by Amy Gao