The challenge for me was to develop an experience that totally interrupts the reading process and asks the user to jump through a couple of hoops before continuing on. Because we are surrounded by other free sites, most without their own registration, its vital that we get this experience correct. If not, users will bail and find other sources of news and information.

Research

Because there are many risks in requiring registration, it was important that before I started defining the experience I first knew a great deal of fundamentals. We took a number of steps to gather data:

• Forrester consultations – we discussed the issue with Forrester and looked at some of their reports on registration practices.
• User survey – We conducted an online survey of several hundred users to find out which information they were most comfortable sharing, how comfortable they would be with required registration and several other important factors.
• Site analytics – We looked at past traffic patterns since we have required registration in our past and saw it affect our pageviews.
• Best practices – I looked carefully at many other sites and observed how they handled this situation, particularly their use of Facebook Connect.

Research Artifacts Some screens I wrote that summarized a lot of the research.

User / screen flow

This involved a lot of screens and weird use cases so I wanted to organize it all into a site map.

My registration screen flow I need to see the whole picture before I can be confident that my solution will work.

Hi-fidelity wireframes

I worked on a few concepts for the registration screens.

Top Regi Bar This approach included a tool bar that would follow you around the site. I was also thinking about using this for sections of a site that required payment.

Top Regi Bar This shows how the bar would expand when the user was required to register or login.

Pop-up Login My favorite approach was a pop-up layer that would appear the instant that a user requested a page that was behind the wall. This was later deemed too difficult to build.

Registration pop-up After much deliberation, I decided this would be the best way to get all users through the process. I wanted the registration screen right infront of the user, so they could see right away how simple the process was.

thank you screen After a user is registered or logged in, we will ask them to sign up for an email product or two.

Final comps

In the end we decided to use a more simpler approach – redirecting the user to a new screen, totally streamlined for registration. This was much easier to execute and would more reliably deal with unregistered users.

Final comp In the end we settled on a design that was not in a popup and changed some of my coloring and formatting. The form got longer too unfortunately.

Final Thank you Here is a comp showing the Thankyou page after a user has used Facebook to connect.

In 2010 we decided to build an iphone and iPad app that presented the photos in a way that was true to those platforms but also kept the essence and simplicity of the original Big Picture blog.

My role on this project was to design the user experience through detailed wireframes.

iPhone High-Fidelity Wireframes

In this case I took my wireframes almost to the final design, since the application was all about photos and the wireframe wouldn’t work if it didn’t work well with the actual photography used in the Big Picture. I decided early on that to keep the timeline shorter we would limit the app only to horizontal orientation on the iPhone.

Wireframes for iphone I made a full map of all the screens with some annotations. Click to see at full size.

Options for the main screen Our developer had a hard time getting the app to behave how I wanted it to, the result was a confusing main screen. So I developed some alternative approaches that I hoped were easier to build.

iPad High-Fidelity Wireframes

The most requested feature of the app, after it was released on the iPhone, was for an iPad version. Of course this seemed like a perfect fit for the Big Picture and Apple agreed, because they featured the app in the iPad store for several weeks.

main screen portrait orientation This app would work in both orientations and after a lot of sketches this layout was my favorite.

Main screen landscape mode

The intro screen Each entry started with a quick intro which I thought was very important to the app so I wanted to make it essential to the viewing experience to see the text.

A photo screen We decided that the photo had to be as big as it could be, and the text would be modal so users could hide it if they wanted to.

Real Estate Homepage Final
one of the latest comps, created by my designer.

Final Listings Results
We went with the map in the right column to help expose what we thought is an important feature.

Real Estate Listing Detail

I spent an incredible amount of time on just a few screens – the three you see above. The homepage needed to be more usable and organized, yet promote a lot more features. The listing results needed to be easier to scan, more functional and include a new map feature. The detail screen needed to feel more polished, better organized and include some new content and features as well. Below I present a few iterations of each wireframe.

Real Estate Homepage Wireframe v1
This option puts search across the top and then uses a three column layout below for the content and other features.

Real Estate Homepage Wireframe v2
This uses a three column layout the entire length of the page and places much greater emphasis on the content.

Real Estate Homepage wireframe v3
Also three column layout but perhaps a better balance of utility and content with the search being in the first column.

Search Results Wireframe v1
This puts the new map feature behind a tab which would be necessary if we cared a lot about the fold - some people cared a lot about that

This shows the map activated in the same wireframe

Real Estate Listing Results v3
This puts the map prominently in the right rail and ties it all together with a utility bar across the top.

Real Estate Listing Results v4
Similar to v3 but a different treatment of the search controls

The listing detail page
This page counts a lot to both advertiser and user. The user wants to feel that this information is reliable and detailed while the advertiser wants their home to look its best.

Next:

Here are a few grabs from the old site…

Old Real Estate Homepage
This old homepage was the victim of iterations over many years and with little care for the user experience.

Old Real Estate Listings
The Listings results page, after someone runs a search, is critically important as its where we display a lot of information and some very valueable ads as well.

Home Listing Detail page
Another vital screen - the details of a specific home listing. Its where advertisers care a whole lot about but its also something that our users spend a lot of time looking at.

Next:

• Account Manager – budget, schedule, clients (a lot of them), meetings, ass-kissing
• Team leader – I was on point for a small internal team of five
• User Experience Lead – developed all wireframes, conducted user research, fought hard against bad ideas from the corner office
• Info Architect – audited all the old content, developed the new information architecture

Experience Design / Wireframes

After we conducted an audit of the site content, a competitive analysis and ran a survey on the website, I began to put together a new information architecture and wire frame the screens.

The proposed new information architecture for MBTA.com

Homepage
I wanted the homepage to serve as a dashboard for riders

Station Page
This was one idea I had that we stuck with through the end - a station page that told you about everything a regular commuter needed to know.

Subway Route
I extended a format from an internal MBTA document to lay out all the stops along a subway line.

Route Mapping
Every route has a Google map with the stops marked and upcoming pickup times.

Trip Planner
This wasnt a new idea at the time, but keeping it simple was a challenge. I wanted this to work for my mother.

Trip Planner - annotated
This wireframe shows a few notes about functionality.

Service Nearby
I wanted to turn a very clunky, unhelpful tool into something that was fun and informative

Service Alerts
There is a lot of information available regarding routes, vehicles and elevators. I wanted to keep it all at your fingertips but not all at once.

Design

I had two excellent designers and two awesome developers on this project who together did a magnificent job turning my ideas and wires into a reality. Here is a rundown of some key screens to see how it turned out. Of course this is all still live, almost exactly as I wanted it to be in 2006 so dont take my word for it.

I loved how this came out. A lot to do but not overwhelming. Now I think its crammed together too much - I know better now.

Its easy to pick on this old geezer. It did a lot of the same things the new site does, just in a very bad way.

The final version of the station page - not everything I wanted but close.

We simplified the interface even further after testing indicated it was too complex.

The Service Nearby tool

The project grew substantially when the MBTA asked us to introduce everyone to the Charlie Card. It complicated the pricing and the entire ticketing experience. We set out to simplify it.

We designed a four-legged approach to the Charlie confusion and offered both the cliff-notes and the detailed versions to riders.

As Director of User Experience, my first job in 2007 was to oversee the redesign of the entire site. The goal was to improve engagement by increasing pageviews and growing our audience. I was lucky to be helped by some talented consultants at Creative Good who guided us through the research phase which included two dozen listening labs – some at homes and some in a lab setting. In the end, Creative Good presented us with a framework and strategic recommendations for the new site’s design and layout. It was my job to take that strategy and see it through the design and production process.

I contributed in a number of ways to this project:

• Wire frames – a bunch of them for more than a dozen templates
• Design direction – overseeing a small group of internal and external designers
• Style guide – developed guidelines for the technical and editorial team for implementing layout and design

Research

With help from Creative Good, we conducted about ten site visits where I was able to observe real users in their natural environments while they visited Boston.com and other sites for news and local information. We also ran two days of study in a lab setting. The result of this study was a clear doctrine from Creative Good on how we should promote and organize our content and functions – something they called “information retailing”. They also made some wireframes for a few key pages to show how we could interpret the new strategy.

Experience Design

I made wireframes for about thirty different sections of the site. The goal was to make pages that displayed content as clean and straightforward as we can, so users saw meaning and relevance in it. The wires were very detailed because we needed to understand and agree on guidelines for the quantity and denseness of the information being presented.

Homepage Wireframe
The wireframe for the homepage was a rough sketch to help us agree on what elements could be above the fold and the make up and size of the content sections. It was also where we agreed on the precise display advertising requirements.

Today's Globe Wireframe
The new site would have the Globe as a key element of the navigational structure.

Sports Section Wireframe
This really shows how we wanted to clean up the chaos of the old design - using more whitespace, less color, consistent use of images and of course those lovely display ads.

The Lifestyle Section Wireframe
This page used a sighlty different approach to the content to reflect the greater variety of topics within that section, as well as its non-news nature.

Design Comps

The design of the site was carried out by a team of designers that I directed.

New Boston.com Homepage '07
This was the last comp we made before the page was built.

New Things to Do section
This was a new section for Boston.com. We found in the user study that people were looking for this content in a variety of places.

New Boston.com Article
This article template was designed to be more flexible, more legible and offer more utility.

New Boston.com Gallery
The gallery was taken out of a pop-up so we could display more ads.

Style Guide

A lot of great effort went into making sure the new design was implemented properly. Among many documents, I created a style guide for the technology team to ensure the CSS was well done and one for the editorial team who would be laying out the page using various elements in the CMS.

Boston.com Redesign Style Guide

I lead this project along with an interaction designer and developer at RDVO. The major components to this project were:

• Research: I conducted fifteen site-visits with a carefully selected group of customers to observe their use of the application and understand their unmet needs. We also studied various competitors products.
• Strategy: based on the research we put together a recommendation on how the application should be redesigned. No comps or wires, just the goals and features for the new version to serve their users better.
• Wireframes: I developed wireframes for about twenty critical screens and conducted about a dozen rounds of feedback with the client to get it all right. The wireframes were extremely detailed.
• Design specification: I turned the designs into a detailed specification that could be handed to a development team to build the application front end.

Experience Strategy

We began the project by researching the existing product. I wanted to learn how the product works, how their customers use it, and see if I could identify key gaps and pinch-points in workflows. The interaction designer and I conducting more than a dozen on-site and virtual (via web and phone) site visits with about fifteen major customers. We asked the users to complete a survey and then show us how they used the screens and the other tools they used to get their jobs done. This was vital because it showed us how well the current application worked for the black-diamond (advanced) users – even though it was a terribly difficult learning curve. It seems the more that people used the app, the more satisfied with it. Our challenge was to develop a new UX that would not harm these advanced users but would open the door to wider, more casual audience.

Cover of our UI Strategy doc

We segmented the users into user-types to help focus the UX on the users and interactions that mattered most.

After outlining the needs of a user-type, we laid out core changes to the application to better meet those needs.

Knowing that we probably couldnt get it all done, either due to time or budget, we rated the value of each change to that user.

Experience Design

After we settled on the strategy for the new Team Approach, I set out to sketch out the new screen flow and the hundreds of interactions that the application would have to handle in its new design. This was by far my most complex product and there were a dozen rounds of feedback with our client to get each screen right.

We focused on just a portion of the screens in the new application, this map shows those screens and how they flow from one to another.

The dashboard was a vital screen and the one that we spent the most time on. It needed to offer a peek into a lot of information and would be highly customizable.

The account overview screen - shows the individuals within that account and needed to provide both a broad and deep look at the records and activity in the account.

Adding a new contact or phone to an account was handled in a pop-up.

Here is a great example of how a simple task, adding a phone number, was actually quite complex. Considering all the functional requirements, I think we handled it well.

Final Designs

The design of the new application was done by an interaction designer and as you will see they had to adhere precisely to the wireframes. These shots are actually screen grabs of fully-built HTML pages that we created at the end of the project.

The login screen of the application

The Dashboard of the application, where the user landed after logging in.

The main account overview screen.

I was a part of the redesign from early on – listening to business stakeholders about their need for improving the revenue opportunities and the editorial stakeholders about their ideas and plans for improving the content of the section. I started the process with five rounds of wireframes which lasted about six weeks. Then we moved into design which was relatively short (thanks to very detailed wireframes). The new look launched in summer 2008.

Next: