An internal suite of apps, Systems Hub handles an incredible amount of the heavy lifting at Promocodes.com. As lead designer, I was in charge of bringing business logic, information architecture, and visuals to the table in collaboration with the CTO and the developers. This project really broadened my skillset in designing for data-heavy systems.
One of the tenants of this project was creating a design language that spans 6+ websites. Although these web apps are for internal use only, producing a strong and cohesive brand identity for Systems Hub was very important to me. I designed around 50-100 production-ready states, per web app.
Note: staff names, clients, companies, and other figures have been modified to prevent information disclosure.
The ARM, or Advertiser Relationship Manager, is a web app that enables a team to log all correspondance with clients and advertisers in one place. It features daily activity, a tool for lead generation, company pipeline, a powerful contacts finder, and a useful reporting tool, among other things. Once implemented at Promocodes, productivity and record keeping efforts were vastly improved. You can log an event for any merchant within 2 clicks from any page in the app via the global "omni bar" seen at the top.
I designed the contact finder to handle all possible inquiries gracefully. The "filter bar" allows you to add tags from the different inputs above and build your search on a macro or micro level.
These are the basic options and requirements to log an event in the ARM.
The AOM, or Advertiser Offer Manager, is all about finances and contract information. Users can generate proposals, insertion orders, and invoices directly from the app and other team members can track progression.
Reports makes understanding the data a breeze. Users can look into contracts, view historical data, aging reports, and much more.
The SEM, or Search Engine Marketing, handles everything "search" related. It allows the team to read the data in ways that increase efficiency and productivity.
Team members can create search landscapes for any merchant – a means for collecting data that is very useful when generating reports.
The CMS, or Content Management System, was designed for two users: strategists and contributors. This meant there had to be different UI states for everything based on who is logged in. Strategists create and manage assignments and contributors use the app to write content and submit it.
An example of a contributor page. The tab bar shows how many assignments are in each stage of the process, with filtering tools to find certain assignments quickly.
A strategist can log payments directly in the CMS allowing contributors to see payment receipts and check their history.
These 92 design states were everything we needed for version 1.0 of the CMS web app.
The ASM, or Advertiser System Manager, is a migration tool to transfer all merchant programs and data from one system to another. This app required a lot of business logic to make sense of all the technicalities.
Users can view and edit all merchant, network, and website information. Updating content here connects and syncs it across all websites and channels.
The WPM, or Web Publishing Manager, handles all website coupon content and paid placements. Custom coupon sorts, scheduled run dates, and other useful functionality is readily available.
Settings like meta data and assets for every parent, sub, and seasonal categories are available in the WPM.