Connecting People Through A Non-Profit That Helps Kids Make Art

ARAPTopperiPhoneARAPTopperiPhone

A Random Art Project iOS App And Web App

A Random Art Project - 2017 - This is a Living Document!

Organization Background

A Random Art Project (ARAP) was started by my friend Nick McCoy, and aims to create art by going to parks with supplies so that people can make free art. People can keep art pieces that they make, or they can make a donation to ARAP for it. Unclaimed art and group projects, like the big Pride painting created by multiple artists, will be offered for sale through the site and the app. All proceeds will go towards helping kids make art by donating to art programs and conducting free art sessions at parks and schools.

See This Project Come To Life

This case-study is a living document since this project is a work in progress. I'm going to try and document the entire process here. As of August 2017, ARAP has hosted over ten events, most taking place on weekends at Dolores Park in San Francisco, CA. ARAP also ran a pilot corporate event leading four teams from Apttus through art based team-building exercises. Currently, I am working on designing and building the web app using Squarespace and have been designing and prototyping the iOS app almost entirely in Framer. Nick and I try to get together for hack days when we can. When we have a prototype we are satisfied with I am going to start building the app using React Native, which is something I have not done before.

Principal Product Designer and Developer

2 Really Good Friends

Customer Problem

“I want to be able to find out about ARAP events, purchase art, and schedule corporate events.” 

Business Problem

“How do we make it easy and intuitive for customers to buy art created at our events, get information about upcoming and past events, and schedule us to come to their offices and lead their employees through team-building exercises?” 

Initial Ideation

What are we trying to build?

So, Where Do We Start?

When Nick told me about ARAP, I loved the concept!  (And when I say he "told me about ARAP," he literally showed me pictures from the first event.  If he thinks something is a good idea, he goes right for it!)  But, Nick already had plenty of volunteers ready to help run the event, so how could I help? After talking over text messages I realized that I could help him out by leading the design and development efforts, and I knew that it would be a really fun project. 

After Nick had run a few more events at Dolores park, we met over tacos and margaritas where we started iterating on what ARAP would need on the technology side of things, and he conveyed his vision of what he wanted ARAP to become. Being that he had already run four events, Nick had some great first-hand experience on what he thought the customer and business needs might be. The features he knew that he wanted to design and develop were a way to show upcoming events, an e-commerce platform to sell art, an avenue to convey the voice and story of ARAP, and everything should be easily but unobtrusively shareable.

intiialArapNotes1170intiialArapNotes1170

Notes And Sketches From Our Initial Meeting

Getting A Prototype Together

With Framer anything is possible.

It Has A Pulse

These days I like to start creating a prototype as early as possible. Framer's new Design Tab makes it easier than ever for me to do this. It certainly helps if there is already a design system in place with components that can be applied to a new project, but even in this case, where we are creating things from the ground up, it's easy to get the basic layout going in the Design Tab then start to make it interactive on the code side of things. The level of fidelity that can be applied to an all-new product or feature really depends on the stakeholders and others testing the prototype. If the approving stakeholders tend to focus on pixels, or even prefer static images to prototypes, I don't suggest using this workflow.

I created a prototype in Framer with a cool, but unrefined, loading animation concept with SVGs. The idea behind this was to get Nick and the other stakeholders pumped about the project. After Nick saw it for the first time he said: "wow dude, we're creating art that displays art!" That has become the mantra for this project since that conversation. The main things I wanted to focus on with the prototype were what we saw as the two most important pieces of functionality: customers being able to buy art, and being able to find out information about upcoming and past events.

Look What We Found

Initially, we thought a map on the Events Screen with different colored pins for upcoming and past events would be a good way for customers to find out about events. As soon as I created the screen and got it into the prototype it was evident it wasn't going to work that well, almost all of the events have taken place (and are planned to take place) at Dolores Park, so there is one huge stack of pins over Dolores, and then a few other scattered pins elsewhere. You can see what I am talking about in the image below. I shared it with Nick, my wife, and a few other friends to get their thoughts. This little guerilla test provided another great insight, customers are much more concerned with the date of events than their location, close proximity is great but it does not matter if they are in Hawaii on vacation.

I have not updated the prototype yet, but I started sketching out some concepts for what the Events Screen might look like as a list view. Being able to use a similar interaction as the one we are thinking of using on the Gallery Screen could lend itself to a nice level of consistency and make the app feel more cohesive. 

arapMapMockarapMapMock

Map Screen In The Prototype

arapListSketcharapListSketch

Events List Initial Sketch

Check Out The Prototype

The prototype is live on my Framer Cloud account, so it may be different the next time you visit this page. If you are viewing this page in a desktop browser window, reload the page with the prototype in view to see the SVG animations, then tap/click the login button to see some of the functionality we are iterating on. Otherwise, tap the prototype image to see the prototype in action.

arapPhoneMockarapPhoneMock

Stay Tuned

This project will continue to evolve. In the mean time, if you are looking to create free art and help ARAP in its mission I suggest following on Instagram until we get the apps out!

Pictures From Past Events