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 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.
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.
An inventory of the Quiet Lightning website showed that:
Primary research on user attitudes towards online reading and events found:
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.
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.
Watching a Performance
sPARKLE & bLINK
Viewing an Issue of the Journal
Reading an Article
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.
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.
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.
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.
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.
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.
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.