menu logo 2@3x.png

Quiet Lightning

 
 

Quiet Lightning is a literary performing arts non-profit located in San Francisco, CA. They have been building their creative community since 2011 by producing a submission-based reading series for writers and performers in the Bay Area. Their website did not match the growing cult status of their IRL events. My challenge was to create a responsive digital experience and new brand identity. This immediate business goals were to create a responsive experience, improve the information architecture, create a new visual identity, and focus on accessibility for the community to get involved.

 
before QL@2x.png
 

DISCOVER

The Research

To better understand their user and understand the problem, I conducted competitive analysis, user interviews, and surveys.

The main goals were to understand why people attend arts events,  what makes someone feel connected to an arts community, what role the digital presence and presentation of an arts community play in the success of that community, and how someone decides which cultural event to go to.

Quantitative Insights 

Research Insights @2x.png
 
 

DEFINE

Persona 

Based upon the research, I created a Persona around Zoe, a literature student at SFSU.

Zoe Persona@2x.png

User Journey

I then created a User Journey to gain empathy and explore her experience on the Quiet Lightning website. There was an emphasis on mobile first in her journey.

ZoeUserJourney4-6.png
 

Sitemap

The original site was lacking hierarchy and structure in content and information. It was confusing and forgettable. I created a sitemap to organize and create a clear information structure. My goal was to create an experience that was intuitive and strong and allows users to navigate easily. 

QLsitemap@2x.png
 

DESIGN

Wireframes & Prototype

The initial designs were based on 2 user flows,  RSVP'ing to an event and submitting work. I first sketched ideas on paper, and then created mobile wireframes based on the users flows.

Initial Usability Test

I used Invision and Skype to do a usability test with 4 users. The goals were to test the usability heuristics and navigation of the mobile wireframe prototype. I wanted to validate the design for the two flows. It was discovered that there were navigation issues returning home in the experience and confusion about the call to action of submitting work (a primary task goal).

This allowed me to iterate quickly and retest before moving on the the UI design.

Screen Shot 2017-09-14 at 4.00.34 PM.png

Affinity Map Results 

AffinityMapUserTest1.jpg
 

 

DELIVER

A New Visual Language

By creating a custom playful illustration for their logo and CTA icons that were inspired by graphic ink drawings, I was able to evolve the look and feel of the brand but still maintain their brand values of: Enthusiastic, Quirky, Curious, Supportive, and Welcoming. The goal was to build a space that was interesting, fun, and inspiring with a focus on human language and symbols.

 

A Responsive UI

I used Principle to animate the home menu drop down interaction. Colors give the user feedback as they move through the information.

 

A Shared Experience

I designed a better way to connect people attending their events. The original site redirected to a Facebook pages. From my research, I discovered there has been reluctance around social media, especially Facebook. This feature allows anyone to rsvp to Quiet Lightning events without being redirected, and gives the option to share on social media if desired. This creates an experience that feels more autonomous for the Quiet Lightning community.  It also allows Quiet Lighting to collect emails to build their community and reach.

RSVP screens new@2x.png

CONCLUSION

The final product unites their user on any device while creating an accessible and intuitive experience for users to connect, collaborate, and participate while presenting a visual identity that is as fun and inspiring as their real IRL events. 

Next Steps

As I continue to iterate, my next steps would be to

-Create and develop flows to further optimize Call To Action (Donate, Volunteer, Subscribe)

-Create a card-sort on their catalog of content (published works, podcasts, event photos)