Art Shop Website Case Study

An online presence has become essential for small businesses, especially with the drastic social changes that we’ve experienced the past year. More and more professionals are making their digital transition, as more and more people are looking on the internet to find and support local businesses.

At Ironhack, we want to help make a positive impact in our local communities, so our challenge was to find a small business and help them make this pivotal transition into the digital marketplace.

The Brief & Project Kickoff

Our team decided upon helping a photographer/graphic designer based in Paris launch her online business, Sama Beydoun (Instagram, Behance). We were to design a desktop website that would serve as the artist’s online shop.

To kickstart the project, we held a stakeholder interview with the artist, asking questions about her background and vision as an artist as well as her business objectives. Our interview included questions such as:

  • What products will be sold on your website ?
  • How would you describe your photos/photography style?
  • Which artists/photographers do you admire? Do they have a shop?
  • Who are your regular customers and what are their backgrounds?
  • Are there any customers you wish to have?
  • What are your artist/photography goals?

Answers to these questions then allowed us to benchmark her brand and conduct a business and competitive analysis. We compared the features of online art gallery shops and shops of other independent artists.

In this feature comparison chart, we listed all of the features that we present in the websites. In each cell, we either gave a red mark to represent that the feature is missing, or a green mark to represent the feature was present in the website.

Analyzing our client’s marketing position also helped us gauge what direction we want to move towards and better understand the competitors we are comparing the current and ideal brand to.

Here are the three most pertinent stores.

  1. False Knees — an art print store of an independent comic artist who can be considered as a direct competitor. Moving forward, this will be our main inspiration for our website’s architecture.
  2. Violaine et Jéremy — portfolio website of a studio pair. A personal inspiration favorite of our client in terms of its visual presentation.
  3. Perrotin — an online art gallery shop, considered to be an analogous competitor. This website contained all the features from the comparison chart.

Empathize

These analyses were followed by user interviews in order to verify our assumptions. We gathered information about the users’ art consumption, their online shopping habits, and their general background. We also presented the users with the website of False Knees and Violaine et Jéremy and recorded their reactions. After the interview, the responses from which we organized into an affinity diagram and empathy map.

Pains

From these exercises, we learned that the main concern of our user was the clarity of the website. They found fancy websites to be confusing and unclear, especially due to the fact that there was information and graphics that spanned the entire screen. They simply just did not know where to look.

Gains

Our users are looking for a straightforward website, especially if they are looking to purchase an art print from an artist. Simple is best. The website, however, must still give us a glance into the artist’s world in order to better understand the artist, their story, and the messages they want to convey through their art.

Define

Next, we defined our User Persona and User Journey.

User Persona

We decided to name the User Persona Jane. Jane is a business woman who loves art andn decorating her home with art as a way of self-expression. For her User Journey, we imagined her discovering an artist on instagram. She wants to purchase something from the artist, so she goes to their website. On the website, she ends up getting lost and confused, so she never buys anything.

Touch Points

Three touch points emerged from Jane’s user journey.

  • Exploring navigation possibilities
  • Displaying the list of items
  • And displaying a specific item

Problem Statement

From these touch points we created our problem statement.

Art lovers need to find a way to navigate an art website easily because they want to be able to find the information they need in order to make their purchase quickly and efficiently.

How Might We…?

In order to find a solution to our problem statement, we asked ourselves the following three questions:

  1. How might make a simple interface that is simple and straightforward to use?
  2. How might we create an aesthetically pleasing website that represents the artists’ universe but is also practical?
  3. How might we create a connection between the artist and the customer?

We started brainstorming ideas with the MoSCoW method, which helped us identify the most essential features to include for our MVP.

Minimum Viable Product (MVP Statement)

The goal of Sama’s platform is to share a gallery of her art projects in order to gain visiblity and allow users to purchase her artwork. By expressing the her artist story, the website further aims to create a connection between the user and the artist that encourages the user to make a purchase or request a commission.

Our next step was to organize the structure of the website we were designing for our client. To do this, we created a site map along with flow charts to illustrate how users would navigate the website.

Ideate

With the site map and basic flow chart in place, we could start planning the layout of each page of the website. To do this, we used the Crazy 8’s method, each of us using one minute to come with an idea for each page.

We used dot voting to choose the layout ideas and specific features, combining our ideas, that would be best suited for the purposes of our client’s website.

Crazy 8’s and Dot Voting

Prototypes and Testing

A Low-fidelity wireframe sketch was done for each page so that we understood the basic framework of the website.

From there, we were able construct the Mid-fi wireframes to bring more clarity to the structure.

We tested the website concept by creating a Mid-fi prototype with the wireframes and conducting Usability Testing with 4 different users.

The users were given three different tasks to complete:

  1. Purchase a piece of art.
  2. Learn more about the artist.
  3. Contact the artist.

The results from the Usability Testing were gathered for our Test Report. We recorded the task completion rate for each of our users as well as their responses to a survey about their user experience.

Only one user did not succeed in the first task because of a figma animation error that hid the navigation bar, but overall, the users completed the tasks as expected.

Overall, the users found the website well organized. Although it is not a shop they would often visit, the experience was generally pleasant.

From our users, we learned about two areas to improve on. The first being the layout of the website. We need to keep elements consistent throughout the whole website and make sure everything is well aligned. We also need to make it easier to retrieve information and to understand the contents of the website.

Here are a few examples of details to improve. We noted areas to adjust, such as the navigation, the footer, and other details.

Styling

The next step was to apply UI elements and complete the visual aesthetic of the website.

We started with a visual competitive analysis, comparing two websites that we aspired to be like.

We made a mood board with various works from the artist to see how we can communicate her artistic style through the website’s design.

We wanted our client’s brand to convey certain attributes, showing that her work is meaningful, engaging, creative, inspiring, and confident. We also stuck with a minimal color palette with a simple, yet bold typeface in order to allow the client’s work to speak for itself. Our style guide helped us visualize the overall feeling of the website.

style guide

High-Fidelity Prototype

We applied the style guide to our high-fidelity prototype.

Here is our high-fidelity prototype. Besides changing the colors and typography, we changed our burger menu to a static navigation bar and cleaned up our alignment. We also added price previews for each product.

Desirability Test Results

We conducted Desirability Testing with our Hi-Fi prototype with 5 different users. We asked each user to describe the Hi-Fi prototype with 3 adjectives. They described the website as simple, entertaining, original, colorful, confusing, aesthetic, clean, and organized.

Aesthetic, clean and organized were the top 3 adjectives used to describe our Hi-Fi prototype. This told us that we were on the right track with our Hi-Fi prototype, but that it could still use more work to achieve the look and feel that the we wished to have for the website.

Conclusion

For our next steps, we would like to:

  1. Refine navigation and small details to make the website more clear.
  2. Clean up the elements of the website so they work in an adaptive layout.
  3. Set up the shop so customers can start buying.