iMac Pro Mockup.jpg
 

DTLA Art Walk

The Downtown Los Angeles Art Walk is a volunteer-powered nonprofit that supports local community development through a self-guided Art Walk the 2nd Thursday of each month, guided gallery tours, and bi-monthly tours of murals and street art


A High-Level Overview

The purpose of this project was to redesign the online donation process to the DTLA Art Walk utilizing agile UX methodologies. My goal was to gain insight into user pain points in the current donation process in order to design solutions that make it an easy, reassuring contribution.

  • Project: E-commerce web design (spec work)

  • Role: UX & UI Designer

  • Tools: Sketch, InVision, Photoshop, Illustrator, Google Slides, SurveyMonkey, whiteboard

  • Length: 2 Week sprint

The Problem

“When LA art patrons support and donate to the DTLA Art Walk, they worry about where their donation will be distributed and want to receive information about how their money is utilized.”

The Goal

• To identify pain points and expectations in the donation process in order to ensure user’s feel confident in their contribution and potentially donate again in the future.
• Use insights from user research to pinpoint weak spots and problems in order to develop and implement effective solutions.


SiteGraphics-05.png

Research & Synthesis

Pinpointing PRoblems

One of the first steps in our research was to inspect and identify problems in the user interface and usability features by performing a heuristic evaluation. Key problems I discovered were:

  • misleading images and links in carousel

  • poor visual design and readability issues

  • non-descriptive language about donation usage

  • excess of links to external off-site pages, instead of content living within Art Walk website

  • outdated blog posting

  • dead-end flows

  • false or missing contact information

Determining Best PRactices

Exploring the competition helped me assess our weaknesses and see how the site stacked up against other donation-based organizations. It proved to be more beneficial to compare the services and donation process to local, arts-based, non-profit organizations than to other art walks. I held the Art Walk up to local radio station KCRW, art museum LACMA, and art community advocate Arts for LA. View Competitive & Comparative Analysis

The C&C revealed an option for giving a donation as a gift, membership plans, public recognition, one-time or monthly contribution, and payment options.

C&C.png

What people are saying

In order to gain real-world insight into the user base I conducted in-person interviews and sent out online surveys. Initially, I screened users to gather a pool of individuals that met characteristics of the user base – local art patrons with a history of donating.

During interviews, I received valuable qualitative data to better understand my potential users. This helped me gain real-world insight to prove or disprove aspects of my evaluation and analysis. Online surveys gathered additional quantitative data about how, why, where, what, and when people donate to organizations.

Observations In Action

Observing how users interact with the website provided me with their pain points and increased empathy.

A task analysis was conducted to see how a user would attempt to donate using the current Art Walk website. Through contextual inquiry I noticed that users struggled with counter-intuitive navigation elements, wanted payment options other than PayPal, and felt uninformed about the use of donation.


SiteGraphics-06.png

Information Architecture & Strategy

Who is our User?

Who are we designing for? A prototypical persona was generated to represent the characteristics of our ideal customer. Goals, frustrations, and behavior patterns were defined from our user research and helped align the initial strategy of our design.

Our hypothesis concluded:
“Victoria wants to show her support for the arts community downtown, how might we make her feel confident that her contribution is being used effectively and having a positive impact?”

Persona-04.png

The Journey

A customer journey map told the story to depict a possible interaction between our persona and their experience with the Art Walk.

Creating a visualization of our user’s process in reaching their goal helps us empathize and understand what our experience is like in their shoes.

JourneyMap-03.png

First Things First

By delineating which features of the website were most important, we could prioritize which aspects to focus on. An effective method for organizing these items was to categorize what elements the site must have, should have, could have, and will not have.

After studying the current user flow and site map, I identified the problematic areas and began ideation with methods such as open card sorting (below) to identify categories in the information architecture

cardSorting.jpg

Site Map

A hierarchical site map provided the high-level construction and roadmap of existing pages and their relationships. Restructuring the site map was a crucial step toward strategically meeting our goals and user needs. 

I narrowed the breadth of the navigation bar down to three strong categories under which to build out the depth of our content structure. Also, a global navigation was generated to support our user goals and as well as a footer nav to improve user flow.


User flow creation

Areas of improvement were addressed in the path a prototypical user would take to reach their desired task of donating to the Art Walk. This revised flow acted as the guide for our ideal user experience.

We wanted to add inspiring and accessible Call-To-Actions, an option to donate as a gift, and a payment portal directly on our site with an option for PayPal.

UserFlow-01.png

SiteGraphics-07.png

Usability & Ideation

Sketching it out

Coming up with rough hand-drawn sketches provides cost-effective and efficient ideas for how to visually construct the pages.

Wireframes2-09.jpg

After usability testing with our paper prototype I implemented noted revisions and fleshed out low-fidelity digital wireframes to act as the skeleton for our site.

Testing it iteratively

The low-fidelity sketched, paper wireframes were a quick and easy way to test how a user might work their way through the donation process. We gained feedback by having them interact with the prototype, talk through the process, and observe their actions. Testing and reiterating versions of our interface ensured it was as intuitive and painless as possible.

PaperPrototype-08.jpg

The lo-fi blueprints chalked out new ideas, elaborated on functionality, and conveys necessary solutions. Visual hierarchy and page layout techniques played a large role in guiding the ideal user interface.


SiteGraphics-08.png

Execution & Validation

Final high-fidelity prototype

After all of the research and low-fidelity testing, it was finally time to ramp things up and move towards a high-fidelity prototype. The visual user interface of our hi-fi prototype was designed within the existing Art Walk branding and reflected one of the core goals defined early on – to improve the visual design, functionality, and credibility of the site.

Revamping and strengthening the visual design of the site helps establish a professional brand voice to make users feel confident in supporting and potentially donating to the organization again in the future.



Next Steps

The key next steps would be to continuously test the usability of the site and identify areas of improvement. Continuous iteration yields a more enjoyable online donation experience for users and ideally motivates them to become monthly donors to the organization.

An increase in funding would in turn foster growth for the DTLA Art Walk and provide an increase in opportunities for engagement with the thriving, Los Angeles arts community.