TOP

Paintru Web Redesign

Desktop and Mobile Web Design
Role: UX Designer
Client: Paintru
Tools: Figma
Deliverable: Website

Background

Understanding the Problem

The client stated that their bounce rate was significantly higher than they would like. Using Google Analytics, they could see that almost 60% of users that visited their How It Works Page never made it to the final checkout page.

Paintru's Existing Website
Paintru's Existing Website

Defining the Goal

Redesign the How it Works Page to decrease bounce rate by guiding the user to the checkout page.

Competitive Analysis

I began my research by searching for brands in a similar product space, custom photo to personalized painting online shops. I looked at their Landing and How It Works Page to see what they did well compared to my client and what could be improved upon.

Brand 1Brand 2Brand 3

Clear CTA button that contrasts well with Text (but not background)
User is overwhelmed with information
Clear (but not concise) infographic of how the process starts and ends, but no CTA

Key Takeaways

  • Users should have a prominent CTA that heavily contrasts with other elements on the page
  • Information displayed should be clear and concise, allowing the user to quickly pick up information they need without creating too much of a mental burden
  • Infographics should convey information quickly, with a CTA button to capture forward momentum

Design

Wireframing

With a better understanding of how to better guide the user to the checkout page without overwhelming them or losing their interest I began hand sketching rough wireframes based off of Paintru's existing page to see how findings from my research could be applied.

Landing Page Wireframe Options 1 and 2

I then went into Figma and began building out wireframes to present to the client as possible options to move forward with. Key items to tackle were making the CTA button more prominent, efficiently displaying the "how it works" process, and presenting a few examples of what their painting may look like.

Landing Page Mockup 1

Upon landing on the How It Works Page, users should be met with a beautiful example of a picture that could be turned into a painting. Within that, clear and concise verbiage that, should they not feel the need to learn more, can direct them to the checkout portion of the website.

The CTA button is prominently displayed, and contrasts with other elements in the page so that users know, definitively, where they should be guided.

Landing Page Mockup 2

Due to the client's need for a short turn around time, I presented them with two primary options in an effort to limit scope, with the main difference being how the information was presented as the user scrolled down the page.

Potential Layout Comparison

Another focal point was how to display the timeline efficiently, providing enough information without overwhelming the user. Icons had to correspond with the textual information, but with enough visual contrast to keep the user engaged and not overwhelmed.

Timeline Ideation

2nd Iteration

After sitting down with the client, I had a better idea of their vision for their page given their feedback to my initial mockup. Using my research as the guiding force, I started work on the second iteration.

The client suggested a slider image/painting that the user could interact with, and see in real time, how a picture would look if converted into a painting. I thought this was a great idea as it would both engage the user and visually explain the process without taking too much real estate on the page.

Mobile Version

The Mobile Version had many similar characteristics as the desktop, however, due to the restricted real estate, creative solutions had to be implemented to display the same amount of information without overwhelming the user.

Final Web Mockup

Final Mobile Mockup