SAMPLE PORTFOLIO DOCUMENT Mark Peterson (IDEA Software) 

Mark Peterson (IDEA Software)
100% Remote or 100% Onsite (Anywhere in US or Abroad)
E-mail: mark@uxsamples.com
Portfolio Website: www.uxsamples.com
SAMPLE PORTFOLIO DOCUMENT
Portfolio History
Most of the work I have done from the last decade was to usually either fix a prior project that had bad results
from user-testing and feedback, or work on a new and highly-complex application where existing teammembers are already pre-allocated to other projects.
Sometimes I have worked alone as graphics designer, visual designer, interaction designer, content writer,
business analyst, information architect, software developer, user-experience architect in order to design new
user-interfaces for a variety of different platforms due to limited resources and budgets. Other times I get to
work with a full team environment where multiple team members helped produce some of these designs. But
for this document I am revealing what hasn’t been restricted by NDA’s and is what I designed for the most
part on a solo basis.
Portfolio designs in this document.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
Online Media Gaming

This client needed someone to create designs, architect solution and develop a fully-interactive prototype
for the development team to begin work with minimal supervision and reduced functional specs.


Several mobile platforms were designed for : iPad, iPhone, Android and Windows Phone 8.
Note – Unfortunately, the samples being shown have removed the proprietary social media aspects that

made the project very unique.
www.onlinemediagaming.com
Microsoft – Volume Licensing


This project was to build a functional design and prototype for the next iteration of Microsoft new
Volume Licensing Partner Portal. Several concepts were presented based on prior versions with iterative
enhancements.
After the architectural issues of the prior versions were analyzed, the new concepts were presented to not
only solve those issues, but to also make the web-application more consistent with Windows 8 designs
(tiles) and reduce reliance on the common table-grids (columns and rows).


Due to the complexity involved in the processes of creating new sales packages, it was opted to create
different concepts. The one chosen by Microsoft was a more dynamic accordion-styled guided
experience, versus a screen-by-screen linear progressive flow for entering and retrieving data.
See online prototype at http://www.uxsamples.com/Prototypes/Microsoft/SalesPackages.html
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
Sonatype

Sonatype was in need of revamping their existing designs in order to release a commercially-viable
product for consumers that used their world-renowned java repository.

Different concepts were designed along with interactive prototypes that could be built by the software
team who were having difficulty designing a user-interface they thought the general public would like to

use.
Mobile concepts were designed to enhance the user-experience.

See online prototype at http://www.uxsamples.com/Prototypes/Sonatype/AppCheck.html
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
US Department of Defense & Labor (Cool.Navy.Mil / Cool.Army.Mil)


This project was to renovate the existing site which had continually updated content, but the overall
design was being overlooked, making the user-experience a frustrating and very confusing endeavor for
users to understand.
I was brought into not only give it a more modern look, but also to perform due diligence in order to go
reorganize the content, taxonomy, hierarchal information and create user-flows and guided experiences
that would assist military personnel as to how to properly obtain certifications for both military and

civilian job roles.
See online prototype at http://www.uxsamples.com/prototypes/USNavy/home.html
[Approved Revision]
Mark Peterson, UI Designer / UX Architect
[Original]
www.uxsamples.com
mark@uxsamples.com
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
Dell Appassure

Created new concepts of a new WPF, web-application concepts for Cloud-based, Disaster Recovery
application that was previously frustrating users and turn it into an intuitive, easy-to-use interface for

mass-market consumer release.
Diagram process flows and user-interface flows and interactions before prototyping new design concepts.

Company was eventually sold to Dell after new interface concepts were designed.
[Approved Revision]
[Original AppAssure - Replay]
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
Expedia.com

Brought in as Lead Information Architect / Interaction Designer to create a new flight search engine for
Expedia.com 4 million plus users. It had never been updated since 1997.

These screenshots are final wireframe/interactive prototype concepts for Expedia.com to improve the
user-experience and create an improved workflow for selecting new flights online.

Online prototype at www.uxsamples.com/Prototypes/Expedia/Expedia.html
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
SugarHouse & Riverwinds Casinos & Online Media Gaming Phone

This is a digital signage (walk-up kiosk) project created with 3D modeling software and integrated into
XAML and FLASH for a casino gaming website and kiosk application. 3D visuals were chosen to create new
visually appealing waypoint and facilities finding capabilities for one of two new casinos in the East Coast.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
Hewlett-Packard, Super Data Center Operations - Special Project


The following geospatial Video Wall Display (Digital Signage) using a 3D GIS user-interface.
It was designed and architected for Hewlett-Packard’s new Super Command Data Center to encapsulate

the user-experience by incorporating multiple applications into a singular user-interface.
In this example an alert from HP Openview™ is displayed in Geospatial I nformation System (Bing Maps)
and a drill down, multi-touch zoom/pan capability is integrated to locate the location of the incident report
to get full information regarding location, technical specifications and accompanying help desk ticket. Also
included is a Network Intelligence Monitoring UI for real-time business intelligence updates from HP
Openview™ API.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
VISA / US BANK (SYNCADA)
The following diagram blow is a low fidelity RIA Wireframe and interactive prototype created for a Section 508 compliance
with VISA and USBANK in a RIA supply-chain financing user-interface.
This screenshots (see below) are of the high-fidelity version of the functional, interactive prototype (Visual Simulation) of
the proposed RIA User-Interfaces to be Section 508 compliant. This interactive prototype was created with Axure software
tool to quickly demonstrate both the proposed visual enhancements to the data grid and train employees a bout Section
508 architectural components consisting of keyboard shortcuts, skip navigation and breadcrumb navigation to increase
accessibility and testing for text-based browsers with also maintaining a visually appeasing style for new users.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
This wireframe below is one of a series of MS-Visio information architecture frameworks (with side and bottom
annotations “as per client request”) to showcase a newly proposed RIA user-interface in WPF/Silverlight for an
existing administrative application for customer service representatives to quickly ascertain optimum information
in the least amount of time.
The diagram below is a wireframe for a proposed RIA application based on a 3d model for the decision engine
process to mitigate risk for consumer loans. The previous application was a standard linear (top-down) data grid
that was unwieldy and prone to increase the workload on analysts. A RIA (3d-visual) version was requested to
allow analysts to easily create new rules and visually track the results of each decision heuristic.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
The diagram below is the result of the research and challenges in proposing a new 3d user-interface to replace
an existing proprietary decision engine application. The challenge of visual scalability became apparent only
when more elements were added to the interface. Zoom and pan capability was added to assist usability.
This is a functional RIA User-Interface prototype I created in WPF/XAML used to display the PAN/ZOOM 3d
capabilities of Raster Graphics within a web-browser. It was used for research purposes to evaluate if employees
would be able to edit/review/test their own rules more quickly than with the existing application. Right-click
context menus were used to allow end-users to view/modify their rules without the need for additional side
menus or extra applications/tools.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
The diagram below was created to document the complex system interactions of an entire decision engine
decisioning process. Color connectors were used to highlight manual operations in the process. Annotations
are numbered and addressed at the bottom of the document.
The diagram below was created in MS-Visio to replace a huge 1000+ row MS-Excel spreadsheet for a competitive
matrix that was to be used in a client presentation. The spreadsheet had become so unwieldy it was immediately
apparent to senior management that another alternative and aesthetically appealing information design would
have to be created for presentation purposes to help the account team and client stakeholders determine future
updates to their website, based on what their competitors were already doing with their own websites.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
These screenshots showcase samples of user-interface prototypes, wireframes and proposed changes to the
existing navigational schemas to correct the current architecture and enhance the user-experience of end-users
visiting the newly proposed MSNMoney.com portal.
Network Topology / Architectural Cross-Domain Logical Model Diagrams
Network Topology / Information Architectural Logical Model representing KPI, GPI and Service Level Agreements (Color
coded) of Mission Critical e-Commerce Architecture for Clickable Dashboard. The diagram was so well accepted by the
entire IT department, that it was prototyped to incorporate IBM Tivoli™ API and Microsoft Operations Management consoles
for Real-time Monitoring of Web Servers, Application Servers and Database Servers) through a web-based User-Interface.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com
Diagrams for Middleware Components, Tutorials and Relational Process Flows.
These information architecture diagrams were created to reduce the learning time needed for consultants,
developers, network and infrastructure architects needed to quickly assimilate complex system, human and/or
data interaction points and process flows for very complex projects.
Mark Peterson, UI Designer / UX Architect
www.uxsamples.com
mark@uxsamples.com