21:34:03 UTC
Project 01
TMC: Banner Tool
Lead designer
Brief
Create a feature for the ATB Business internal tool allowing non-developer team members to deploy banners to the ATB Business production environment.
PLATFORMS
Web
PROJECT TIMELINE
2 months
OVERVIEW
ATB's internal console for its ATB Business platform utilizes site and mobile banners to notify its user base of upcoming changes and other important information. These banners required developer action in order to implement, making them expensive and annoying to implement. This project was intended to democratize the banner-creation process, allowing product managers the ability to create, schedule, and deploy banners to the live web and mobile sites.
PROCESS — USER FLOW MAPPING
The first question that we asked ourselves was: how can we make this a great experience with the scope that is available to us? Our development resources were slim—one student developer for the entirety of the project (and an additional senior developer to support when necessary)—so we wanted to be careful to avoid scope creep.
PROJECT GOALS
The team determined the following were the primary "functionality pillars" required to make the feature work well.
1
The ability to create banners and post them to the live site immediately.
2
The ability to create and schedule future banners.
3
The ability to edit banners without removing them from the live site.
4
The ability to cancel live and scheduled banners.
5
The ability to view all live, scheduled, and expired or cancelled banners.
6
Allow users to choose which platform the banner appeared on (web/mobile).
OPPORTUNITY
It was determined to be out of scope, but we hoped to eventually expand the functionality of the tool to allow specific feature-related notes to only appear for users who utilized those features (i.e. Wires banners only appearing for users who used the Wires feature).
PROCESS — SKETCHING
Putting together a few rough ideas for how a modal might play out. Typically I would sketch out a few diverse approaches before beginning the ideation phase of design, but technical constraints limited us to a modal approach, so I stuck with that.
DESIGN
First, we began by finalizing the "overview page" for the new feature. This page was key and required the user to be able to create a new banner as well as edit and cancel existing banners. For auditing purposes, we also included a history section for all previously created banners.
I separated the page into three main sections: "Active banner" would present the user with any information on a banner currently live in production. The table would include the following info: Start date, End date, the user that enabled the banner, the banner type (to differentiate between emergency and non-emergency banners), and a space for miscellaneous information.
CALLOUT
Not all banners are created equal. Some banners would need to override others (emergency vs. informational) as ATB Business didn't allow for multiple banners to be placed simultaneously. The tool needed to allow users to distinguish between emergency and non-emergency banners to make necessary judgement calls when choosing to cancel or override live banners.
The "Scheduled banner" section housed all upcoming banners not currently live on the site. These could be scheduled months in advance, helping the product team account for planned feature outages, statutory holidays, and other planned disruptions to service.
The final section was the "Activity log" that included information relating to previous banners. We opted to include:
The status of the banner (e.g. active, cancelled, expired, etc.)
The date that the banner was created
The user that created the banner
The banner's type
A description of the most recent activity related to the banner (e.g. banner was cancelled, banner expired, banner scheduled dates were updated).
DESIGN — MODALS
The modal designs were a heavy lift, and there's a lot to talk about that might make this case study too long. To summarize: I believe the best way to handle complex if-this-then-that designs is by mapping it out as I did in the logic map above. I find it's a very powerful thinking tool to be able to put down on paper how each state prompts different decisions, and vice versa. I'll include some images below to illustrate the various states of the (increasingly unwieldy) modal.
Too long? Probably!
RECAP
REFLECTIONS
The Banner Tool feature was launched after two months of ideation, design, and development work. As of January 2025 (1.5 years after deployment) the Banner Tool had been used to create 150+ banners for ATB Business, saving approximately 40-70 hours of developer time over that period.
Built using Framer
@ YYC