Systems Hub

Systems Hub

A suite of web apps

An internal suite of apps, Systems Hub handles an incredible amount of the heavy lifting at 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.

  • Sketching, wireframes
  • Protoyping, mockups
  • User flows, business logic
  • Information architecture
  • UI/UX design
systems hub splash screen, logos for six web apps

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.

home screen / activity feed - arm

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.

contacts and companies page - arm

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.

create event page - arm

These are the basic options and requirements to log an event in the ARM.

activity feed - aom

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 page - insertion order tab - aom

Reports makes understanding the data a breeze. Users can look into contracts, view historical data, aging reports, and much more.

evaluations page - sem

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.

create landscape page - sem

Team members can create search landscapes for any merchant – a means for collecting data that is very useful when generating reports.

overstock page - cms

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.

contributor page - cms

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.

make payments page - cms

A strategist can log payments directly in the CMS allowing contributors to see payment receipts and check their history.

all designs for cms

These 92 design states were everything we needed for version 1.0 of the CMS web app.

program map status - asm

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.

overstock merchant details page - asm

Users can view and edit all merchant, network, and website information. Updating content here connects and syncs it across all websites and channels.

map programs page - asm sort page for overstock - wpm

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.

assign &ampe; sort - summer savings - asm summer savings settings page - wpm

Settings like meta data and assets for every parent, sub, and seasonal categories are available in the WPM.

summer savings - placements tab - wpm