top of page
logoartdeck copy.jpg

ARTDECK

A marketplace to sell rare authentic tribal arts from India

landing3.gif
Responsive website, UI/UX Design / Research / Product Strategy
desktop1.gif

I designed an experience where users can explore the artwork in their room and make a stress-free purchase.

DURATION

6 weeks

MY ROLE

 

Sole UX / UI designer

SCOPE AND CHALLANGES

An attempt to improve users' engagement with artdeck. The goal is to increase customer conversion rate and retainment in the marketplace.

This was an open-ended project I did for my UX/UI Course. I made a hypothetical company ARTDECK. The data shows that 70% of users who place artwork in the cart do not checkout, and 50% of users open on average of 5 item pages and abandon the site.

TOOLS

LOGOS.jpg

BACKGROUND

Tribal arts depict mythological tales, scenes from daily lives, and folklore. They are made from organic and natural products. Some tribal arts like ‘Warli,’ ‘Madhubani’, and ‘Gond’ are passed on from generation to generation. Indian tribes sell their artwork to visitors in small galleries near their villages.

During COVID all sales can only be done through their e-commerce websites. There is a need to enhance the browsing and checkout experience of buyers to greatly improve sales on the site.

ladypainting.jpg
screenfront.jpg
logoartdeck copy.jpg

ARTDECK

A market place to buy authentic tribal arts with confidence and trust.

HOW IT WORKS

INTRODUCTION

A strong introduction to tribes of India can attract buyers' attention. By clicking 'Explore Artwork,' the buyer can find out about the artwork's culture, history, and techniques. Having proper information about the uniqueness of work provides a head start to the website.

VIEW IN ROOM

Buying artwork is challenging because the buyer needs to know how it will look in their room. To get a better visual idea, I added a way to upload the picture of the room and see the artwork on it. Also, some images to see it in various settings could be helpful.

CHECKOUT

People don't like to provide too much information about themselves. I made clear four steps checkout with minimal information. Making an account is optional.

SUCCESS GOAL

Framework
goal3.jpg

Develop a framework where users can identify and decide the best artwork for their home.

Efficient checkout
goal2.jpg

Provide guest checkout options for an agile and efficient checkout.

Build trust
goalone.jpg

Build user confidence, trust, and credibility to retain them for future purchases.​

UX PROCESS

UXprocessmap.jpg
Research

RESEARCH

Competitive Research

 

I started by looking at the currently existing framework and compared a couple of online art galleries regarding design layouts, UI elements, user flows, and functionalities.

KEY FINDINGS

It is always better to show more information about the product, which can be organized by following visual hierarchy and proximity design rules. Design should offer the users freedom and consistent, recognizable flows to reduce cognitive load.

Menu

comp3.jpg

The top menu provides efficient navigation, and the left menu is only needed if there is a large amount of content to display.

Guest 

comp1.jpg

Guest checkout options are available on most of the sites.

Filter

comp4.jpg

I noticed that a good filter option could save browsing time significantly by displaying the relevant items. 

Reviews

comp2.jpg

Rates and reviews of items are an essential element on all sites.

secondaryreserch.gif

Interviews

 

After interviewing three candidates, I made a list of the core customer needs to have a good art shopping experience on the internet. 

quotes4.gif
quotes2.gif
quotes3.gif
quotes5.gif
quotes1.gif
quotes6.gif

KEY NOTES FROM RESEARCH

 

Below is the summary from research and interview

Extensive Filter and top Search Bar

Having the right filter menus and a top search bar can save time and frustration of people. 

Information about art and artist

Buyers prefer to know details about artwork and artists. Similar works from artist, a biography, and story behind the creation will get buyers' attention.

Certificate of Authentication

People want to make sure they buy authentic work from the artist online.

Free shipping

Having not to pay for shipping promotes the buyer to finish the purchase.

Return policy

Having an option to return the item is important for buyers.

Seamless checkout

Guest check out and clear steps to complete the process add towards better user ecperience.

Interview

SYNTHESIS

Persona

 

In order to understand our users better, I developed the following persona using the data from the interviewees.  It helped me to stay in their shoes while designing the product.

personaslatest.gif

User flow

 

After synthesizing the information I have collected during secondary research and interviews, I outlined the factors that lead to an enjoyable user experience. 

 

I created a user flow to identify all the steps a user will go through to view artwork and complete the checkout process on ARTDECK.

user flow_edited.jpg
User flow

User stories

As a user, I want to make sure the artwork looks good in my room so that I will be satisfied with my purchase.

As a user, I don't want to spend too much time looking for the item so that I can have been more productive in my search

As a user, I want to know the return policy before placing the order so that I can return it in case it does not work out for me.

As a user, I want to purchase genuine and authentic goods so that I can build credibility and trust with the store

As a user, I don't want to make an account so that I can keep my personal information private.

As a user, I want to explore more items before checking out so that I can compare and make up my mind.

DESIGN

Low fidelity

 

 

Initially, I sketched some screens in Figma with basic functionality and layouts keeping key points in the design center.

MAIN PAGES

LANDING PAGE

​An introduction to the tribe's history of artwork and techniques.

GALLERY PAGE

Thumbnails of artwork and filter on the right.

DESCRIPTION PAGE

​Details of a particular artwork.

lowfidscreen1.gif

CHECKOUT PAGES

Then I designed a straightforward checkout process using four screens.

CART PAGE

​Option to choose shipping methods and an invoice of the order.

ADDRESS FORM

Billing and delivery address with an option to create an account.

PAYMENT PAGE

Credit card or PayPal patent options, additional information text area.

CONFIRMATION PAGE

An order confirmation with an email was sent to notify the order summary.

lowfidscreen2.gif

VIEW IN YOUR ROOM PAGES

I wanted the user to identify the right artwork for the room, and with that central idea, I designed the flow below to view the painting in the room.

UPLOAD IMAGE

Upload an image of your room to view artwork in it

lowfidstep1.gif

CONFIRM UPLOAD

User can change the image in the case made a mistake

lowfidstep2.gif

SELECT A PLACE

Click on the wall where the user would like to see the artwork.

EXPLORE OTHER PLACES

Move the rectangle around to explore the right fit for painting

lowfidstep3.gif

DOWNLOAD IMAGE

When we display the artwork at the perfect spot, download the image

lowfidstep5.gif
lowfidstep4.gif
Low fidelity
Testing One

HIGH FIDELITY

After testing low fidelity sketches, I implemented the study guide and created the following high fidelity wireframes for desktop and responsive web mobile versions. While designing these screens, I used the takeaways from the first usability testing.

VIEW IN THE ROOM

Findings from Testing
 

‘Choose a place on the wall’ page can be removed.

After some time, the popup page should close on its own at the ‘view in my room’ process is over with this screen.

Add back button on the popups at ‘view my room’ screens

Add ‘Add to cart’ option at pop page 'view in my room.’

UPLOAD IMAGE

Upload an image of your room to view artwork on the wall of your room

CONFIRM UPLOAD

Users can change the image in case they made a mistake or want to try different room

SELECT PLACE

Find an area to view the artwork by clicking on the wall.

STEP1 copy.jpg
STEP2.jpg
STEP3.jpg

FIND THE PERFECT SPOT 

Move image at the center to explore how it looks at this spot

STEP4LEFT.jpg

FIND THE PERFECT SPOT 

Move image at center to explore how it looks at this spot

STEP4MID.jpg

FIND THE PERFECT SPOT 

Move image at right to explore how it looks at this spot

STEP4RIGHT.jpg

DOWNLOAD IMAGE

After deciding the right place to display artwork, download the picture for future reference.

DOWNLOAD IMAGE

After deciding the right place to display artwork, download the picture for future reference.

DOWNLOAD IMAGE

After deciding the right place to display artwork, download the picture for future reference.

STEP5RIGHT.jpg
STEP5MID.jpg
STEP5LEFT.jpg

HOME PAGE

Findings from Testing

 

Add more info about each artwork and tribe more visually. 

Make a consistent style menu on the top nav.

DESKTOP

Clear CTA's on the Hero image. Introduction of tribes and their artwork. Top nav menu and bottom footer. Images from the artwork

landing.png

MOBILE

Menu, Description of artwork, CTA,  and footer menu

GALLERY PAGE

Findings from Testing

 

When clicked on a tribe, it takes the user to the artworks painted by that tribe. Paintings are displayed in a grid style, and users can see the size and the name of the artist under the artwork.

DESKTOP

Extensive filter menu, users can go back on clicking the top nav menu or search the artwork.

gallery.png

MOBILE

Extensive filter menu, images are displayed in a grid format​​.

ARTWORK DESCRIPTION PAGE

Findings from Testing

 

Shipping cost and delivery text is confusing

‘View in room’ option should be more highlighted

Add certificate and artist signature

Add a back button on the description page

DESKTOP

Description of artwork, art work can be seen in many ways. View in your room will take user to see the work on thier wall.​ Shipping, delivery, return, and gaurentee policy is written here.

MOBILE

Option to see an image in various setting like slide show and all the information as on desktop version.

description.png

CHECKOUT PAGE

Findings from Testing

Add tax to the total price.

Ask for zip code or country and inform the user of the shipping cost on the description page.

Add terms and conditions and return policy on the checkout page.

DESKTOP

In the cart, the user can see price, details, shipping options and can proceed to the payment form here.

cart.png

MOBILE

The cart to proceed to payment before checking out the items.

DESKTOP

In the second step of the checkout process, the user can add an address and make an account. 

address.png

MOBILE

Responsive version for the second step of the checkout process

DESKTOP

The third step of checkout for adding payment information. USer can recheck all the previously added information like price, address, and add any additional details. They are supposed to accept terms and conditions by placing the order.

MOBILE

Payment Page at the checkout process

payment.png

DESKTOP

Once an order is placed, the user will be directed to a confirmation page with the order number and details. 

MOBILE

Order confirmation page

confirm.png
High Fidelity

TESTING

I prototyped the above screens and tested them with five users.

Usability testing one

 

I conducted usability testing to validate the design solutions by creating specific tasks using our mid-fidelity prototype. The testing aims to observe the behavior of candidates in a moderated testing environment while completing the tasks.

PARTICIPANTS​

5

AGE GROUP​

18-55 years

LIKES E-SHOPPING​

5

OWNS ROOM OR HOME​

5

TOTAL TIME​

30 mins

FINDINGS

Overall Satisfaction

3.5/5

Completion of task

4/5

Pleasing UI
 

5/5

Ease to use
 

4/5

Relevent content

4/5

KEY TAKEAWAYS

First impression

Having the right filter menus and a top search bar can save time and frustration of people. 

Terminology/ UI elements/ Icons

Text is consistent with other websites, and icons were easy to recognize. CTA buttons were easy to find and captured the user's attention. Filter options were relevant to list items and helpful. 

Checkout process

Users found it very intuitive, easy to follow, and in a standard format. They liked that there was no requirement to sign up for checkout. 

What do you like/ dislike?

Explore artwork task

Users liked the way artwork can be seen in different forms. They suggested adding a zoom function for better viewing of the work. 

View painting in your room task

Most of the users finished the task smoothly. Some were a little confused and hesitated on some screens. The pattern of interaction was analyzed after the testing by rewatching the recording.

Overall

​Users liked the ease of hassle-free navigation. Most users did not scroll down the homepage to see more information about tribal arts even though they would like to know more about tribes and their techniques.  CTA buttons in popup windows for the ‘view in the room’ page should be consistent

TESTING ROUND 2

I prototyped the above screens and tested them with 5 users.

 

I conducted a second round of testing to improve the overall usability and flow of the website. Users were asked to explore the website how they do it in day-to-day shopping and buy the artwork. The aim is to find out what further improvements can enhance the user experience.

FINDINGS

Overall Satisfaction

4/5

Completion of task

5/5

Pleasing UI
 

5/5

Ease to use
 

5/5

Relevant content

4/5

KEY TAKEAWAYS

Summary


All the users managed to complete all the tasks swiftly. Some were confused at the home page when scrolling down the page. They were not sure what the graphics and text meant. At the Madhubani art gallery, some users were not sure what to expect from this tribe artwork. Delivery and shipping methods were confusing to understand.


They wanted to learn more about the artist and browse some more work by the artist. The checkout process was smooth for all the users. They felt it was intuitive and standard like all e-commerce websites. The only thing they did not notice was that they were accepting the terms and conditions. Also, some participants had problems going back and forth at the checkout process.

NEXT STEPS

I iterated the current version by applying the key takeaways from the usability testing.

Iterated High fidelity Wireframes

 

I applied key takeaways from the usability testing two and amended the current pages into the below screens.

LANDING PAGE

I redesigned the landing page to have a better visual way to display tribals and their art techniques. I changed the top nav, footer, and switched to a single CTA button.

 

FINDINGS FROM TESTING 

Add header before tribal art introduction because some users were confused about the content written there box has an overwhelming background.

Reduce the visibility of the background graphics. 

Remove image carousel Reduce text in the section ‘description of tribes.’

Link tribe description to the artwork.

Make the size of the shopping cart consistent with other icons.

Keep all icons on the top and the search button at the bottom.

Reduce the text to max two words on the CTA button at the hero image.

Reduce further the number of steps to in the ‘View in my room’ process.

Add ‘ADD IN CART’ option on step 5 page. 

compare landing1.gif

ART GALLERY

For the gallery page, I redesigned the filters and changed the layout. 

FINDING FROM THE TESTING

Added the route to the page and a better way to navigate to different pages at the end of the page.

compare gallery.gif

ARTWORK DESCRIPTION

I redesigned the detail page by adding information about the artist and artwork from the artist. I made sure customers read shipping,  certification, and return information before adding an item to the cart.

FINDINGS FROM TESTING

Add artist information so it will be helpful for users to learn about the artist’s biography before buying the artwork.

Add ‘More work from the Artist’ to explore more work from the artist. 

Simplify delivery and shipping methods and options. 

Remove the ‘add cart’ confirmation popup window.

compare description1.gif

OVERALL UPDATED PAGES

FINDINGS FROM TESTING

Overall - add white space
Components in breadcrumbs should be linked to different steps of the process.
Add a checkbox before terms and conditions and a link to a detailed terms and conditions policy page.
Add return policy at the final checkout page.
Add print and back buttons at the checkout process.
Change Italic font to normal on the checkout page to avoid confusion.
Remove the bitcoin option for payment.
The filled text should stand out from not filled text at various text boxes in the form.

compareANIMATION.gif
Testing two

FINAL PROTOTYPE

Mobile Prototype

Below is the prototype of iterated high fidelity wireframe

Desktop Prototype

Final Prototype

CONCLUSION

While testing the prototypes I can see that the users were satisfied to see the painting in many different ways. They love the idea of uploading the picture of their room and moving the artwork around in it. Also, simple shipping and return policies mentioned on the description page motivated them to make purchases. Most of the customers avoided making an account and having it optional worked better for them. I started with simple designs and amended them after both rounds of testing. Applying direct feedback from the users in iteration contributed greatly to designing a successful product. 

Next time when I will be designing a responsive website I would do the mobile web version first because the mobile design is more limited. When we design for a smaller screen we choose only the most important elements into it. It is easier to expand to the desktop version as we already have users' most important elements at the front. It was an amazing experience of discovery and learning while designing ARTDECK.

MORE PROJECTS

bingrportfoliolatest.jpg
portfoliosavr.jpg
learnenglish.jpg
bottom of page