LocBox Campaign Manager (2015)
LocBox's core product is an email campaign tool for small businesses who want to offer targeted discounts. Over time several more campaign types have been added, including Google Plus Review campaigns, date collectors, and Facebook Fan campaigns. The campaign manager is the main portal into creating, editing, and managing each LocBox campaign. When I arrived at LocBox, the campaign manager was in a grid view with often hidden (or barely visible) primary action buttons, unclear icon buttons, and was cluttered with important, but hard to parse, information.
GOAL
In our redesign, the priority was to make the campaign manager into a tool that acts not only as a portal to more helpful parts of the app, but as a tool for our customers to get a quick understanding of their campaign performance and status. To do this, we need to make campaigns easier to find & improve clarity of information presented, including campaign details and the actions available to the user and give our customers a tool to compare their campaigns and skim results.
MY ROLE
Ideation & Prototyping, User Testing, Visual Design, UI, Interaction Design
THE ORIGINAL
The original campaign manager has a grid view, which made it hard to directly compare campaign information like type, name, metrics and date. Within each tile, the typography is so similar it's hard to tell what information is most critical, or even differentiate between different types of information. Customers found our icon action buttons confusing, especially since (as you may be able to tell) the default for action button for each campaign actually appeared in the top right corner of the image and was often invisible.
DESIGN PROCESS
Brainstorming & Ideation
To begin, I gathered feedback from our novice and power users about the original design & created low fidelity prototypes to explore different structures and information architecture in new design.
Wireframing & Feedback, Round 1
After creating wireframes based on these sessions, I gathered feedback from our teams based on their close relationships with our customer base and their own use of the product.
Wireframing & Feedback, Round 2
After a few iterations, I created a full set of hi-fidelity wireframes to review with our engineering team and product manager to ensure technical feasibility.
Visual UI & Interaction Design
After testing and feedback, I began working on visual designs & interaction details. I explored alternate layout options and refined the visual design. We determined that a table view was easiest to scan & use to compare campaigns.
Implementation & QA
While I was working on the design's finishing touches and after they were done, I worked with our front-end engineers to QA the campaign manager.
Final Design
The new design serves not only as a portal to campaign actions, but also as a quick overview & comparison of campaigns by category or status. To make it easier to find campaigns, we also added search, sorting, and filtering.
To allow our users to quickly check in on their campaigns we made all key information available & presented in meaningful chunks upfront, without requiring them to dive into detailed reports every visit. In addition to the overall campaign performance, the delivery channels (previously not included in the manager) include metrics on hover for quick reference. Delivery channel results upfront allow our customers and success team to quickly compare metrics to overall results, from different channels, and between similar campaigns.
For each status, the action dropdown shows the most common action taken and formerly meaningless icon buttons are replaced with clear text buttons. When applicable, actions appear inline to maintain context and avoid disruption to users.
Reflections
This was one of the first major projects I worked on at LocBox and definitely the project where I think we reached a great level of cohesion as a team. While in previous projects I had be reluctant to “bother” the engineers to often, I learned that they were all actually really interested in the design process, so I included them earlier in brainstorming and critique. Giving the engineers a forum to discuss design gave them confidence and permission to engage with me and my work (to the point that backend engineers were talking to me about colors, which is pretty amazing). After this project, we carried forward a structure, both formally and informally, where we would do a check for major projects especially so that I could check technical feasibility and check input from my team, which has been invaluable.