Designing the Experience

From conception on through to delivery

If you have a great idea, don't tell anyone... tell everyone!

Muriel Cooper
MIT Media Lab Co-Founder
AIGA Medalist


And then...
  • Ideate
  • Prototype
  • Release and revise

 

Ideate

It doesn't matter if its a scribble on the back of a napkin or a note jotted down on the board during a brainstorming session... all great ideas need to start somewhere and mature, irregardless if you are architecting a piece of software, championing a industry standard, or implementing a process that will benefit your company's long term success.

Ideate:


Case Study:

Architecting the Next Version of Your App

Client:
AdCellerant

Role:
Principal Architect

 
Impact:

Last year I was fortunate to work with several old co-workers on architecting the next version of their app. Their end goals where simple: Transform its monolithic code base into a more robust “Service Oriented Architecture that would be capable of adapting to change over time.

To accomplish this, I reviewed the original software goals to evaluate what was successful and factored in user feedback to guide what improvements and new features needed to be added.

Finally, we seperated each actionable item into ”Must Have”, “Should Have” and “Nice To Have”. While this project is still underway, to date, their development team has already been able to increase their “Velocity” 5x; plug-in new features as needed; and make changes in near real-time.

Technologies Used:

Ruby on Rails, React, PostgreSQL, Node

HTML 5, CSS 3, JavaScript 1.8

Git, Grunt, Jira

 

Personal Contribution:

Project Architect

 

Links:

Software Development Plan Overview (Author)

Ideate:


Case Study:

Defining an Industry Standard

Client:
IAB

Role:
Sr. Director of Technology

 
Impact:

Member of the team responsible for creating the IAB’s Technical Lab to help aid in the production of source code and support materials, in order to further industry adoption of technical standards and specifications by:

Creating a comprehensive code bank to assist in simplifying and reducing the costs associated with implementation of IAB standards.
(Co-Author / Developer)

- Collaborate with the Digital Advertising Alliance in the creation of new AdChoices programs in video and mobile to strengthen consumer privacy.
(Technical Laison)

- Develop an IAB standards technology compliance program to reduce friction with the interpretation of technical protocols.
(Developer)

- Produce specifications for VAST (Video Ad Serving Template), VPAID (Video Player Ad Interface Definition) and MRAID (Mobile Rich Media Ad Interface Definitions)
(Contributor)

Technologies Used:

HTML 5, CSS 3, JavaScript 1.8

Git, Jira

 

Personal Contribution:

Project Architect

Front-End Developer

 

Links:

IAB Tech Lab
(Co-Founder)

IAB Tech Lab CodeBank
(Co-Founder)

The Power of Open Source Collaboration (Author)

Ideate:


Case Study:

Implementing a New Process

Client:
VML

Role:
Group Technology Director

 
Impact:

Designing the experience also means putting new methodologies in place to ensure standards, as well as timely revisions and updates, are achieved.

Initially hired as a contractor, I was brought on to introduce “Agile” principles to several teams working on client projects for Ford, Honeywell and J.G. Wentworth.

In order to do this, a series of educational classes were held with each department to focus on their piece of the puzzle, why it was important and how it fit into the big picture.

Before embracing Agile, these teams' software development experience only allowed them to take on an average of 10 new feature requests each “Sprint”. Within a 3 month time, all teams were already taking on 40+ new requests.

Technologies Used:

Git, Jira

 

Personal Contribution:

Project Architect

Subject Matter Expert

 

Links:

Software Development Roadmap (Author)

 

Prototype

Now show others. Let them see both the "forest", as well as the "trees". Let them see your idea from 30k feet, as well as from the ground level.

Show them how it works. How it can aid them in accomplishing their task. How it can create an experience that they can come to rely upon.

Prototype:


Case Study:

User Journeys

Client:
Denver Post

Role:
Sr. Director of Technology & User Experience

 
Impact:

Do you know how your user’s “travel” through your app? You should. Does it take them three clicks to get to the information they want?

In designing the Denver Post’s second version of their iPad app, along with the paper’s art director and head of mobile apps, we mapped out all of the different screens user’s would have to go through on each of their “journeys”.

When compared to version 1.0 of the app, this one, on average, decreased the number of screens the user had to go through to get to their end goal, by a factor of 33%. The end result was users spent more time on each page, their total session times where longer, and and daily readership increased 140% one month after it was released.

Technologies Used:

Adobe Create Suite

 

Personal Contribution:

Information Architect

Subject Matter Expert

 

Links:

"Section Front" Journey

Prototype:


Case Study:

Subject Matter Expertise

Client:
Alenia

Role:
Sr. User Experience Developer

 
Impact:

Abatan is an interactive environment which I created to allow designers to graphically create, manipulate, and describe page-layouts. During the design process, the system monitors how the designer assembles the layout. As the designer alters and conforms graphical elements in the layout, the system records the actions performed and directly translates these into generalized computational descriptions that can be re-used to format new elements in a similar style. The goal of the system is to directly translate visual knowledge into a symbolic form so that it may be utilized by other existing design programs to aid users in creating new layouts.

The true end KPI result? What normally took two people (a designer and a programmer) 8 hours to do, now can be done by the designer alone in less than a half hour.

Technologies Used:

C, LISP

 

Personal Contribution:

Project Architect

Graphic Designer

Developer

Subject Matter Expert

 

Links:

Code Sample

Example Output

Prototype:


Case Study:

Unified Designs

Client:
Bay Area News Group

Role:
Sr Director of Technology and User Experience

 
Impact:

Designing for a single use case is easy. What happens when you have 80 of them.

That was the case when the Bay Area News Group Media tried to create a unified design across all of its publications, each with their own unique features, layout, ad map, etc.

As the Sr Director of Technology and User Experience at the time, I led the redesign of over 100 web sites across 5 different CMSs.

Within a span of 3 months, my team of 20 developers and designers created common, reusable code libraries, unit tests and automated build processes that were seamlessly integrated into all of the company’s subsidiaries.

During that time, I also architected and oversaw the migration of over 6500 ad campaigns from Yahoo APT to Google DFP.

Technologies Used:

LAMP, Java/JSP

HTML 5, CSS 3, JavaScript 1.8

Git, Jira

 

Personal Contribution:

Project Architect

Graphic Designer

Front-End Developer

Subject Matter Expert

 

Links:

Code Sample

Information Architecture

 

Release

It doesn't have to be perfect the first time. Just get it out there. Once live, listen to what your users are saying. Does your creation hinder or aid them in accomplishing their task at hand?

It is only once we understand how a user interacts with a system that we can then begin to revise it to better meet their needs.

Release:


Case Study:

Targeted Demographics

Client:
Denver Post

Role:
Sr. Director of Technology & User Experience

 
Impact:

Know what your end-users want. In the case of Denver Broncos fans, that meant details. When the first version of the Denver Post mobile app launched, the content was aimed at general news readers. It quickly became apparent that for this city’s football fans, it wasn’t even close to being enough.

Along with the Sports department, the paper’s Pulitzer Prize winning photo editor and their Director of Social Media & Mobile Apps, I launched a week long project to better understand what these die-hard fans absolutely must have; how they consumed this infromation, and what features would they like to see, that they’ve never seen before in this type of app. The end result? Nearly a 300% increase in readership over a 3 months.

Technologies Used:

Adobe Create Suite

 

Personal Contribution:

Information Architect

Subject Matter Expert

 

Links:

"Video" Information Architecture

"Special Reports" Information Architecture

Release:


Case Study:

Adaptable Displays

Client:
Digital First Media

Role:
Sr. Director of Technology & User Experience

 
Impact:

MediaNews Group is the parent company of many different newspapers and wanted to unify all of their properties' web sites in order to streamline production, cut costs.

One of the challenges was trying to produce a common, standard design and production model, while at the same time allowing the larger sites, who had the resources, to customize their web presence, in addition to supporting smaller sites that did not.

Rather than creating several different templates to accomplish this, I developed the “Pyramid Stack”. The idea behind it was to start off with the lowest common denominatior in terms of design and layout, and then layer on top of that functionality to support newer technologies which could take advantage of it.

The Pyramid Stack supports three different states:

- Text/image-only rendering.

- Implementation of a common look, feel and functionality for smaller sites who don't have the means or need to customize.

- Customization of the standard design for larger sites that were interested in doing so.

Technologies Used:

LAMP, Java/JSP

HTML 5, CSS 3, JavaScript 1.8

Git, Jira

 

Personal Contribution:

Project Architect

Developer

Subject Matter Expert

 

Links:

State 1: Article w/o Pyramid Stack

State 2: Article with common Pyramid Stack

State 3: Article with customized Pyramid Stack

Common Template

Release:


Case Study:

Reusable Deployments

Client:
Digital First Media

Role:
Sr. Director of Technology & User Experience

 
Impact:

Once DFM finished unified the design of its Media Center across all of its 80+ web sites, it was then my Design and Development teams' responsibility to now get it out live to as many distribution outlets and publications as possible.

During the prototype phase, one of my KPI's that I tasked the teams with was that whatever design they came up with, it needed to be displayable across not only our sister publications, but also as many social media sites as well; and that they had to ensure the design remained consistent and that a single code base could be maintained.

In order to achieve this goal, I gave each team member a different third-party API to learn. Within a week, after each person had a chance to present their findings, it was obvious that given the current state of things, our best bet was to build, edit and maintain the design and its contents in WordPress, as it already had the infrastructure, integration and distribution support we needed.

Within 2 months, my teams were able to not only port everything over to this new platform, we were also able to set up "one click" publishing of content to all 80+ DFM web sites, as well as to Facebook, Twitter, AdTaxi and several other social media sites. 3 months later, audience traffic and distribution grew 300%.

Technologies Used:

WordPress, MySQL

PHP 5, HTML 5, CSS 3, JavaScript 1.8

Git, Jira

 

Personal Contribution:

Project Architect

Graphic Designer

Subject Matter Expert

 

Alan Turransky

alan@turransky.com

425-366-0168

turransky.com

turranskyllc.wordpress.com