Artioneer

Case Study for a mobile app that allows art galleries and art collectors to participate in art auctions (concept).

Check out the Prototype

Problem

It is difficult to attend gallery auctions to purchase art if you have a busy schedule or you don’t live close enough.

Solution

Create an app that can be used from a smartphone in any location and on any schedule.

Tools

Figma
Jamboards

Duration

Jul-Nov 2022

Redesign Feb 2023

Roles
Researcher
UX Designer
UI Designer

Figma Artioneer Prototype - Redesigned

Here’s the how:

Empathize > Define > Ideate > Prototype > Test

For this project, I interviewed six participants. It really helped me to empathize with the potential users and know who I am designing the app for.

It was extremely helpful to get feedback from users and acknowledge my biases.

Profile picture of Daniel along with his age, education, hometown, family status, and occupation. The image also contains a quote asking 'What inspires you?' and lists his goals and frustrations in relation to art. A brief bio describes Daniel as an artist who values understanding artist backgrounds, thought processes, and photographic quality.
Table outlining a process for purchasing art during a busy schedule, including actions like finding art to buy, adding to watchlist, placing a bid, checking phone, and ending the auction, with detailed task descriptions and emotional feelings at each step.

After the interviews, I created a couple personas, user journey maps, and a task flow to further understand the problems could be solved with designing this app.

Flowchart illustrating an online auction process, including steps such as opening the app, selecting categories, browsing artwork, describing art, and making purchase decisions.

Keeping the users’ feedback I sketched multiple iterations of each screen in paper wireframes.

Sketches of six mobile app wireframes for product pages, each featuring layout elements like image placeholders, text areas, buttons, icons, and annotations for design notes.

Once I had chosen the sketches I liked most, I went to Figma to make the lo-fi wireframes and a lo-fi prototype of one user flow.

Flow diagram of an online auction app illustrating user interactions across screens, including browsing listings, viewing details, winning bids, checkout, and order confirmation.

I used Google Jamboards to organize the data from the user testing in an easily navigatible affinity map.

A color-coded mind map with categories such as profile location, confirmation, design/look/layout, navigation, and placing bids. Contains notes and comments in yellow, pink, blue, orange, and green about features, issues, and suggestions for a profile or auction website.

Usability Study #1 Findings:

  • Users needed a way to add their own bidding amount

  • The lack of confirmation worried all of the users

  • It was mentioned by a few users that the layout was a bit monotonous

I understood the participants’ frustrations with the lack of confirmation. I too would be scared if an app immediately told me I was buying something when I clicked a button!

Screenshots of a mobile app showing an online auction process for art, including product details, bidding, checkout, and confirmation steps.
Screenshots of an online art auction website displaying abstract artwork by John Doe. The images show bidding, checkout, and order confirmation pages with colorful abstract paintings.

In the first mockup, I made sure to include more confirmation and also a page to customize the price to bid.

After further user testing, I redesigned the brand with a color scheme that would allow the art to be more of a focus in the app.

2023 Redesign

A smartphone screen displaying an art app called ART PIONEER with a search bar, filters, and various abstract artwork categories.
A mobile app interface for ARTtioneer, featuring a search bar, recommended artwork section with an abstract painting, and scrolling for ending soon artworks, with navigation icons at the bottom for home, favorites, bids, and profile.
Black and white line drawing of a person holding a large check with a checkmark

Before

After

What’s better?

  • • All frames have been checked with WCAG & A11y to meet at least the AA contrast guidelines.

    • Icons are accompanied by text to help with screen readers.

    • Animations follow W3C guidlines.

    • A Voice-to-text microphone was added to the search bar.

  • I took into account the Gestalt Principles to make the layout intuitive and allow the user to understand groupings.

    Things like negative space were better utilized to create some visual rest and make pages look a little less cluttered.

    Each spacing follows an 8-point grid system to allow better hierarchy and consistent scalability.

  • By adding different line weights to the typefaces, I was able to further represent hierarchy and give more value to the text that would be most important.

    I stuck with one font to create a sense of consistency and simplicity.

Close-up of a person holding a smartphone displaying an art app called ART PIONEER, with various abstract artwork thumbnails visible and a search bar at the top.

Takeaways:

I am so pleased with this project and I can say I learned A LOT!

This was one of the projects I completed through the Google UX Deign courses.
I learned the entire design process: user interviews, wireframing, prototyping, mockups, usability tests, and more. Plus I was able to feel very confident in using Figma!

With my redesign, I learned the importance of spacing and layouts. I believe I now have the skills to visually design a user-friendly and appealing app.

What’s Next?

There is always room for growth. If I were to redesign the Artioneer App yet again, I might reconsider my color choices. I wanted this app to be very accessible. There are parts that could be tweaked to fit the AAA guildlines for color contrast.

It would also be interesting to create a scalable website to go along with the app.

For now though, the plan is to take everything I have learned and impliment it into new projects where I can continue to learn even more!

Thanks for checking out my case studies!

Please feel free to reach out with any feedback or questions you have.

Reach out!
Go to next project >