Bunker Review: Web Magazine UX

Artists supporting artists
Project Overview
Bunker Projects is an artist residency and gallery located in the Penn Avenue Arts District in Pittsburgh, Pennsylvania. I partnered with their board to develop an online web magazine focusing on the work of their resident artists paired with the writing of local art writers. The goal of the magazine was to create an immersive publication that would lend a voice of authority to the artists and curators working in the gallery as well as to create an online space to view work that serves as a surrogate to the gallery experience. This web product supports Bunker Projects’ main mission to expand their artists’ audience and uplift their careers with rigorous discourse.

This quick design sprint was an exciting opportunity to work with my first UX client, and use this design process to clarify their goals and make them actionable. Working with the client also gave my design process the gift of divergent thinking, where I was able to take their perspectives and wishes into consideration. This product will serve as a library of sorts, a space where users are immersed in a wealth of artist’s projects and scholarship that honors their work, while at the same time giving a voice to the gallery and its mission.
Roles + Responsibilities
Roles: UX Design, UI Design, UX Research
Tools Used: Figma, Adobe Xd, Crazy Egg (heatmapping software)
Deliverables: Target Audience Report, User Personas, User Flows, Sketches, Wireframes, Paper Prototype, Clickable Prototype, (low fidelity), User Testing Summary, Summary of Findings, Development Plan
Jump to Section: Problem/SolutionResearch/Discovery
Information Architecture
WireframesUsability TestingNext Steps
Clickable Prototype
Photo of a macbook laptop computer open with a website on the screen. The website is an exhibition page for a gallery show.
Problem + Solution
Problem: 
A gallery website is often more of an events and archives page, leaving little support or documentation for an artists efforts. Our Bunker Review web magazine will be a robust source of scholarship and content that legitimizes the work of resident artists boosting their engagement and sales.

Solution:
We designed the Bunker Review to be an online community hub that opens onto a homepage with an infinite scroll of thumbnails of various articles and artists’ projects. The two main components of this site are “Virtual Project Rooms” and article pages.

Both of these experiences feature a horizontal scroll to interrupt the searching nature of the typical vertical scroll and to create an experience that is like scanning a printed publication or gallery wall. Depth, immersion, and experience of the work are the cornerstone of this product and this is why we went with a desktop product as opposed to a mobile experience.

Research
+ Discovery
Apr 2014 - Mar 2015
Audience:
Our audience was 21-55 year old people who live in urban areas who are interested in visual art, music, and travel. They are experienced with technology, and the audience was split evenly between all gender expressions.

User Survey:
Our user survey went out on the gallery’s social media pages and we were able to get 78 responses. The survey included questions to help guide the gallery on content strategy (readers’ content and format preferences and desires) but also informed our design process. 71% of respondents prefer reading longer articles on desktop, and 68% wanted more information than is possible on social media (such as an Instagram post). The survey also revealed which other art writing sites our users were visiting so we could understand their mental model via our competition. 

Both of these experiences feature a horizontal scroll to interrupt the searching nature of the typical vertical scroll and to create an experience that is like scanning a printed publication or gallery wall. Depth, immersion, and experience of the work are the cornerstone of this product and this is why we went with a desktop product as opposed to a mobile experience.

Empathy Maps & User Personas
Using the information gathered from our initial customer resarch, I translated that insight into an empathy map to identify our users' painpoints and desires, which then informed two of our user personas, an arts administrator and an artist.
Empathy Map
Empathy Map: A UX deliverable showing what a user says, thinks, does, and feels in a situation as well as their pain points and gain
User Personas
A user persona, a UX deliverable with an image of an African American woman with her demographic information, biographic information, needs, and painpointsA user persona, a UX deliverable with an image of a caucasian man with his demographic information, biographic information, needs, and painpoints

Information Architecture

User Stories & Flows: We prioritized user stories that focused on wanting to learn about new artists and supporting their work (either by following them on social media or making sales). Outreach and awareness are key to reaching a Minimum Viable Product.
A grid showing user stories ranked in importance from high to lowFlow chart showing the steps a user has to go through to make a donation
Wireframes + Sketches
Next I began sketching some solutions that I would convert into wireframes after some very basic user testing. Sketching allows for divergent thinking and makes the design process as collaborative as possible.
8 sketches for solutions of what a website could look like

Wireframes

These are wireframes of the Virtual Project Room, Homepage, and Donation page.
Wire frame of an online exhibition of artWireframes for a homepage of a galleryWireframes for a website's donation page

Usability Testing

Usability testing was performed using Adobe Xd’s usability testing interface and Zoom. We had four participants and met for 30 minutes.

Tasks Tested
Donation checkout flow.
Selecting an article to read.
Using horizontal scroll to make it through the entire article.
Using horizontal scroll to explore the entire gallery flow.

Overall Experiences:
All of our users were able to make it through the donation process, but some would have preferred an option to use paypal, and others wanted more confirmation screens. 3/4 of the users were able to select an article to read, with some users a bit confused by the low fidelity of the prototype. Only half of our users were able to use the horizontal flow. One user had a hardware problem that would not let them scroll in that direction, and another user did not know it was an option. We later added icons to clarify the scrolling feature.

Low Fidelity Prototype

Animated GIF file showing the different pages on a website Interactive/Clickable Prototype
Next Steps
I would want to add some fidelity to the prototype using actual content from the gallery, and then perform some more usability testing and A+B testing. Additional heat map testing would also provide insight into user preferences. Adding more payment options to the donation page would increase the donation base. I would do more experimenting with applying parallax effects and animation to the online project space.

For the article pages I may forgo the horizontal scroll altogether and create a series of pages that would be reminiscent of printed book spreads that would have navigation from left to right, but would load as its own page that could be scalable. 

Final Thoughts

This quick design sprint was an exciting opportunity to work with my first UX client, and use this design process to clarify their goals and make them actionable. Working with the client also gave my design process the gift of divergent thinking, where I was able to take their perspectives and wishes into consideration. This product will serve as a library of sorts, a space where users are immersed in a wealth of artist’s projects and scholarship that honors their work, while at the same time giving a voice to the gallery and its mission. The design also addresses accessibility concerns, not just through a simple high contrast presentation, but by providing user affordance by offering an audio interface to listen to articles and a “reader view” that presents the article information without any of the design elements that could impede a reader.

We both were a bit new to this process, and I should have made a clearer timeline for our meetings and my deliverables. Our communication was warm and effective, but I would have preferred to offer more structure and efficiency to keep the momentum of the Sprint consistent.
See Next Project
Woodlands Cemetery Map

Want to get in touch?
Drop me a line!

Questions? Comments?Critiques? Collabrations? 
Let's go!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.