Design Work

John Wiercioch Abstract Artist

UI Designer – UX Research
Overview: John Wiercioch is a local artist based in Roanoke Virginia. I was contacted by him to help redesign his website so that it is more friendly and more aesthetic to his work.
Responsibilities: User Research, UI, Wireframing, Prototyping, Video editing.
Tools: Figma, Premiere Pro
Step 1: What is Abstract Art?
Abstract art is one of the most challenging art forms, encompassing geometric, surreal, and biomorphic expressions. The creation of these works requires a focus on compositional values, color, and texture, as well as the incorporation of emotional and physical values, from love to aggression and jazz to classical music. While a good composition typically has a structural foundation, this is not always a prerequisite. As a result, the people who purchase abstract art come from a diverse group. Some are art connoisseurs, while others may not define what they are buying but appreciate the work for its personal impact and inclusiveness in a specific environment.
Step 2: Heuristic Evaluation img
Step 3: Competitor Analysis
Direct Competitors: Direct competitors usually show recent work within the homepage. Most of them use white backgrounds to present their work. They are very similar and not very unique. img
Indirect Competitors: indirect competitors use different colors, layouts, and other interactions, which is moreuser-friendly and interactive. The company sells more than just art and has adifferent target audience.
Affinity Map

To create our user persona we are going to collect information from previous buyers to create a user persona. (25 Patron)

1. Job title
2. Department
3. Gender
4. Seniority (VP, Manager, etc)
6. Revenue
8. City

img I then catogarized the data. img

To create our user persona we are going to collect information from previous buyers to create a user persona. (25 Patron)

I then created the user persona from the most common answers.
User Persona
From all the data collected I created the user persona. img
I then created the user persona from the most common answers.

Problem Statement

Users spend a lot of time scrolling in order to get the rightsizes, and that it is difficult to visualize the pieces on the website. I realized that the user experience is not relevant. How might we improve the user interface so that users can visualize how art pieces look and improve their experience?

Goals and Solutions

  • Goals:
    • Tell a story through the website
    • Share the goal of the paintings
    • Attract buyers
  • Potential Solutions:
    • Add logo
    • Adding video, Video of John Painting, 3D Video
    • Adding Interactions
    • Adding pictures of the paintings on a wall to visualize the size
    • Create sections for sizes and art types
    • Adding numbers (1 to 200) of the pieces
    • Adding a scroll indicator
    • Adding a dot navigation style
    •Adding Sections for sizes and type of art
    • Add call to action to buy/lease from the gallery when you click one painting
    • Adding a solid dark background when you click on one picture (fullscreen)
    • Giving the option to change the color background
    • Music option
Site Map
I then created the user persona from the most common answers.
Low-fi Wireframes img

User Testing

Scenario: You are looking for a new piece of art for your living room. You are passionate by art and want to support local artist so you check out John’s website to look at his gallery and purchase one of his art piece. You are looking for a big screen piece and you want to see how the painting would look like in a living room.
  • • Task 1: Visit30+” painting gallery and check out the first painting.
    • Task 2:Visit30-“ painting gallery
    • Task 3: Visit12x12” painting gallery
    • Task 4: Purchase1 30+” painting
    • Task 5: Go back to the homepage
  • Feedbacks:
    • Task 1, 2, 3 and 5 was completed successfully.
    • Task 4 was confusing, user didn’t know where to go to buy the painting.
    • Users didn’t read and was looking for “purchase” button
UI Style Guide
I then created the user persona from the most common answers.

Typography

I used simple but modern font. img
Hi-fi Wireframe: Painting Galery
I used a dark background to increase the contrast and be able to have a full experience with the paintings.
I then created the user persona from the most common answers.
Test it Yourself!
You can test the prototype yourself via this link.
Before and After
Painting Gallery ‍While using the same painting pictures, you can see that the dark background makes the color more vibrant.
Homepage
Next Steps
I then created the user persona from the most common answers.
If you enjoy my work, my process thinking and want to know more about my story I will be happy to share
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
Click outside to hide the comparison bar
Compare