Overview

Quiet Lightning is a literary nonprofit in the San Francisco Bay Area. This volunteer-run organization organizes a monthly literary mixtape performance at different locations. Accepted submissions are bound as a literary journal called Sparkle and Blink and performed live at the monthly events. The journal is given away at shows and archived on Quiet Lightning’s website.

The problem

The Quiet Lightning website is very content-heavy and lacks a content strategy, consistent formatting, and overarching information architecture. It is not mobile-friendly, and the organizers have also expressed a desire to make the visual design more aligned with the organization’s overall aesthetic. They also recently took over Litseen, the Bay Area’s calendar of literary events, and are trying to incorporate that more fully into their website.

My role

This was a capstone project for Designlab’s UX Academy, so I performed all roles in this project: research, UX design, interaction design, UI design, and project manager.

This project is my take on how the website might be better organized and formatted so that the content is more searchable, browsable, and accessible to users.

Research

Process

  • Discovery phase to inventory the current Quiet Lightning website
  • Comparative analysis of similar websites with particular consideration given to the information architecture of the comparison sites
  • Primary research to identify users’ online reading habits and users’ preferences for attending local events

Results

An inventory of the Quiet Lightning website showed that:

  • Site is home to many types of content
  • Quiet Lightning group involved in a number of other side projects
  • Site’s organization makes it difficult to find content
  • Lack of consistency among pages

The comparative analysis examined Ploughshares Literary Journal, The Guild Complex, and The Moth and found that:

  • Ploughshares puts a lot of emphasis on highlighting featured content
  • The Guild is a Chicago-based literary non-profit with a large emphasis on local events
  • The Moth is a storytelling podcast and their website features both audio and video recordings of stories being told

Primary research on user attitudes towards online reading and events found:

  • Users typically read articles of 5-10 minutes in length on their phones
  • Users prefer print for content that takes longer than 10 minutes to read
  • Most important for online reading is uncluttered reading experience
  • Other important features are tagging or bookmarking, and the estimated time to read the article
  • Most people find out about local events through Meetup or similar services
  • Educational and networking events are among the most popular event types
  • Nearly all users use a calendar app to keep track of the events they plan to attend

Interaction Design

Sitemaps

Because of the focus on information architecture, I created a sitemap of the existing site and a new sitemap with improvements to the information architecture.

In the current iteration of the Quiet Lightning website, the video version of the performances are listed under archives. Clicking on the date for different shows takes the user to a variety of different pages. Many of the performances are archived on Litseen, some are on the Quiet Lightning website, and others link to Facebook events. The Sparkle and Blink journal, which presents a text version of the performances, is listed under publications, with links directing the user there from the performance pages. Litseen, which lists upcoming events, is listed under Other Projects, along with a number of special projects outside the scope of Quiet Lightning’s typical offerings.

 
 
 
 

In the new version of the sitemap, I propose listing all performances under Archives, and for each given performance provide the user with the option of watching or reading the show. Filters allow users to narrow down the different types of shows, such as Chemical Wedding and Call and Response, instead of listing those shows under Other Projects. The publications available for sale are listed under Shop, and Events has its own place in the primary navigation. Less used content, such as About, Support, Get Involved, and Showcase is placed in the footer. The various side projects, such as films and music, are listed under media.

 
 
 
 
 

 

Workflow

The workflow focuses on the main tasks performed on the website: reading or watching an archived show, viewing upcoming events, and submitting work for publication.

 
 
 
 

Wireframes

Homepage

Currently:

  • Has no set content
  • Format changes depending on what events are being featured

Proposed:

  • Maintains consistent format with primary emphasis on next Quiet Lightning event and most recent issue of sPARKLE & bLINK, with the options to view past events and read older issues of sPARKLE & bLINK
  • A rotating carousel highlights noteworthy information
  • CTA solicits submissions
  • A testimonial at the bottom of the page humanizes the organization and encourages readers to get involved
 
 

 

Archives

Currently:

  • Organization has a lot of duplication and no clear content format
  • Videos of past events are usually, though not always, featured on Litseen, not the Quiet Lightning page
  • The sPARKLE & bLINK literary journal features transcripts of past shows, but is listed under publications, not archives

Proposed:

  • Presents a consistent format for listing events
  • Events are sorted by date, with the venue and type of event
  • Events with an accompanying sPARKLE & bLINK journal have a “Read” button to take users to the journal
  • Events with videos of the performances have a “Watch” button
  • Because of the variety of different events coordinated by Quiet Lightning and the vast number of partnerships, filters allow users to narrow down the results to specific types of events
  • Proposed filters allow users to narrow down their results by the type of event or the event partner
  • For users who are just interested in reading the sPARKLE and bLINK journal, a link at the top of the page takes them to a collection of all literary journals
 
 

 

Watching a Performance

Currently:

  • Inconsistently formatted
  • Many, but not all, are housed on the Litseen page instead of the Quiet Lightning page

Proposed:

  • Consistent format for displaying event videos, with event information at the top of the page, video of the event, and recommended videos
 
 

 

sPARKLE & bLINK

Currently:

  • Presents the journals in a straightforward manner
  • Additional information in the sidebar makes it appear cluttered

Proposed:

  • Eliminates the sidebar and highlights cover art  
  • Mobile version presents the journals in a single column, making mobile navigation easier
 
 

 

Viewing an Issue of the Journal

Currently:

  • The list of contributing authors, with links to their homepages, are given the most prominence, and reading the journal is much lower in the hierarchy
  • Journal can only be read as a whole, using the Scribd service

Proposed:

  • Provides links to each individual submission
  • Clicking the name of a submission will take the user to the specific submission
 
 

 

Reading an Article

Currently:

  • Only option for reading the literary journal is to read the entire book through Scribd
  • Mobile reading requires downloading Scribd app

Proposed:

  • Allows readers to read individual articles
  • Uncluttered, mobile-friendly reading experience
 
 

 

Upcoming Events

Currently:

  • Quiet Lightning is displaying all events through Litseen

Proposed:

  • Would integrate the events into the Quiet Lightning website and display them in a format more consistent with the visual design of the rest of the Quiet Lightning site
  • Because of the vast number of events, filters would allow users to narrow down their results by location, event type, and date
  • As with the full upcoming events listing, the individual events page would integrate events into the Quiet Lightning site and display the event information in a format consistent with the Quiet Lightning site
 
 

 

    Branding and UI Design

    For the visual style, I worked from the design brief, which described the brand as artsy and refined, with an “age of radio” aesthetic with strong art deco influences. Quiet Lightning also describes themselves as enthusiastic, quirky, curious, supportive, and  welcoming.

    Typography

     
     

    I selected the Mostra Nuova font for the headers due to the art deco feel, and Lora for the body because readability is a primary concern on such a text heavy site.

     
     

    Color Palette

     
     

    The soft pastel color palette reflects the artsy-refined look and ties in with the quirky and enthusiastic feel that Quiet Lightning is trying to embody.

     
     

    Logo

     
     

    I explored several different options for the logo. I tried incorporating books for the literary aspect of the organization, lightning bolts for the name, and various art deco features for their brand aesthetic. In the end I opted to keep it simple with a wordmark in the Mostra Nuova font, using the primary color palette, and replacing the letter L with a lightning bolt.

     
     

    UI Design

    From the wireframes and style tile I developed high fidelity screen templates, using cards to display both future and past events, and the literary journals.

    Many of the images used on the site are the covers of the sPARKLE and bLINK journal. Because they feature a different artist with each issue the visual style can vary a great deal. As a result, I tried to keep the background and primary UI elements relatively neutral to highlight the selected artwork. However, I still wanted to maintain the quirky and enthusiastic vibe, so I used bright accents and was judicious with the use of color on the homepage.

     
     

    Prototype

    I used InVision to create a hi-fidelity prototype for user testing and to demonstrate the information architecture and interaction design of the proposed website. 

    Continuing Challenges

    The biggest challenge with this project was sorting out the information architecture. The types of performances put on by Quiet Lightning vary a great deal and many, but not all, feature an accompanying sPARKLE and bLINK journal. As a result, some of the performances feature both a print and video component, while others only feature a video component. I chose to present the list of past events and allow users to select their preferred format. An alternative approach would have been to allow users to first decide whether they wanted to read or watch events and then present the available performances. Given more time, I would have liked to create wireframes for both navigational options to perform usability testing on each.