Two Phone Mockup.png

product.

Galleries is an app concept where users engage, from curation to memberships, with art on their own terms.

duration.

12 weeks (Feb/Apr 2022)

team.

Gabrielle H.

role.

UX/UI Designer

tool.

Figma

problem:

We faced a tiered problem (1) collecting art is an expensive hobby, making quality art experiences less accessible for art enthusiast on a budget; and (2) more serious art collectors want a space to curate their own collections.

goal:

Design a mobile application that would make quality art experiences more personal and accessible.

research.

Interviews were conducted with several individuals. The findings in those interviews were used to create an aggregated empathy map that anchored user personas. Those personas were used to inform the user journeys + stories. I also conducted a competitive audit, and used audit findings to create the competitive analysis report that proved valuable during ideation.

 

Before conducting the interviews, assumptions were made about general patterns/set of habits e.g., participants would prefer to online shop for pieces. However, after the interviews it was clear that each participant’s motivation, purchasing habits, and past experiences with art very much dictated their current patterns.

Artboard 1.png
Artboard 2.png
IMG_5888.HEIC
IMG_5886.HEIC
IMG_5887_edited.jpg
Mera Art.png

"Art is a frequency, vibrate accordingly."

Biggest frustration: 'I hate when I can't find a piece that resonates with how I'm feeling.'

GOALS

~ home full of conversational art

~ greater confidence when purchasing online

~ gallery-like home

"Budget should not dictate art accessibility."

Biggest frustration: 'Inaccurate online descriptions and poor quality artwork.'

GOALS

~ secure budget-friendly, high quality pieces

~ connect with people in creative spaces - galleries, shows, marketplaces

Talore Art.png

insights from competitors.

social media presence

mobile application

accessibility considerations

responsive

website

language selection tool

Good Black Art

X

X

Eventbrite

X

X

X

X

X

Philadelphia MOA

X

X

Etsy

X

X

X

X

X

X

X

ideation.

Big picture storyboard
press to zoom
Close up storyboard
press to zoom
Paper wireframe homepage
press to zoom
Paper wireframe homepage
press to zoom
Paper wireframe purchase page
press to zoom
Paper wireframe member profile page
press to zoom
Paper wireframe membership page
press to zoom
Digital wireframe
press to zoom
Low-fidelity prototype
press to zoom
1/1

Keeping the goal of making art more accessible and personal in mind, when I began the wireframing process I knew that since the most important aspects would be customization, it was important that at every stage of navigation users felt in control.  

Understanding the variation in interaction with the arts, and the desire for readily available funds when it came time to purchase art, we prototyped a space where users could feel like both needs were adequately addressed. 

Digital Wireframe - before_edited.png
iPhone 13 Pro_edited.png
iPhone 13 Pro-Before Study_edited.png
Screen Shot 2022-04-10 at 2.44.43 PM.png

usability studies.

Early concepts required that users complete twelve fields before creating a profile. However, after the usability studies, the information required to create an account was significantly reduced down to five fields. The revisions also meant that there was now only one page between the home screen and a user’s profile page. 

Early concepts also relied more heavily on larger amounts of copy to navigate users throughout the app. After the usability studies, action navigation had a more prominent design, reflecting only necessary wording.  

(key insights)

users want shortest path possible to create a member profile;

users should be asked to submit as few personal details as possible when creating a profile;

navigation paths need to be intuitive no matter what page serves as the user's start; 

actionable buttons should be clear

before usability study.

Digital Wireframe Profile 1_edited.png

after usability study.

HiFi Prototype Profile 1_edited.png

solution.

Galleries_Sticker sheet.png

sticker sheet.

The second usability study reinforced that it wasn’t clear to users that they could pay with a built-in savings account feature -- they often opted for other payment methods when placed side-by-side.

 

To make it more apparent that they could use their art savings account i.e., “Art funds” I revised the design to separate out the options, making the “Art funds” option the default and changing the wording from “Rewards” to read “Art funds”. 

Also, interactive features were redesigned to highlight interactivity through the addition of color as well as a redesign to encourage action i.e., “Try a new experience.” Lastly, the “Back” button was added to every page for easier, more intuitive navigation.

before usability study 2.

Mockup 1 Person Face_edited.png
Checkout Mockup - Before_edited.png

after usability study 2.

Checkout Final Mockup_edited.png

takeaways.

Impact: 


“I really love the visual style you are going with here, the use of images and well-placed layout make it feel attractive.” - Classmate review

“I've never heard of this period, so I like that it gives artists a place to showcase their art pieces and another way to interact with customers and art collectors.” - User review

What I learned:

The design always comes back to the user. As a UX designer, when you begin adding elements that confuse the user or distract from the main flow/function of the product, it shows - and user feedback will always bring you right back to the start -  your original goal. 

solution.

Group 216-Browse.png

Customize Your Experience. 

In just two clicks, users can create a profile.

 

By using individual tags, and curating their own galleries, users create an experience that reflects how they personally interact with art. 

Create A Savings For Art.

Users can opt-in to an art savings feature, where they decide how much they want to contribute on a periodic basis. When they see an art piece or experience they like, they can use their saving's funds to purchase.

next steps.

Add additional screens to complete main user flow; update accessibility features; and conduct another usability test with screen reader assistive technology.