123RF Plus Program

Powering premium content for 2M+ users
and revenue growth for 10K+ contributors.

Client

123RF

Role

Product Designer

Year

2022

Background

The 123RF PLUS Program was created to spotlight high-quality, commercially valuable content by giving selected images greater visibility and earning potential.

As the main designer of the contributor portal, I redesigned the experience to support the program’s launch and drive engagement.

Problem

While the program promised better visibility and potential earnings, many contributors found it confusing and lacked trust in how it worked.

Solution

I designed the contributor experience to guide them from discovery to understanding its value to adoption.

01 Discovery & Strategy

Discovery &
Strategy

Defining the Product

The project began with an initial call to align on business goals, project scope, and contributor needs, ensuring clarity around 123RF’s vision for the PLUS image program.

User Flow

I conducted a quick initial survey with a few of our staff contributors. Based on the insights, I mapped out a basic user flow, which later evolved into an experience map capturing the user's journey and emotional responses at each touchpoint within the portal.

User FLOW

User experience map

Wireframes

I created wireframes to help stakeholders and relevant parties visualize key screens.

Wireframes

02 Design

How It Works

Upon returning to their dashboard, users will see that their content has been opted into the PLUS program via a toast notification.
By clicking on 'Learn More', it will trigger a pop-up modal containing all the benefits of the program to appear.
Users will then have to make a decision by clicking on I don’t want this or Sounds awesome.
I don’t want this = Content will revert to the original license & opt out of PLUS program.
Sounds awesome = Content will remain as is in the PLUS program.

Upon returning to their dashboard, users will see that their content has been opted into the PLUS program via a toast notification.

By clicking on 'Learn More', it will trigger a pop-up modal containing all the benefits of the program to appear.
Users will then have to make a decision by clicking on I don’t want this or Sounds awesome.
I don’t want this = Content will revert to the original license & opt out of PLUS program.
Sounds awesome = Content will remain as is in the PLUS program.

Upon returning to their dashboard, users will see that their content has been opted into the PLUS program via a toast notification.

By clicking on 'Learn More', it will trigger a pop-up modal containing all the benefits of the program to appear.
Users will then have to make a decision by clicking on I don’t want this or Sounds awesome.
I don’t want this = Content will revert to the original license & opt out of PLUS program.
Sounds awesome = Content will remain as is in the PLUS program.

Upon returning to their dashboard, users will see that their content has been opted into the PLUS program via a toast notification.

By clicking on 'Learn More', it will trigger a pop-up modal containing all the benefits of the program to appear.
Users will then have to make a decision by clicking on I don’t want this or Sounds awesome.
I don’t want this = Content will revert to the original license & opt out of PLUS program.
Sounds awesome = Content will remain as is in the PLUS program.

Toast notification - pop up modal

In case users change their mind, they may opt back into the program by clicking on the License Type checkbox.
PLUS checkbox selected > Image opted into PLUS program.

PLUS tags can also be found on the thumbnails to help users identify PLUS images from the normal images.
Image opted into PLUS program > PLUS tag appears.

license type - thumbnail

03 User Testing

Qualitative Testing

I did a qualitative user test online to see how users respond to the new prototype in real time. To summarize:

Most users appreciated having a modal that explained the
benefits of the program to them.
They knew how to opt in & out of the program.
Some users were confused with the thumbnail, particularly with the selected state.

I did a qualitative user test online to see how users respond to the new prototype in real time. To summarize:

Most users appreciated having a modal that explained the
benefits of the program to them.
They knew how to opt in & out of the program.
Some users were confused with the thumbnail, particularly with the selected state.

I did a qualitative user test online to see how users respond to the new prototype in real time. To summarize:

Most users appreciated having a modal that explained the
benefits of the program to them.
They knew how to opt in & out of the program.
Some users were confused with the thumbnail, particularly with the selected state.

I did a qualitative user test online to see how users respond to the new prototype in real time. To summarise:

Most users appreciated having a modal that explained the
benefits of the program to them.
They knew how to opt in & out of the program.
Some users were confused with the thumbnail, particularly with the selected state.

User test results

User Test Report

The findings were noted down in sheets. I then crafted UT report decks & present action plans to stakeholders. Once the action plans were approved, we spent the next few days amending the screens.

ut report

04 Iteration

Information Modal

We ditched the toast notification because it might be overlooked. When users return to their dashboard, they will see a full page instead. They have to choose to either opt in or opt out of the program on the spot.

Thumbnails

Instead of using a yellow outline, I implemented a checkbox with an overlay to visually indicate the selected state, providing clearer feedback to users.

PLUS tag moved to the right for it to be consistent with the other thumbnails tags.

Opting Back

I added an additional tooltip which leads to FAQ page when users hover to provide extra info on the program.

I switched the Checkbox to a Radio Button to align with stakeholder requirements, ensuring users could only select one license type and simplifying the decision-making process.

Additional Screens

I created user stories and designed flows to address additional scenarios contributors might encounter post-launch, ensuring a seamless experience across all touchpoints. Example user stories:

As a contributor, I will see PLUS tags on all eligible images. Existing FREE images will remain unchanged.
As a contributor, I will be able to distinguish between Free, Premium, and PLUS images using tags or the side drawer.
As a contributor, I will see a 'You will see it update in one day' notification when I change an image’s license type.

I created user stories and designed flows to address additional scenarios contributors might encounter post-launch, ensuring a seamless experience across all touchpoints.

Example user stories:

As a contributor, I will see PLUS tags on all eligible images. Existing FREE images will remain unchanged.
As a contributor, I will be able to distinguish between Free, Premium, and PLUS images using tags or the side drawer.
As a contributor, I will see a “You will see it update in one day” notification when I change an image’s license type.

I created user stories and designed flows to address additional scenarios contributors might encounter post-launch, ensuring a seamless experience across all touchpoints. Example user stories:

As a contributor, I will see PLUS tags on all eligible images. Existing FREE images will remain unchanged.
As a contributor, I will be able to distinguish between Free, Premium, and PLUS images using tags or the side drawer.
As a contributor, I will see a 'You will see it update in one day' notification when I change an image’s license type.

the rest of the screens

05 Handover

Features Wiki

I created a detailed Features Wiki to document the PLUS Program’s design, user flows, and edge cases. This served as a central reference for product, development, QA, and support teams, improving communication and ensuring consistency throughout the project and future updates.

I created a Features Wiki deck to make sure everyone is aligned and a smooth handover process.  

Since the launch of PLUS images, I’ve continued working closely with the product owner and developers to troubleshoot issues and design additional flows as new edge cases and feature needs emerged.

features wiki

Impact

Since the PLUS launch, I’ve collaborated with the product team to resolve issues and design new user flows. This led to a 40% increase in program adoption. Additionally, 80% of users reported the updated experience was clearer and easier to use, helping to build trust and encouraging more contributors to participate actively.

I created a Features Wiki deck to make sure everyone is aligned and a smooth handover process.  

Since the launch of PLUS images, I’ve continued working closely with the product owner and developers to troubleshoot issues and design additional flows as new edge cases and feature needs emerged.

Select Section

BillPay

Previous Project

BillPay

Next Project

123RF Plus Program