Case study 2 : Local e-commerce

The covid 19 situation has pushed small businesses to find other solutions to continue to sell in order to exist despite the crisis.

Online presence is a good way to hijack the issue. More and more professionals are on the verge of their digital transition.

Our client is a photographer/graphic designer based in Paris launch her online business. We will design a desktop website that would serve as the artist’s online shop.

1/ UX Research:

1/ Stakeholder interview :

We started with a stakeholder interview to understand what are the goal and frustration of the client.

Sama is our stakeholder she’s 24 years old, she’s a photographer and a designer. The purpose of the website is to first sell her design and photo and secondly to gain visibility to be contacted for exhibition. The users that she targets are between eighteen and forty years old, they are generally art lovers and entrepreneurs.

Right now she’s using the Behance platform but it doesn’t allow her to sell her design and not all of her designs are available. She wanted a website that will be a fusion of an online gallery and an e-commerce website. And that’s our challenge.

https://www.behance.net/samabeirut

https://www.instagram.com/sama.beirut/

Her work sends a message and is always related to a story. She’s engaged in a lot of debates.

2/ Features comparison chart :

After our stakeholder interview, we took websites of artists and galleries to compare the organization and functionality. And we end up with a Features comparison chart.

3/ Market positioning map :

We observed the different sites’ positions on the art market with a reference to the client’s ideal position.

4/ User Interview:

Then we conduct 5 interviews to know more about the user. We wanted to know :

• How do they view the Art Market?
• Do they visit galleries?
• Do they buy art?
• Do they do online shopping?

5/ Affinity Diagram:

We analyze the result of the interviews in an affinity diagram and in an empathy map to “look at the world through our user’s eyes”.

We show our users two websites that were already existing to understand ever more the need of the user. We realize that there were two main pain points and two gains :

6/ User Persona :

Our user persona is Jane, she enjoys going to art galleries, but she feels that the art world is very niche and closed-off. She prefers supporting local artists and purchasing art pieces online.

Her goal: satisfy her curiosity and learn more about an artist’s world and express herself by displaying her favorite art pieces in her home.

Her frustrations: she loses too much time trying to find what she needs and can’t make a personal connection with the artist.

7/ User Journey Map’s:

Jane User Journey’s has been done to be able to visualize the journey of the user and the pain point, frustrations, and where our product will appear to help the user and change his journey flow.

Jane finds an artist that she likes on Instagram and decides that she wants to purchase something from the artist for her apartment. She tries to look around the website to find the artist’s bio, but she doesn’t know where to look. She loses herself in the website’s navigation. Doesn’t know how to get back to the home page. She tries clicking several buttons.4.2 Finds an art piece she would like to buy. Does not see any information about the art piece (dimensions, material).

She wanted to zoom in on the image and it’s not possible. She would like to add a frame and there are no options. She does not know how to purchase the art. She doesn’t buy anything.

8/ Problem statement: here’s the problem:

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

9/ How might we :

We brainstorm and choose the 3 following “How might we” and pick the 3 main problems we want to solve:

How might we create a connection between the artist and the customer?

How might we make the interface straightforward to use?

How might we create an aesthetic but practical website that represents the artists’ universe?

2/ INFORMATION ARCHITECTURE:

1/ MVP :

Then we define our MVP (Minimum Valuable Product) that helps us to clarify the base of our product, the main feature.

The goal of Sama’s platform is to share a gallery of her art projects in order to gain visibility and allow users to purchase her artwork. By expressing 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.

2/ Moscow Methods:

Using the Moscow Methods we classify which features were mandatory, a plus, or not necessary. The Moscow Methods is a chart with 4 categories: Must Have, Should Have, Could Have, and won’t have in order to prioritize and focus on the main features.

This website aims to sell the works of Sama Beydoun, but not only.

Considering the answers we got during the user’s research, the importance of knowing more about the artist was quite important.

3/ Site Map :

That’s why in our site map we add an about page and a contact page in addition to the photo and design purchase pages. The site map helps us visualize the different pages that our website will have, it depicts where the page is live in the platform but not necessarily in the order users will see them.

4/ Happy Path, User FLow :

To satisfy the desires and needs of the artist as well as those of the target, we decided to create a website with a minimum of steps between the initial visit and the purchase: we build our user flow based on that idea. The user flow shows the path or paths a user takes to complete a task.

5/ Low Fidelity :

Then we began to do as a team de Low-Fidelity sketching to check and test functionality rather than the visual appearance of the website.

To show only key elements of the content.

6/ Mid-fidelity and testing :

After testing our low-fidelity sketches we did our mid-fidelity frame on Figma:

3/HEURISTIC ANALYSIS:

1/ Usability Testing:

Then we start our usability test with 5 users. We did a test report in a chart :

We had takeaways after the test :

We figure out that there were too many clicks to get to the product listing page. The icon on the header was too small and we need to add a login/profile section.
On the footer, the font was too small. We need to fix the name of the website by adding a name beside the logo so the users know the name of the website they’re using.

There was a spacing issues in the project page that we needed to fix.

We wanted to add a preview with the price of the photography/design.

4/ VISUAL DESIGN:

1/ Visual Competitive Analysis:

We did a visual competitive analysis of 2 websites to have an idea of the visual design they make.

2/ Moodboard and brand attributes:

We did a mood board with the photography and the design of Sama Beydoun so the moodboard can match with our brand attributes that are : Meaningful, engaging, creative, inspiring, confident.

3/ Style Guide:

We make a Style Guide before doing the hi-fidelity:

4/ Responsive Design:

5/ Desirability Test Results:

We test our Hi-fidelity and the word that came the most are Organized, Aesthetic and Clean.

8/ Hi-fidelity:

7/ Next Steps:

We would like to clean up the elements of the website so they work in an adaptive layout. To set up the shop so customers can start buying and to refine navigation and page details to make the website more clear.

8/ Key Learnings and Takeaways:

We learn how to take a stakeholder interview and to take the objectives into consideration. We create for the first time a style guide and a realistic prototype with color.