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


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.


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


I then catogarized the data.


I then created the user persona from the most common answers.


User Persona

From all the data collected I created the user persona.


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

• 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

Low-fi Wireframes


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 

• 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 used simple but modern font.


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.

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.




Next Steps

Next Project
View Project