East Brooklyn Art Museum �Art Auction App
Caitlin Powell
Google UX Design Certificate Project 1
The Product
The East Brooklyn Art Museum is a community driven art museum located in Brooklyn, NY. EBAM’s goal is to connect community members through artistic expression and encourage local artist to share their creations with others. Every month, the Museum hosts its popular art auctions to promote local artists and their works.The EBAM app facilitates the new bidding process of these artworks.
Project Overview
Project Duration
July 2021 – January 2022
The Problem
The auctions hosted by the East Brooklyn Art Museum have been moved online due to the impact of COVID-19. As a result, museum members and art lovers need a new way to bid and purchase their favorite artworks.
Project Overview
The Goal
I wanted to create an app that would allow users to continue to participate in the museum's auctions in an online setup. The main goal of the app is to aid users in being able to place a bid on their chosen artwork, claim their winning artwork, and purchase the artwork.
My Role
UX/UI Designer and Researcher who designed the EBAM app from conception to delivery.
Project Overview
Responsibilities
Understanding
the User
User Research: Introduction
To begin my research, I conducted Interviews to understand the needs and frustrations of potential users. I focused on three user groups: Local Artists, Community Members, and Art Museum Attendants. During the interviews, I noted the challenges each group faced when participating and hosting art auctions.
After consolidating the notes from the interviews, I identified 3 painpoints when it comes to EBAM’s Art Auctions:
Organization, Transparency, and Communication.
User Research: Pain Points
Organization
All groups identified organization as a major obstacle to a successful art auction at EBAM. Many felt that the current structure can easily become disorganized, which often leads to confusion and headache.
Transparency
Artists and Community Members felt that the Museum was not clear on where the money goes after an auction. Community members were the most unhappy about hidden fees and Artists felt that they were cheated out on the amount of money they received from selling their art.
Communication
1
2
3
Communication between all groups was a major issue. Everyone felt�that stronger communication was necessary for a smooth experience �and eliminate obstacles during the auction process.
User Persona: Local Artist
Problem Statement:
Malik is a freelance painter who needs a quick and simple way to sign up for local art auctions because putting his artwork on display will help him grow his name within his community.
User Persona: Community Member
Problem Statement:
Karson is a community member who needs an efficient way to participate in local art events because she wants her students to become more aware of artists within their community.
User Persona: Art Museum Attendant
Problem Statement:
Quentin is an Art Museum Attendant who needs effective communication tools because �he wants to inform visitors of upcoming art auctions.
User Journey Map
Quentin’s Journey Map revealed what happens behind the scene of an EBAM Auction and where some communication issues arise.
User Research: Takeaways
Community Members
Community members were defined as the main target audience for this app. This user group would also include anyone who is willing to participate �in the EBAM Art Auctions.
Local Artists
Local Artists would be also be addressed within this app. Artists will be able to sign-up for shows and manage their artworks within their own tab after registering as an Artist.
Gallery Attendants
EBAM Gallery Attendants would be addressed via a separate app or web application that will allow them to organize and manage different shows that appear on the main app.
After reviewing all of my research, I narrowed down my target audience and prioritized the design direction my app would take.
Transitionary Research
To begin my journey in designing the EBAM app, I conducted a Competitive Audit of other art auctions apps and websites.
Competitive Audit Chart (click to view)
Audit Goal: �Compare the auction process of �various art platforms.
Competitive Audit Report (click to view)
Park West Gallery
Singulart
Artsy
Starting
the Design
Paper Wireframes
I started by iterating a rough walkthrough of the main user flow. After my first runthrough, I created another version of the key screens that focused more on placement and hierarchy. I highlighted the screens that were the most successful and placed red marks on the elements I wanted to keep in the digital wireframes.
Digital Wireframes
After reviewing feedback from the paper wireframes, I reworked the hierarchy of information. On the homepage, the images of the Shows and Artists were refined.
Text hierarchy was defined bringing the users attention to the show name first, then the show dates.
Digital Wireframes
A description of the show was included to provide background information about the show and its purpose.
A countdown was included to show how much time was left before a show ends.
The Showroom screen design was derived heavily from the feedback and findings of the user research. Organization and Communication were two of the main focuses.
Low-Fidelity Prototype
After creating the paper and digital wireframes, I created a low-fidelity prototype. The primary user flow focused on selecting and bidding on an artwork, and the checkout process that claims their artwork.
Usability Study: Findings
I conducted two rounds of usability studies. The first round was conducted with the low-fidelity prototype and guided my designs from wireframes to mockups. The second round was conducted with the high-fidelity prototype and highlighted areas that should be revisited and refined before finalizing the designs for hand-off.
Round 1 Findings: (view Affinity Diagram)
Modify the Hamburger Menu
1
Simplify Iconography
2
Round 2 Findings: (view Affinity Diagram)
Further Highlight Important Information
3
Stronger Navigation Indicators
1
More Currency Options for Bidding
2
More Payment Options for Checkout
3
Usability Study: Reports
If you would like to see the Study Plans and Insights, click the respective links below.
Round 1:
Round 2:
Refining
the Design
Mockups
The Current Bid Price and Currency Conversion link were moved closer together to further indicate their grouping.
Before Usability Study 2
After Usability Study 2
Mockups
The “Share” icon was switched �for a more common icon. Text �was also added below icons for additional indication.
Before Usability Study 2
After Usability Study 2
Key Mockups
High-Fidelity�Prototype
After making refinements after my usability studies, created a high-fidelity prototype. In addition to flushing out the primary user flow, many secondary features (ex. Pop-up Alerts) were also designed and functional. The Splash Screen was also animated.
Accessibility Considerations
Font colors were analyzed for their contrast with the background on webaim.org.
Navigation and icon text indicators were added to aid in recognition and navigation.
Users who are vision impaired are able to access the app as alt text was added to images for screen readers (via code).
1
2
3
Finalized Designs
Using what I learned during the usability studies and accessibility research, I reiterated my designs for a Revised Mockup.
View the Suggested Walkthrough
(located at near the bottom of the page)
Going Forward
Impact
Many of the participants who tested this app were very interested in its concept and felt they would use this app frequently to participate in future auctions.
One quote from a study participant:
“Everything seems well thought out and very planned. The Gallery stood out to me the most. Adding the artist bio at the bottom was nice because I feeling like I have a chance to see who made the artwork. Great Job!"
Project Takeaways
What I Learned
A major thing I learned is how important User Testing is in the design process. Because I was so used to looking at my own screens, there were some areas that users had issues with that I overlooked. Without their feedback, some of these issues may have gone unchanged and hindered others who would use the app.
Next Steps
I will continue to implement feedback and iterate on my high-fidelity prototype. I want to make sure users are able to place a bid on their chosen artwork, claim their winning artwork, and purchase their artwork with no issues.
After final revisions and modifications have been made, my screen will be ready to send off to a development team to launch my app!
1
2
Let’s Connect!
Thank you for taking a look at my Process Work for the East Brooklyn Art Auction App!
If you’d like to see more of my projects, feel free to view my portfolio below!
Email: connect@caitlinpowell.xyz
Portfolio: www.caitlinpowell.xyz