top of page

 UX Case Study

During this project, I conducted research and developed UX/UI designs of an app for the Fox and Hare Gallery. The app was targeted at (1) art enthusiasts/amateur artists and (2) amateur art collectors and investors.

 

My role: UX/UI Designer, Researcher and Brand Designer

The problem

The art gallery needed a shopping app that not only allowed users to purchase art from the gallery easily and efficiently online, but also allowed users to complete the research part of the purchase journey all in one place.

The goal

The art gallery shopping app will let users research available artists including their background, their process and their predicted growth before buying a piece, which will affect users who are looking for art as a future investment and art enthusiasts interested in supporting the industry and learning about artists. This is achieved by making the research phase of the art buying journey easier and all in one place.

Research

Interviews were conducted with 6 users who met the criteria of having purchased art online. Prior to research, it was assumed that the main user groups would be art enthusiasts or users interested in purchasing art due to a change in their situation (e.g. moving house). It was assumed that the app should not be directed towards art investors (the more serious and detail oriented user group) because they would be unlikely to purchase a piece of art for investment/collectors purposes online. However, this was not the case. The two main user groups that came from the research were (1) art enthusiasts/amateur artists and (2) art collectors and investors.

User pain points

1.

Multiple platforms, websites and forums used for research

When researching artists, it would be helpful if all the artists’ background, process, awards and education were all in one trusted, curated place. The designs will bring all that information together to allow users to get a good sense of who the artist is.

2.

Possible lack of ability to get trusted advice on an artist or piece online

When researching artists for investment purposes, it can

also be hard to find professional advice about the artist. The designs will include functionality that provides investment insights.

3.

Difficulty determining online if an art piece would look good in the home

A deterrent from buying art online is the difficulty in gauging if the art piece would look good in the home. The designs will incorporate this with functionality that utilises augmented reality and the phone’s camera.

4.

Purchasing art online can be impersonal

The users wish to know not only why they should purchase a piece of art from a particular artist but who the artist is. It gives them a story to tell. The designs will ensure the artist profiles are as personal as possible.

Persona: Sal

Sal is an art enthusiast and a part-time artist who needs a place where they can support artists online, whether it is buying their art or helping them grow a following online, and learn from their art because they want to be able to support the art community and learn new techniques for their own art.

Sal’s goals are to browse artists online for pleasure and find an artist to support, whether it is through a purchase or support on social media. They also wish to learn from artists because they are amateur artists themselves. They are not immediately out to purchase an art piece (unless they have need for one due to a change in their situation such as moving house). If they do find an artist that they like, they will consider buying a piece from them.

Persona: John

John is an amateur art collector and investor in their spare time

who needs a new painting for their home from an up-and-coming artist because they find pleasure in finding art that they not only love but is an investment that will grow in value over time.

John’s goals are to find an artist that is ‘up-and-coming’ that may become an investment over time but also suits their home and tastes. The user journey prior to the app involves research across multiple platforms, websites and forums. After the app, it can be done in one place.

Starting the design

Over the course of the design process, the end users' needs were kept top of mind. The process included paper wireframes iterating on all of the main pages of the app, then digital wireframes, low-fidelity prototypes and then high-fidelity prototypes.

Paper wireframes

During the development of these paper wireframes, many iterations of each screen were developed. This enabled exploration of different layouts to find the best layout. These layouts were then developed into low-fidelity mockups and further iterations to improve them were made.

UX-certificate-art-gallery-paper-wireframes.png

Digital wireframes and low-fidelity prototype

The digital wireframes and then the low-fidelity prototype were developed from the paper wireframes keeping in mind the two main user groups who would be using the app: (1) art enthusiasts/amateur artists and (2) Amateur art investors. For example, during the user research, it was discovered that many of the interviewed users wanted to be able to better and more easily gauge what an art piece would look like in their homes. A large gallery, 'view in room' and 'book a viewing' features were designed to be able to provide ample visuals of the art piece and help users in the research phase of their purchase journey.

Art-Gallery-UX-Prototype-low-fidelity.jpg

Usability studies

The first moderated usability study on the low-fidelity prototype was conducted on 5 users who would be primary users. A number of findings came from the study and influenced the low-fidelity prototype.

High-fidelity prototypes were then developed and a second moderated usability study was conducted on another 5 users.

1st study findings

The insights that came from the first usability study shaped the mockups prior to creating high-fidelity prototypes.

  1. Menu and wishlist need more cues - text was added to the menu and wishlist icons and the navigation bar was heightened.

  2. Summary page before purchase needed - a confirmation page before purchase where uses could review their order was added to the purchase journey.

  3. Tabs need to be more obviously clickable - the tabs were redesigned to appear more ‘clickable’ and were moved up above the carousel to be clearer what they were in relation to.

  4. Clearer organisation of homepage sections.

  5. Make sure that price bar sticks to the bottom of the screen not the page.

  6. Have an investment advice section in menu.

2nd study findings

The insights that came from the second usability study shaped the high-fidelity prototypes.

  1. The green colour used for text and buttons needs to be darker - all text colours were changed to be more visible.

  2. Reduce confusion of what the user needs to do on the homepage - the homepage carousel was removed and made into just a static image with the headline and search bar hovering over it. This made the purpose of the image clearer that the user is entering the gallery and could search for what they were looking for or scroll the sections below.

  3. Declutter the navigation bar to make the menu more identifiable.

  4. Make the payment options more identifiable - icons beside each payment option was included to make the options more identifiable.

UX-certificate-art-gallery-mockups-after-usability-study-2.png

High-fidelity prototype

The high-fidelity prototype was iterated on after the usability studies. It met the user needs to easily research artists, contextualise specific art pieces in the users’ environment and purchase a piece of art smoothly.

Accessibility considerations:

Several considerations were included in the prototype including:

  1. Text beneath each icon was used so that screen readers could more easily read them. Alt imagery would also be encouraged for all images on the app.

  2. Minimal instances of text on imagery to reduce the impact of visibility issues.

  3. All instances of text colours passed visibility checkers with a visibility ratio of 7.5:1 or higher.

Art-Gallery-UX-Prototype-high-fidelity.jpg

Takeaways

UX/UI design is a fluid process. During this project, I learnt how to make design decisions that were based on the needs of the end users and to continually test and optimise on the designs to create a better user experience. Starting the design process with user research and conducting multiple usability studies was key.

bottom of page