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.
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.
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.
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
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
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
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
To keep track of every picture, each of them was assigned a status
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
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.
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.
Votes can only have two status, visible or hidden. The team can manually withhold them in case of suspected fraud
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"
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.
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