HFLA_cover.jpg

Adopt Civic Art

Art Direction, Responsive Web, UI Design, UX Design

CLIENT: The Los Angeles Country Arts Commission

CONTEXT: This open-source project was developed through the Los Angeles brigade of Code for America, a national non-profit.

TEAM: I worked with subject matter experts from LA Country Arts Commission, Yvonne Lee & Clare Haggarty, and a fantastic team of of rotating volunteers.

I led all aspects of design. I initiated and conducted user research, ideation, wireframing, persona creation, mapping, prototyping, UI design, and usability testing. In addition to the core UX/UI role, I led the illustration and photography vision, and facilitated a branding workshop.

This pro bono project is a work in progress.

  BUSINESS PROBLEM:  The Los Angeles Country Arts Commission is understaffed and unable to monitor the hundreds of civic artworks spread across 4,751 mi² in Los Angeles. These artworks are at risk of being damaged and even stolen.   USER PROBLEM:  There is a lack of awareness of civic art in Los Angeles. Tax dollars are spent on civic art, so how can we utilize the funding to meet user needs like social connection and opportunities to contribute.

BUSINESS PROBLEM: The Los Angeles Country Arts Commission is understaffed and unable to monitor the hundreds of civic artworks spread across 4,751 mi² in Los Angeles. These artworks are at risk of being damaged and even stolen.

USER PROBLEM: There is a lack of awareness of civic art in Los Angeles. Tax dollars are spent on civic art, so how can we utilize the funding to meet user needs like social connection and opportunities to contribute.

Initial User Research

Initial User Research

In order to build the right service, I wanted to better understand our user. To kick-off an initial phase of research, I worked with my team to design a survey with non-leading questions and set off to civic art sites across Los Angeles to interview potential users. In addition to onsite surveys, we researched literary reviews on public arts participation in Los Angeles and America to gain even greater insight into our user.

KEY FINDINGS:

Proximity is key Users are motivated to visit public spaces with civic art close to their homes or workplaces.

Community Users enjoy volunteering because of the opportunity to make friends and socialize.

Arts Volunteers The majority of volunteers in the arts are artists themselves or work in the arts.

Motivations Volunteers may be motivated by a mix of factors but for most—one or two dominate:

1) Enthusiasts: Interested in the content or subject matter.

2) Opportunists: Interested in advancing professionally.

3) Enhancers: Interested in improving their personal lives.

Additional User Research

Additional User Research

After the first round of usability tests, I decided to go back into a phase of research further understand our target user. I interviewed 7 target users to gain clarity into their needs, pain points, and motivations. The findings largely confirmed the findings from the first round of research but additional opportunities were discovered.

KEY FINDINGS:

Pain Points Time and distance seemed to be the greatest pain points. Users will most likely adopt an artwork based on proximity, followed by how much they like the artwork.

Make a Difference Users want to "make the world a better place." They want to know that their contribution makes an impact or change.

Professional Users seem to volunteer in order to advance their career and build larger networks within the arts.

Community Users volunteer in order to make news friends and build larger social and professional networks.

Kids Users with kids are more likely to volunteer if the activities are kid-friendly.

OPPORTUNITIES:

Social Component The social component targets 2 user motivations: 1) the desire for users to network and grow professional and 2) the desire to socialize and make friends with similar interests.

Feedback Users do not want to "volunteer into a void." They want their voices heard and they want to know that they can make a difference. We can send notifications and email reminders, progress reports, history, and updates on artwork condition.

Clarity Emphasize the flexibility and low-commitment of adoption early on, easing concerns over time and distance. Explain why adoption can benefit the user early on, digging into primary goals (social, networking, make a difference, kids).

Recognition Recognize adopters and thank them for their contribution. Public user profiles can feature user contributions and badges for their work.

   User Research Round 2:  qualitative research with open-ended questions

User Research Round 2: qualitative research with open-ended questions

Provisional Personas

Provisional Personas

After initial rounds of user research, our provisional persona began as "Sally the Art Nerd," a 30-something, civically engaged, do-gooder, and art lover. After additional rounds of user research, I amended the persona and split them into two distinct target users.

Mapping the Journey

Mapping the Journey

After the first round of usability testing and additional user research, I synthesized the data, and added additional findings, like key pain points, to the journey map.

   Low fidelity wireframing:    I began to rapidly ideate a basic interface and the core user flow on paper.

Low fidelity wireframing: I began to rapidly ideate a basic interface and the core user flow on paper.

High Fidelity Wires

High Fidelity Wires

After quickly sketching on paper, I brought the wires into Adobe XD (beta) as a means to learn the new software. After discovering its limitations and strengths, I switched over to Sketch, a robust tool with integration with tools like Framer, Principle, and InVision.

SIMPLE, READABLE, ENGAGING

SIMPLE, READABLE, ENGAGING

From left: V1. landing page, details page, main map interface

With the first round of UI and visual design, I wanted to appeal to our target user by emphasizing friendliness and the opportunity for social engagement. All UI interactions are designed for simplicity, readability, and to drive the user to share or adopt artwork.

   From left:    confirmation screen, about page, profile page

From left: confirmation screen, about page, profile page

FRICTIONLESS CHECK-IN

FRICTIONLESS CHECK-IN

A simple 2-step user artwork check-in flow

SIMPLE FLOWS: Forms and rules can be confusing and intimidating, I’ve simplified the artwork check-in flow so that it becomes a two step process.

RECOGNITION OVER RECALL: The user always knows how many steps are in the process. The user always knows which artwork they are checking in.

AESTHETIC AND MINIMALIST DESIGN: Additional content is hidden until the user chooses to “learn more.” This interaction caters to the more experienced user as well as the novice.

HELP AND DOCUMENTATION: Because “Check-In” is a new concept to our user, I’ve left orange “?” buttons as helpful hints and tool tips.

   From left:     V1. (adopted) details page, V2. (adopt me) details page, V3. (adopt me) details page

From left: V1. (adopted) details page, V2. (adopt me) details page, V3. (adopt me) details page


Style Sheets

Style Sheets

I'm building style sheets in order to smoothly hand off the project to developers and the future custodians of our civic platform. Style sheets are currently built in Sketch for smoother hand off to future designers. 

Illustration

Illustration

My intention is to appeal to the user by creating bespoke illustrations for our platform. Illustrations are at once simple and human. The aesthetic appeals to the creator and the preserver.