The Goal
I was tasked with updating the promotions management page inside the app using feedback from end users, agency accounts, account managers and shareholders. After understanding the pain points and which data points were useful I came up with a new way to present the data to the user.
With a lot of information to display I wanted to try breaking the page up into sections. The left side would be the details about the promotions. It would include the status, thumbnail, promotion name and details about the type of promotion (mobile vs desktop, center vs bar, etc). To help pack more information into a small space I decided to use icons when possible. Another nice feature of this left hand side is the ability to quickly change the name of the promotion. It is quite common to duplicate promotions to allow for A/B testing or different rule sets so allowing them to quickly duplicate and rename would be a very useful feature.
The Details
The first area I focused on was the details for each individual promotion. On initial drafts I had 2 versions of this page. One was a card view that was a more visual representation by having the thumbnails large and easier to see and then there was the view that was more of a table. The decision was made to go with the table view so I pressed on with that. In order to keep it compact, easy to read and somewhat responsive I decided to make the status a colored circle with a tooltip showing the status and added an info icon that gives more details that are useful at times but don’t need to be front and center. It became real clear that the other details that needed to be displayed at all times were best displayed as icons. I then added a hover effect to the thumbnails so you could view them larger in case the name weren’t clear.
Analytics Overview
While there is a large amount of analytic data gathered for each promotion it is not all necessary at a quick glance. We wanted to include the main points into this view so a user could quickly get some information to see how their promotion was doing. I know that some of the data can be tricky for people to understand so I wanted to also include a callout on each heading with a longer description of what each data point meant. I then added sorting to help make the whole page more dynamic and allow the user to sort by these data points.
The Action section
The right hand side became the action section of the layout. With a quick toggle to allow a user to turn a promotion on or off and a dropdown menu with 2 sections to allow for better organization.
Folders & Tags
A great feature that was added right after the dashboard was completed was the AB Testing. It was written to allow up to 5 promotions and a control so the challenge became how to differentiate the data if that many were chosen. I decided to pull in the same color setup I used in the charts and graphs that had a lot of data points to help further continuity between all aspects of the project.
Folder Edits
This was a fun section to work on being both the designer and the developer. The task was to allow for renaming or deleting the folder and then managing which promotions should be inside that folder. After a few iterations I decided to have two boxes: promotions in the selected folder and all other promotions. The user can add promotions to the folder and they are highlighted in green or remove them and they are highlighted in red. Once the save button is clicked the colors go back to normal and reflect any moves that were made. It turned out to be a clean, elegant and functional solution.
Edit Section
Some of the features that we didn’t want to lose but were still important got moved to the Edit section. Multi-select, priority dropdown, additional sorting options and the ability to archive promotions were all moved here. I replaced the thumbnail in this view with the priority dropdown because it needed a natural place to live and the thumbnail isn’t all that necessary in this step. This helped to keep the overall flow of the page natural so there was no drastic change when the edit button is clicked.
