It became clear from the beginning that the product would need three main things:
- A place to see all campaigns
- A place to create a new campaign
- Ability to look at individual campaign details
From there, the next step was to hash out all of the details that needed to be present on each of these sections. #1 and #3 turned out to be fairly straightforward in what needed to be presented on the page.
Evolution of early wireframes for the All Campaigns page. Main design decisions revolved around which campaign details needed to be sortable - i.e. have its own column - or present at all.
Wireframe for All Campaigns page. Version 2 included streamlined table columns that allows users to sort by date, goal, and CTR.
All Campaigns - Final high-fidelity design
⋅Designs: Create a New Campaign⋅
The UX for creating a new campaign turned out to be more complex, due to the information that a user would have to provide in order to create the campaign. Users would have to choose content for the campaign, and decide where on the web and when the campaign would show. As the product manager walked me through all of the necessary campaign details, it became clear that the Create Campaign flow would need to be a wizard with multiple steps.
Early Wireframe: Creating a Campaign
Adding campaign content - Adding URLs that contain errors
Video of multi-select dropdown interaction
User Testing revealed that, while the wizard was fairly simple for folks to understand, there were smaller details within the wizard that were still hairy.
For example, the final step of campaign creation is a page that summarizes the new campaign so that users can check details before the campaign gets started.
- Users did not realize that the wizard header, which shows which step you are completing, was clickable. Changing the visual design of this element made the header look more like a clickable navigational element.
- The edit metadata section, which allows you to edit the campaign name, date range, and other campaign details, quickly became cluttered in the original design. It was hard to immediately discern the campaign title and there wasn't enough room for users to look at widget and section information, and so this was revised in later designs.
Left: The original campaign information section quickly became crowded as we added more editing capabilities. Right: A revised mockup based on user feedback
Create a Campaign: Empty state
Final Version: Creating a Campaign Step 1
Step 2: Selecting multiple sections
Wizard final step: Your Campaign is Ready to Launch
Sagiv Gurevitch - Product Manager
Ela Eldar-Raskin - QA Lead
Tal Magen, Amit Levinsky - Front-end Engineering
Ido David - Algorithms
Mike Mathis - User Researcher
Savitha Pal, Ofer Perach - Color Palette, UX