Backend design

Photography contest management

Role on the project
  • Main UX Designer
Tools
  • Figma
Responsibilities
  • Research
  • Prototyping
  • Usability testing

solution

Having such a small number of end user, and having them on call at a moment's notice proved really beneficial. As we were able to tailor the platform to their needs.

  • We integrated the ability to move the contest to its next phase directly in the backend
  • Managing the pictures uses a system of filters, tags, and buttons
  • Next to each of the pictures would the action buttons, allowing them to quickly handle them
  • Next to each of the pictures would also be selected user information allowing them to make further decision and double check eligibility
  • For each picture, we recorded every votes and its source, allowing them to identify trends and disable suspicious votes
  • Reports would be stored in a separate folder where their status would be mark and the team could decide to act upon them or not

Let's take a look at the frontend

contest step 1

During the first step of the content, users can upload their pictures through a form.

This form collects a certain amount of personals informations. Part of these informations are immediately processed to gauge the participant eligibility (age & geographic region). Some will be displayed in the backend for the operator to use when they review the pictures. And some will be stored for later marketing & user research

During this phase, the marketing team moderates all the pictures, making sure to vet the ones potentially infringing on the contest rules.

contest step 1.5

This step closes the participation.

During this phase, the team selects roughly 100 pictures that will be moved to the vote phase. To speed up this process, they can pre-select pictures during the phase 1 as well.

contest step 2

During this step users are prompted to vote for their favorite pictures

The team's main concern in this phase, was to be able to hide pictures in case they discovered a rule breach that slipped by during the previous steps

A side concern was cheating and faking votes. We addressed it with a few layers of verification. As a last line of defense, every vote for every picture was stored in the backend, and the operator could manually disable a certain vote in case of suspected fraud

contest step 2.5

The votes are closed during this phase

The team needed an extra phase to check again the legality of each pictures before moving on to announcing the winners

contest step 3

During this phase, the 24 most voted pictures are displayed on the website

The team need to contact every winner to give them their prizes and make sure the user enters a formal agreement for the usage of the pictures on future tickets and marketing campaigns

Solving for these needs

folders and sort lists

The team's previous backend was built on Wordpress, which uses a vertical navigation. Being familiar with the concept, we decided to keep this concept.

However, we developed on it by categorizing the folders, phase 1, maintenance, and phase 2. There is no folder for phase 3 as nothing needs to be done. Every folder could be accessible at anytime for reference, and to export the data.

Having a lot of pictures, we proposed to sort the list in the few different way. Two main filters, for date and current status. Reinforced by an alphabetical sorting of each column of personal data. On top of that, to pinpoint a specific photography, participant, or any other data, the operator could search for any keyword

managing
pictures

To keep track of every picture, each of them was assigned a status

  • New: Pictures needed to be manually vetted and approved
  • Accepted: If the picture is displayed on the website
  • Refused: If the picture his not displayed
  • Selected: The picture is displayed, and also moved into a different folder. This allowed the team to pre-select their 100 photography as they were receiving them, speeding up their selection process.

The personal information used to make choices about the users and picture's eligibility was visible on the right

To speed up the selection process, hovering the pictures would display them in a bigger format. Allowing a fast access to the buttons next to it.

For the phase 2 folder, a similar system was put into place. The status were slightly different

  • Visible: The picture is visible and can be voted for
  • Hidden: The picture is hidden and cannot be voted for

We also displayed the number of votes, as it is the main data of this phase. We also introduced a new button to edit the votes, which would show every votes for this picture. This allowed them to export the vote data for each picture individually and look for trends indicating fraud. If a fraud was detected, they could surgically hide specific votes.

confirming actions

To smooth out the picture selection process, I had proposed to keep the last two actions in toasts on the screen so they could be easily undone in case of mistakes. This would have allowed to change the status of any number of pictures without disrupting the flow.

For ease of development, my tech lead pushed to instead have a pop-up after each button click asking for the confirmation of the action.

At the end of the day, the marketing team chose to go with the pop-up as it made them feel safer, despite requiring more clicks, therefore significantly lengthening the picture selection process than the undo option.

moderating votes

Votes can only have two status, visible or hidden. The team can manually withhold them in case of suspected fraud

moderating reports

Report are unique in the sense that they show both the status of the reported picture and the status of the report itself. By default, all reports have the status "to be treated". Then the operator can either ignore it, or act on it which either option will set it to "treated". They can of course come back to it and revert it status to "to be treated"

support actions

Beside the reports, the maintenance category allows the user to directly handle some elements of the front-end.

Parallel to the contest, they were running a promotional campaign for their product. The ads were directly included in the front-end, so they could modify their content, textual and visual, at moment's notice. In case they needed to, they could also disable and enable them freely.

moving to the next step

In order to give the team full control over the contest's timeframe, moving it to the next step was done manually from the backend.

Naturally, the front-end would change with each new step, so we had to pre-create the front-end for each of the steps, swapping texts and components as needed.

This obviously being an important action with very visible consequences for the user, a pop-up was used to confirm that it was the intended action. To make sure everybody on their team also had the same understanding of the consequence, the exact changes were listed on the pop-up

With expertise in user experience design, web design, and design systems, I bring a unique blend of marketing insight and technical collaboration to every project.

My technical experience, allows me to closely work with developers to ensure seamless planning, execution, and integration of design requirements

LET’S WORK TOGETHER
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.