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.
Redesign the How it Works Page to decrease bounce rate by guiding the user to the checkout page.
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.
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.
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.
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.
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.
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.
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.
I worked with Paintru's copywriter to refine the amount of text to a digestable amount. I wanted to present enough information in the text, but also have some stand alone text underneath should the user want to skim through the steps.
In order to keep the user engaged as they scrolled, I made sure both image placement and sizing varied throughout the page.
Finally, should the user find themselves at the end of the page and want to return to the top, a button to save their finger the arduous work of scrolling back to the top.
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.
This was accomplished through the use of font contrast, color contrast, and bolding a few words to draw them out for users who wanted to skim through the mobile page.
.png)
.png)
.svg){kind=small}
