Mockups and Specifications
From July – December 2009, I was contracted by Waterfront Media to serve as the Senior Product Manager for the complete overhaul and re-design of their food and fitness offering for EverydayHealth.com. Below is an excerpt from the 120-page master specification. Pixel-perfect design mockups (ready for front-development to code from) comprise the left 2/3 of the page; detailed functional specifications comprise the right 1/3 of the page. Scott Springer was the UX Lead and Art Director on this project, responsible for creating and enforcing all existing and newly developed design standards. Printing was always done on 11×17 paper in order to ensure legibility and ease of use by all members of the team (stakeholders, front-end developers, back-end developers, QA, sales, etc). All mockups and specifications were created using OmniGraffle.
Mockups and Specifications Example (PDF)
System Flow Diagrams
System flow diagrams are based for the most part on UML 2.0 Activity Diagram notation. However, I’ve extended the notation in order to make the diagrams more reader-friendly, as they are intended to serve a wide audience (users, developers, designers, QA). System flow diagrams serve as detailed logical flow charts for all aspects of the system. They can be thought of as use cases that are diagram-based rather than text-based, and are visual representations of actual coding logic. These diagrams are driven by the requirements provided by the client (both explicit and implicit). These system flow diagrams were created in October 2007 using Microsoft Visio, but can also be created in Ilustrator, InDesign, or OmniGraffle.
System Flow Diagrams Example (PDF)
Process Re-Engineering
As an organization grows, certain process changes are absolutely crucial in ensuring that the people, data, and systems can keep up with the demands of the company. The example below shows how I helped a growing online publishing firm make best use of Salesforce, DART Sales Manager (DSM), and DART for Publishers (DFP) to help support their ad-based business model. DoubleClick’s DSM integration module is an excellent choice for companies with a growing sales force who need to use ad-serving technology. The DSM module is available on Salesforce AppExchange. The Salesforce/DSM/DFP implementation, integration, and migration was completed in January 2009. This diagram was created in September 2008 using Microsoft Visio, and sent to a large-format printer.
Process Re-Engineering Example (PDF)
Wireframes
Wireframes are black-and-white depictions of the user interface, not to be confused with mockups (stylized representations of the final look-and-feel) or screenshots (actual snapshots of the working application). The purpose of wireframes is to depict all UI navigation and data elements and their logical placement, along with state changes (initial state, submit state, error state, etc.). These wireframes were created in July 2008 using Adobe Illustrator CS3. Other applications used to create wireframes include OmniGraffle (Mac), Axure (Windows), and Visio (Windows).
Database Modeling
This is an example of an entity relationship diagram for a new mid-size BPM application. The BPM software comes with its own proprietary database; however, an additional database was needed to store certain application data, separate from BPM data. This ERD was created in October 2007 using Microsoft Visio.
Entity Relationship Diagram Example (PDF)
Data Dictionary
The data dictionary is a comprehensive inventory of all data elements used by the application. The Data Dictionary includes an alphabetical listing of all data elements and their respective properties (editable, required, data type, data length, data format, UI label, UI control type, default value, sample value, database table, database field, conditions, etc.).