00-intro-tragtrak00-intro-tragtrak

WEB DESIGN • UI • RESPONSIVE

Tagtrack

Tagtrak is a desktop web tool that was created to simplify Omniture tagging implementation on the Garage Team Mazda. Omniture provides web analytics for online businesses, allowing them to track customer sales, demographics, how many site pages a user views before leaving, etc. Before the creation of this tool, project managers and developers had to include all tagging information into multiple, complicated Excel files, which had different formats and allowed room for confusion on assigned Omniture tasks.

The Tagtrak application inserts and modifies tags within a site. This tool generates a JSON file for each page requested that serves this purpose based on the data that will be fed into the application.

 

Client
Garage Team Mazda
Year
2014
Agency
POSSIBLE
Role
Designer
Task
Visual Design, UI, UX
Art Direction
Marko Kelso
René Fatjo

The Problem

Omniture requires three stages to create a tagging property: sections, pages, and actions. Within each section are pages, and within the pages are actions. Project managers must indicate to developers which tags they need for each section.

Site Map

The application has three main components: sections, pages, and actions. Each required different kinds of information; without a section, we can't have pages, and without pages, we can't create actions. In this site map, we can see the main elements and behaviors of the application.

Wireframes

Here are the main wireframes showing the main behaviors of the application.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
10-tool-0210-tool-02

Logo Explorations

Here are a few names and logo explorations made for the tool.

UI Elements

The application has different UI elements, such as icons, buttons, fill forms, selected items, and checkboxes.

Screens

Here is a quick look at the screens of the web tool, showing its main features: breadcrumbs, section pages, and actions.

17-app17-app