Survey Data in Figma
Art Fair
A mobile app for Android that allows users to browse local art, & connect with the artists.
Art has always been a great love of mine. I love the idea of supporting artists, especially lesser known artists.
The idea for this app actually stemmed from a project I did in my UXUI Bootcamp. It was for a website redesign for Metropolis Coffee, a local coffee shop here in Denver. Each Metropolis Coffee location hung local art in their store, with the artist's contact information. They didn't take a cut from any profits, they just wanted to offer support. I LOVED that. And I started thinking of ways to make that even easier....
How could that be an app? Could that be a social app? Something like Etsy where you can make a profile and sell? I started narrowing down my ideas through the research!
Problem: How can I help local artists and art lovers find each other and connect through an app?
Solution: Create a social app, that allows one to browse local art and artists, like one would at a local art fair. Using messaging or chatting to connect directly with the artist.
My Role: UX Designer and Product Designer
Tools: Zoom, Figma, InVision, Whimsical, Instagram, Google Forms, Unsplash, pencil, paper, Coolors.co
Research
Gathering Survey Data
I sent out some surveys to gather some general data regarding art, and buying art. Does everyone like art? Do people actually buy art? How do you find the art you buy? Do you care if it's local?
I sent out surveys with Google Forms
100% of the responders like art, and a 100% have purchased art
84% of those purchases came from local artists
Where they found art varied greatly: online, social media, art markets and fairs, antique stores...
INSIGHTS:
The data tells me that people love art, they WANT to buy art, but WHERE to find the art, might be a problem
Competitor Analysis in Figma
The Competition
I couldn't find another site or app especially similar to Local Art, besides maybe Instagram. Which is a free platform for artists (and everyone). But I found it difficult to narrow my searches there. Anyone can use a hashtag for any post they choose
The most direct competition would be Etsy. Etsy has an app, and has a TON of art, but also a lot of other things (food, clothing, home goods...) They also take a cut of any profit and there's a small fee to post
There's also Artsy.net, Art.com, Singulart.com. They sell art online. Most are prints of famous art, but there are also some "emerging artists" with prints for sale. But the general feel is very elitist and not reachable
Tattoo shops are also a REALLY big indirect competition. They have lots of social media accounts with huge followings, a ton of gorgeous visuals, and great websites that introduce all their artists.
Who is this app serving?
User Person in Figma
Meet Caroline
Putting together a persona always helps me humanize the project. Who do I think would love this app? Who am I building this app for?
I happen to live in a very hip, young, art district in Denver called RINO. And I based a lot of my persona's traits from my own observations around my neighborhood, and some young creative young women I know.
Caroline LOVES arts and crafts, and frequents Pinterest and Etsy, and even sells some of her own crafts on Etsy
Being a local artist herself inspires her to want to help other artists
Caroline wants to keep supporting the artists in her community, even during a pandemic
She loves looking at art, because it helps inspire her own creativity
What's most important to Caroline? She wants to find art and support local artist as much as she can
User Flow in Whimsical
Caroline's flow through Art Fair...
I designed a User Flow in Whimsical, to help me step into Caroline's shoes, and map out her path when using my app. Where would she go first? What's important to her? Would she search or browse?
I skipped the onboarding to save time
Caroline has used the app before, and her favorite thing is to just browse through art. Like she would at a local art fair or market
When she sees something she loves, she can reach out to the artist directly through their profile
While building out the flow, I also had the idea to have a "New Artist" section, for artists just getting their feet wet
Sketches to Wireframes
Some sketches of the main screens
Sketching some ideas...
Sketching always helps me get tangible ideas down on paper. I always get nervous before starting wireframes in Figma (the terror of the blank page), but sketching always helps get the ideas flowing with less intimidation.
What would the screens look like? What are the most important features? What does Caroline care about? What's most important to her?
Caroline wants to be able to find and browse art, and artists in her area
A "New Artist" section idea came to mind while sketching!
I did a couple different versions of each screen, to get more comfortable with the design ideas
Most of the changes were to the navigation and the layout of the Home screen
The navigation icons changed, in each version. I couldn't quite decide which ones were best, and I was starting to get a little frazzled by the idea of android
Style Guide in Figma
What kind of style...
I gathered photos from Unsplash, and got some ideas from Pinterest, to start putting together a style guide. I love style guides, because it puts all my design ideas in one place, and make it much easier to design wireframes later.
Coolors.co helped me gather some colors, although I kept the colors muted, and simple, to make the art stand out more
Android uses Roboto, so I used a couple different versions of Roboto, like Mono and Condensed throughout the app and even for the Logo
I also reached out to some artists I know/found on Instagram, to use as examples for the local artists and their work! I wanted to support artists wherever I could
Only one artist responded, so most of the art I used was either from Unsplash, Pinterest, Etsy or a couple of my own
Low-fidelity wireframes in Whimsical
Low-Fidelity Wireframes
My Art Fair app would be for Android. Something I'd been wanting to practice. I always get nervous before building wireframes, but especially for apps. The rules make it all more intimidating.
I started with low fidelity wireframes to help me just get something moving. Not worry too much about rules, just get app screens on the page to generate momentum and ideas.
I designed low-fidelity wireframes in Whimsical and made a clickable prototype with InVision
The low-fi prototype helped me see how the screens flowed together, and also pointed out the screens that were still needed (search and filter screens were added)
Hi-Fidelity Homescreen in Figma
Mid to Hi-Fidelity Wireframes
Using my style guide, I started taking the ideas I'd gathered, and putting them together in Figma, to create the screens for the mid and then hi-fidelity wireframes. Slowly building from the ideas I'd already put together before.
I was able to get User testing done for both mid and hi-fidelity
Mid-fi went through 5 rounds of iterations. The design layout of the homepage, the search & filter, and header layout all went through several rounds
After the 3rd round of iterations, I started adding more hi-fidelity interactions like horizontal scrolling, and search screens with more detailed filters with multiple additional screens
You can check out all the hi-fidelity screens below!
UI Design
My main focus for the UI for my app, was to get as close to Android guidelines as I could. Although my goal was PRACTICE and not perfection. I tend to procrastinate once I get to the UI portion of a project, and perfection is usually the mode I use. So my main focus was keep moving forward and don't get stuck on minor details.
I designed using a dark screen, because white background tends to hurt my eyes, so I lean towards darker screens.
I used horizontal scrolling for the homepage browsing sections, and I love how it turned out. I had never designed with it before, mostly, out of intimidation
I followed the Material Design guidelines as much as I could in the time frame
I feel really proud about the homepage and the search screens especially; those screens went through LOTS of testing and iterations, and I'm really happy with the outcome
The final design really reflects Caroline's needs. There's a ton of art, and plenty of ways to keep finding and browsing, and connecting with new artists
Prototypes & User Testing
Testing the Usability
I prototyped and tested the mid-fidelity and hi-fidelity wireframes in Figma.I was lucky to get repeated testing done for my wireframes. The feedback was instrumental to the design. There were certain things that worked, and some that didn't. I listened to it all, understood exactly what was meant, and revised.
The testing was done in person, sitting next to each other on the couch. I watched him navigate the prototypes in Figma, and he gave me feedback as he went along.
The mid-fidelity user testing was crucial. There were issues/frustrations/confusion with the design, layout, and hierarchy of the titles and text, on several screens.
The homepage layout design felt off. Initially there was a black box around the larger images of the New Artist and Upcoming shows sections; I took off the black box, made the image larger, and put the title text outside the image
The header layouts and hierarchy was inconsistent with typography, the back button, and the height
The search & filtering wasn't clear, and needed a better system to show the filtering that has been added, and what it was searching (this went through 5 iterations before finding one that worked with the tester!)
The landing page needs some kind of subtitle to explain what the app does
The hi-fidelity wireframes were tested after several iterations of the mid-fi wireframes. The final testing went really well. And I felt secure (and even excited) to publish my results.
You can check out my final hi-fidelity prototype in Figma, below!
What I learned
I felt especially brain-tired after completing this project.
I repeatedly struggled to get started, and stay on track when designing this mobile app. I thought Android might be an easier app project than iOS, but I still felt that desire to procrastinate just as much.
I found it more difficult to keep moving forward with Android, because there wasn't nearly as much literature and guidelines around their apps.
I couldn't really find clear examples to help guide me. Which made me overthink and procrastinate. And because I have an iPhone (and always have), I couldn't just open up my phone to check out app examples as a guide, to get me back on track.
But thanks to some advice from a Software Engineer friend (if there are no clear guidelines, it probably doesn't matter that much), I was able to move forward and stick to my plan to finish this project on a strict timeline!
If something makes you feel anxious and avoidant... you PROBABLY need to work on exactly that.
Next Steps:
Build out more screens like the profile, favorites, notifications, more of the artist's work and profile pages.... messaging pages! try to keep reaching out to artists so I can replace the art images with local artist's work. There's plenty to still do.