top of page

Project Pngtree

3.png

Overview

       Problem: 

Discover and address usability issues Pngtree.com processes without changing its monetization method

  • The challenge is to keep the unreasonable one free download per day limitation which remains to be the biggest usability issue

  • While making the website valuable and easy to use

​

      Solution:

We enhanced other aspects of user experience, so that the likelihood of user subscription will increase. 

  • We transformed the image download workflow to be more sensible and concise

  • We eliminated several usability issues that existed in the membership acquisition workflow

      My Role:

  • Presenter for Playbacks

  • Moderator for Usability Testing

  • Perform Heuristic Evaluations

  • Draft Usability Test Plan and Interview Script

  • Conduct Interviews & Usability Testing

​

Client & Stakeholder:

      Pngtree

Platform:

      Website design

Sector:

      Online Visual Material Asset

01

Heuristic Evaluation

Even though I knew a lot of improvements could be done for pngtree.com at first glance, using the designer's instinct, we still apply the theoretical frameworks of heuristic evaluation to the website. 

Nielson's 10

Critical:

  • None

Serious:

  • Aesthetic and Minimalist Design

    • ​The dialogues should not contain information which is irrelevant or rarely needed

    • The overwhelming presence of the recharge advertisements

    • Repetitive information including the CTA, the menu bar, and the flowing window on the page

  • Error Prevention

    • The one download ​limitation for free users making the choice of download crucial

    • Currently lacking any mechanism to prevent users from making an unwanted download 

  • User Control and Freedom

    • Means of exit​ is missing at numerous subpages and pop-up windows

Moderate:

  • Visibility of System Status

    • The website features unapparent to users, such as the Every Scenarios or Marketing Calendar sections

    • Lacking a history search feature​

  • Consistency and Standards​

    • Membership pages and section pages have various interface designs ​

Low:

  • Flexibility and Efficiency of Use

    • New tabs will open after clicking into different sections

Untitled design (6)_edited.png
Critical Response
Seven Stages of the Action Cycle

Discoverability

  • Clear visual cues and buttons for accessing the materials or functions

Understanding

  • Scattered promotion content

  • The close button is difficult to find on the pop-up window

1. Goal Formation

  • Search for visual materials suitable for their creative design

2. Plan Formation

  • Finding the desired materials

  • Figuring out what they need to download an image

  • Deciding if they will stay on Pngtree

Affordance

  • The homepage demonstrates a high level of affordance

    • allowing users to easily access the detailed downloading page by simply clicking​

    • yet the detailed downloading page prompts login/sign-up for the download button

Signifier

  • The same download icon with different filled colours is misleading

  • The close signifier is misleading as it marks as "I know"

Mapping

  • The categories navigation on the top of the main screen and the search bar provide a logical and predictable connection between users' actions and outcomes

Feedback

  • When executing the download, subtle feedback is missing to let users know the download has been successfully performed/completed

Conceptual model

  • The website displays a popup describing the limit of downloads and image format

3. Action Specification

  • After searching, access the detailed information page

  • downloading the material

4. Action Execution

  • Enter relevant keywords that accurately describe the desired material.

  • Or look for suggestive sections on the home page or in the menu

  • Locating the desired image and download

5. Perception of State

  • While acquiring a subscription, two types of memberships have disparate interface design

  • After download, pop-up window close button is confusingly marked as "I know"

6. Interpretation of State

  • Misleading as no indication of the one-download limitation

7. Evaluation of Outcome

  • The goal remains uncompleted as users are limited to downloading only one free material per day

  • Users may seek alternative websites to achieve their goal

02

Preliminary Changes and Prototype

4 Major changes based on the heuristic evaluation findings:

1. Homepage & membership choices

  • We adopted a new set of colour scheme for the website to create a more consistent and visually appealing interface

  • The new green brand colour adheres to the website logo and name

  • Giving the website an aesthetically pleasing look while maintaining a minimalistic design 

2. Subscription page

  • Personal and enterprise membership options are combined into one page under two tabs

  • ​Rendering a consistent design and giving users effective freedom of control

3. Downloading images

  • Minimize the download option design into a dropdown button to reduce misleading signifiers on the page

  • Giving users a cognitive reminder before initiating a download to prevent mistakes 

4. After download

  • Simplify and redesign the after-download pop-up window

  • Now it shows upgrade options and image license options in a logical order

5. Minimizing CTAs

  • We reduced the excessive presence of Call To Action (CTA) elements

  • Using the new design to direct users' attention to meaningful content (a stand-out button for subscription)

Prototype - Ver. 1

Use full screen to view

03

Usability Tests

Now, it's time to put our prototype to the test! 

It is essential to recruit suitable users to test out if the changes we implemented are meaningful and impactful

But, we need a plan

First, Participants:

The profile of target users: Creators for creative projects

  • Projects include a variety of formats: graphics, posters, or PowerPoint slides...

  •  Regularly download images, vectors and materials from the website

  •  And had experience with other similar websites such as Unsplash, Pexels, or Google Image...

Methodology

  • A Pre-Test Interview Session

  • A Usability Testing Session

    • Task-based, composed of two tasks

    • Using the think-aloud protocol

  • A short Post-Test Interview Session

  • A Post-session Questionnaire

Test Moderator Role

  • Remain passive 

  • Will not interrupt nor offer assistance to the participants

  • Take notes on their progress, completion status, and any issues encountered

  • Remind them to keep thinking aloud if necessary

Finally, our tasks:

04

Decoding the Gathered Data

In the end, we recruited 7 participants and conducted 4 online test sessions and 3 in-person test sessions with them

Test Results:

Test Completion:

  • Task 1: Acquiring a membership that allows you to display your design in public places

    • Success Rate: 87.5%​

      • ​All with hints given​

    • Average Time: 2 min 20s​

  • Task 2: Locating an image for the Nation Puppy Day and download it​

    • Success Rate: 100%​

    • Average Time: 1 min 10s

Affinity Map

I then asked my team to take the words and sentences spoken by the test participants we moderated and converted them into themes, so we can analyze them from a  grouped and organized affinity map.

3 Main Findings

Using the map, we concluded these three main findings that our users displayed and expressed during the tests.

05

Revised Prototype &
Next Steps

Using the gathered user data, we devised 6 major changes that aim to furtherly improve usability and enhance design impactfulness.

  1. Increasing the font size of the navigation bar and image detail page

  2. Added themes to the "Every Scenario“ tab

  3. Relocated the image tabs below the search bar

  4. Remaned the membership plans

  5. Wording altered and annotations added to increase clarity

  6. Added a search function for finding relevant membership benefits

Prototype Demo

1. Downloading an image for a National Puppy Day poster:

  • Tabs enable quick navigation and easy browsing for users to find their desired items

  • The remastered detailed page now uses a clean and minimalistic interface to host essential image spec information

  • The download dropdown button gives users a clear idea of their download format options

  • A confirmation page will appear afterwards, acknowledging users the status of their action

2. Acquiring a membership for a team:

  • The bright orange button that says “Subscribe” increases the visibility of the membership portal

  • Textual explanations are provided with each membership tab to eliminate confusion

  • The search/filter function allows users to locate suitable plans effectively 

  • ​The features of the plans are shown in a list form to allow easy comparison

Our Prototype - Ver. 2

Next Steps:

Test on professionals

  • We intentionally broaden our scope of available participants this time, as everyone can benefit from a well-designed visual material provider website

  • But for the next step, we aim to focus on professionals, such as graphic designers or marketing specialists, who are more skilled in related work and may spend more time on websites such as Pngtree.

Lessons learned

Simple ideas of changes can be powerful 

The search function we introduced for the membership page has been described by the audience as an effective change as "simple and elegant" during our playback. Sometimes finding the right way, even though it seems uncomplicated, can be significant as well.

Intervention is tempting, but patience is key

Many of our users struggled at completing our first tasks. I noticed some moderators were eager to provide help and verbal hints when they see the participants were struggling. This way, it may affect our test results, rendering a false positivity. Yet, I still learnt to consider the context when analyzing the data and took this factors into account when coming up with solutions for our prototype.

Reminding users that we are not testing on their capability is important

As users struggled with one of our tasks, some of them showed frustration as they think they are failing the test. I realized in usability testing, users often think they are the ones being tested. It is vital that we make sure test participants understand we are evaluating the prototype not their performance.

bottom of page