SELECTED WORK EXAMPLES

Brett MarlinStrategy | UX | Creative

brett@brettmarlin.com (615) 335-4679

UPDATED 01 / 26 / 2015

Brett Marlin Roles played: Solutions delivered: Brands served:

Independent ConsultantStrategy | UX | Creative

LinkedIn Twitter Instagram

UI DesignerUX DesignerCreative ConsultantDigital Strategy Consultant Digital Strategy Director Agency OwnerArt Director Creative Director

Digital Marketing StrategyProduct UX Strategy Creative DirectionArt Direction

Marketing UXEnterprise UXProduct UXPhone & Tablet UX

As an Agency/ConsultantAOL, Best Buy, Stella Artois, Huffington Post, McKinsey & Co., Healthways, Apartment Therapy, Vanderbilt University, Warner Music, Maxim Magazine, HCA

As a PartnerYouScience, StudioNow, Athlon Sports

As an EmployeeThe NFL, Icehouse, Duke University, University of Virginia, Tiffin, HGTV

DIGITAL STRATEGY

BRAND STRATEGY

CREATIVE STRATEGY (COPY & ART)

USER RESEARCH & STORIES

VISUAL & INTERACTION DESIGN (UI)

HTML, CSS

EXPERIENCE DESIGN (UX)

STRATEGIC TACTICAL

My Personal Approach Collaborative Adaptive Big Picture Details

I prefer to initiate each client engagement with some form of structured collaboration. When working with clients, Personas provide an easy to understand concept on which a workshop can be built. I’ve found that development teams tend to interact more efficiently when features are the focus.

The more I work, the more I realize that process is less important than the marriage of chemistry and competency. I always look to find that dynamic in my team before the process is even considered.

My perspective is always oriented toward the big picture, but I typically get there by thinking from the details upward. For me, zeroing in on how the discrete elements work together provides a zen-like focus that allows the bigger picture to manifest. (see, “The Breakout Principal” by Herbert Benson, William Proctor)

Selected Work Case Study Product & Marketing UX Samples

YouScience Product Redesign 2014

AOL Contributor Network UXAOL Seed User Signup UXAOL Demand Platform UXHuffington Post UXYouScience Marketing

Expo iPad AppOverdog Android AppVanderbilt University UIMaxim & Blender Magazines UIApartment Therapy UI

CASE STUDY:

YouScience Product Redesign Problem: Objective: My Role:

5 Pages:Alignment Workshops

Experience Design & Development

Result: Navigation & Home

Result: Staged Home

Result: Data Visualization

The YouScience core product was failing to orient users to the comprehensive value and depth that was available. Our research showed that users only engaging with 18% of their results and career suggestions.

Redesign the conceptual structure of the content, restructure the navigation, and orient the users better from the site entry points. Test users (existing and new) for improved content comprehension and consumption.

Team Lead for the conceptual and functional redesign. I began with a series of internal alignment workshops based on in-house user research. I delivered everything from wires to dev-ready PSDs and team coded with front-end developers to finalize delivery

Alignment Workshops

I prefer to use a myriad of exercises in a structured collaboration (or workshop, if you’re a client) to achieve alignment on the approach while gathering new information and ideas. I select which exercises to use based on the intersection of the business goals and project requirements.

Business Goals

This workshop for YouScience kicked off with redefining our market categories relative to feedback from sales. This helped orient conversations toward revenue goals and and the our shifting go-to-market approach.

Personas Defintion

Next, we (re)defined the personas. This helped remind the team that there is a hierarchy of importance relative to the feedback we were getting from users. We ended up dropping one of our personas ranked very highly, “Helicopter Parent” after failed marketing efforts revealed them to be of little value.

Personas Weighting

We then gave each persona a rank based on business value. I typically have everyone weight the personas individually so that the group opinion does not influence the results. I look for wide degrees of variance between weighting as a stimulus for discussion. This is where most of the problems are identified and resolved.

Features to Personas

The final step is to whiteboard the mapping of features and content to the weighted importance of the personas. This is a very iterative design process, but starting on the whiteboard helps everyone get involved and take ownership of the experience. I take these collaborative “board wires” and redistribute a formal wire as a findings document to the team.

Experience Design & Development

I utilize whatever tool is best at various stages of the design process. It is rarely a linear execution. What starts out as wires will typically get into a sandbox environment early and then screenshots are used alongside pixel perfect PSD snippets. The secret sauce in my opinion is chemistry and competency of the front-end team

High Fidelity Wires

Next I exhausted the wires definition until all alignment of ideas was represented.

Wires, for me, are visual exercises in thinking. I tend to use them to work out the larger business problem as well as the design problem, together. Some have complained that my wires are too high fidelity. I may be guilty of that, but it is simply a byproduct of utilizing the wiring process as a problem solving mechanism. On the upside, I’

Low Fidelity Markup

Once wires were represented loosely in the Ruby dev environment, I collaborated with our front end dev team via Skitched up screenshots begin committing CSS, JS, and HTML.

I prefer to react to design in the development environment if at all possible. There is a unique quality of the experience that can only be qualified in the browser. This means I have to be comfortable designing in the browser.

Team Development

From here, we churned as a team in the development environment. I pivoted from Firebug to my IDE, piggybacking off the developers’ lead.

Chemistry is key here, and I strive to only take as much ownership of the code as the interpersonal dynamic will allow. The result is the fastest way to put the final polish on the desired UX.

Iterate to Final Markup

When the first release was in sight, we engaged our most loyal users for feedback.

The feedback indicated that one more iteration was necessary, so in this case, it seems that we did a decent job of targeting the solution from the previous round of user research.

Results:Navigation & Home Page

Two major themes drove the overall changes represented in this version: The Sidebar Navigation and the mandala visualization of the results. A fundamental requirement was that scored results could not indicate that “higher is better.“ even though high, medium, low scores are calculated - thus the mandala approach. The sidebar nav was overwhelming praised as a “huge improvement.”

Results: Multi-State Home Page Designs

As users engage with their results their needs change. Once oriented to the lexicon of information, users move into a more actionable category. Therefore, we’ve designed the My Profile (entry point) to react to certain behavior triggers such as saving careers or sharing.

Results: Optional Views of Results Data

Every user prefers to interact wit their data in different ways. Some prefer spacial relationships of their information, while others prefer standards and organization. My solution was to design one view that accommodated both trough clever interaction design.

YOUSCIENCEMARKETING UX

AOL Contributor Network Experience

When Studionow was acquired by AOL, we began the process of refining how our original platform solution for Studionow would serve a much more diverse set of skills and talent. My role was to deliver process and the desired UX via wires and mobile experience designs.

v

StudioNowDavid Cortsfagan@realtree.com

(706) 562.7235

Features ProposalVersion 1.0, March, 28, 2009

StudioNow Website 3.0Features & Content StrategyInformation ArchitectureCustom Application Development

Conceptual Design & ProductionContent Management Integration

Land Management Map

StreamlinedCustomization

PHP/Flash

Land Management Map

Radical Scalability

PHP/Flash

Let Us Show You

PHP

Des: 01Custom Design ViewHomepage: Objective: Present the core StudioNow brand elementsthrough the navigation schemaone messaging campaign.

1. Streamlined Customization2. Serious Cost Reduction3. Radical Scalability

1. Home Page

Land Management Map

Welcome.

PHP/Flash

Level 01.1Custom Flash ApplicationVideo Grid-To-Gallery Views Global: All videos approved for presentation are displayed as a grid of scaled thumbs segmented by the highest level category (Client, Product Type, or Benefit). Hovering over a thumb results in feedback prompting users to click. Clicking a thumb displays a full-size video with a gallery of 3 to 6 related thumbs and links to associated Case Studies (if available). Next and previous navigation moves the user left or right within the grid.

DB: Media1. Videos

Video AdminStudioNowPlatform

Add Edit Delete

Land Management Map

SeriousCosts Reduction

PHP/Flash

Vid: 01Case Study Player ViewVideo Player w/ Strategy:Objective: Communicate to the user that StudioNow is a Consulting brand.Only a case study video and the strategy are presented to communicatethe brand position as clearly as possible.

Land Management Map

Citysearch(Scale)

CASE STUDY

Land Management Map

Simon & Shuster(Streamiine)

CASE STUDY

Local Advertisers

Landing Gallery

Land Management Map

Ford Models(Cost Reduction)

CASE STUDY

Publishing

Landing Gallery

(Custom Tag)

Landing Gallery

GALLERY VIEW

FLV FLV

FLV FLV

Form: Request MoreInformation

Enough About Us

PHP

Network Login

PHP

SE

CO

ND

AR

Y N

AV

IGAT

ION

LAN

DIN

G P

AG

ES

(OU

TS

IDE

DO

MA

IN)

Feature Content

CAT: "Streamline"

GALLERY VIEW

FLV FLV

FLV FLV

GALLERY VIEW

FLV FLV

FLV FLV

CAT: "Cost Reduction"

CAT: "Scale"

GALLERY VIEW

FLV FLV

FLV FLV

GALLERY VIEW

FLV FLV

FLV FLV

Form: Login/Signup

OT

HE

R

GALLERY VIEW

FLV FLV

FLV FLV

GALLERY VIEW

FLV FLV

FLV FLV

CAT: "All"

Level 01PHP/Flash Hybrid PageviewsSimplified Video Presentation of The Core Brand Benefits Around "Mass Video Customization"Global: With the intent to speak visually through video and very little else, all content is segregated into the three core selling points capabilities of the StudioNow brand, Customization through streamlined process, Reduced Costs, and Scalability. Other videos that do not fall into these three categories but are approved for presentation are available for viewing within the Grid-To-Gallery view or Landing Pages. Landing Pages are not accessable withing the domain's native navigation and must be accessed directly with specific URLs or links from emails or Paid-Search referrals.

Des: 02Custom Design ViewCall To Action Page: Objective: Convert the user to a phone call or email. Gather onlythe minimal amount of informationnecessary to take the next stepCross-promote other references andoffer any applicable white papers orother more in-depth information instrumental in converting decision-makers.

Des: 03Custom Design ViewAbout Page: Objective: Present the the personality and voice of the brand through minimal copy and unexpected content related to the StudioNow culture. Briefly detail the bios of the principals without excessive focus on the past and a strongfocus on core brand elements.

Des: 04Custom Design ViewNetwork Login Page: Objective: Reenforce the brandrelevant to editors with this opportunity.

Des: 05Landing Page Design ViewCustom Landing Pages: Objective: Provide specific videos that are product or category centric to supporta matured sales opportunity as well as targetedsearch campaigns.

CMS 01Content ManagementVideo AdministrationLimited: StudioNow to provide the proper hooks to administer all videos with the necessary meta data to populate gallery views and associated content views.

EXAMPLES:PRODUCT UX

REQUIRES EDITOR APPROVAL?

InternalQA

AOLLogin

PublishingDashboard

CreatorDashboard

MasterDashboard

DemandDashboard

DEFAULT

SPPDashboard

USERDEFAULT

CreatorLogin

YES

NO

CompleteProfile Management

Power Tool

Editor Tool

100% ?

CreateProject Hub

AssignmentCreation

"GENERATE ASSIGNMENTS"

STAFF

SEED.COM CREATOR

AOL EDITOR

BrowseMatched Jobs

ClaimJob

Post-ClaimConfirmation

(AJAX)

Merge Content& Layout

StaffDashboard

GeneralRecruitment

Routing

Scheduling

NetworkDevelopment

NO

NEW SITE?

YES

NO

CLAIMED?

Work In Progress Creator

Assigned

CreateContent

AssignmentMatching

YES

STAFFREQUIRED?

NO

CreatorTargeting

TargetedRecruitment

SubmitContent

REQUIREMENTS

Project Page

Project Page

ContentApproval

Project Page

NEW CONTENTPOSTED

NO

YES

Project Page

Types:TextPhotoVideoData

Status &Feedback

Project PageWork In

Progress

YES

NO

FAILSEDITOR

APPROVAL

FAIL

AUTOCHECKLIST

PASS

FAIL

ALERTENGINE

STATUSESCALATION

STATUSESCALATION

ADDITIONALTASKS?

Receive Payment

CONTENTAPPROVED

DefineLayout

Add Components

ManageVariations

Final Approval & Delivery

Assign to Editor

CREATEREVISIONPROJECT

GenerateAssignments

JOBENGINE

ProjectSupport

PASS

Creator

Community

Patch

Public Profile

ContentLibrary

Archive

PaymentHistory

Registration

ProfileManagement

Mobile

Create New Site

Creator Profile Development

Work In Progress

YES

NEW SITE? NO

YES

AOL Seed User Signup Experience

Seed is the content contributor network for AOL. My task was to streamline to on-boarding process for new contributor signups and dovetail the solution into the existing editorial workflow and legacy systems.

EXAMPLES:PRODUCT UX

AOL Demand Platform Design

My longest running project at AOL was the Demand Platform. This project sought to streamline an end-to-end solution that would identify search demand and trigger and editorial workflow, right down to proofing and publishing. Shown here is an enterprise UX wireframe and a customer facing website design.

Huffington Post Worldview Platform

While consulting for AOL and Huffington Post, I was charged with the task of designing the UX for the platform to serve a rapidly deployed network of videographers to cover stories from multiple points around the globe, Worldview.

EXAMPLES:PRODUCT UX

YouScience Marketing Experience

The YouScience customer facing website was in a constant release phase. My team reacted quickly to market feedback, user feedback and helped drive content and campaigns to support an ever changing business model.

EXAMPLES:MARKETING UX

YouScience Marketing Experience

Cont. New versions of the site were released about every 90 days. We constantly experimented with new visual languages and iconography. We eventually landed on a story format after about 11 months.

EXAMPLES:MARKETING UX

HIGH VELOCITY ITERATION - BASED ON MARKET FEEDBACK

Tablet UX: Expo iPad App and Logo Design

Expo is truly and end-to-end solution and a great example of how to rapidly solve problems and launch quickly. In just two weeks we went from concept and market research to a fully designed prototype with functional interactions inside iOS. Expo is currently in the Apple Store and raising the next round of funding.

EXAMPLES:PRODUCT UX

Overdog Android App

Overdog is an app that connects professional athletes with gamers and allows them to compete on their favorite Xbox or Playstation games. My role was to design the UX for the Android experience keeping with the current design patterns set forth by Google.

EXAMPLES:PRODUCT UX

CMS Driven Student Portal

Vanderbilt University came to me looking to solve an unmanageable content problem for their School of Music site. After using a series of workshops and in-depth user interviews, I delivered a CMS driven marketing site for prospect and current students.

EXAMPLES:MARKETING UX

Editorial Design: Maxim & Blender Magazines

As Alpha Media Group struggled to find a place in the market for Maxim and Blender in late 2009, I had the opportunity to help raise their social engagement by 450% and provide much cleaner UI and promotional designs.

Details interaction between content creation, approval, and publication

EXAMPLES:MARKETING UX

Apartment Therapy Marketing UX

One of my favorite startup clients was Apartment Therapy in NYC. They always allowed as much creativity as could be crammed into banners or leaderboards when I helped with their sponsored promotions.

EXAMPLES:MARKETING UX