I was lucky to join at the right moment when the design team was still in the early stage of exploring homepage redesign. I joined as a principle lead managing the team responsible for the homepage and landing pages in August 2012. At that time the design team were A/B testing a few different homepage concepts. One of the main challenges we faced was convincing the leadership that we had to change the homepage. Since it had not been significantly changed for years and people don’t like big changes, every time we tried something drastic, it affected the bottom line. It took awhile, but my team came up with a concept that got the company excited.

After a long process of negotiation, we decided that we would go ahead and completely redesign the homepage and launch it in beta mode. We wanted to let people opt-in instead of force them into the new design. That way we could get enough traffic to test what’s working without affecting the bottom line too much. We got buyoff from the leadership team and we started the planning process.

Note: To opt-in, go to expedia.com and click on the Show Me button below the header. Make sure you leave some feedback.

It took us awhile to revamp the search wizard, since it is the most important piece of functionality on the page. After a lot of user lab studies and A/B tests, we came up with a model that worked. I am particularly proud of the ability for users to organically build packages from any line of business. For example, you can start out booking a flight and add a hotel and a car to your search. It felt really intuitive.

Another thing that I love about the search form is that it works on desktop and tablets. The reason we didn’t make it work for mobile was that the mobile platform is owned by a separate organization within Expedia. But technically it is not out of reach.

The main story behind the new design is around the idea that travel is supposed to be personal, fun and easy. So we wanted to make sure that the new design conveyed that. We simplified the form and made it much more accessible on touch devices. We used a huge hero image that we hoped would get users into the right mood. We made sure that we remembered you when you come back. Although not all of the ideas have been implemented, it does show where we want to go. I feel like the company is going in the right direction and it has the right kind of people to be successful.

Some of you may wonder why I left if things were going well. I was approached by a late stage startup that promised to let me revamp the product from scratch. It is something that I have always wanted to do, so I went for it. I am very glad though that I had a chance to leave my mark at Expedia and can now finally see it go live.

Desktop version

Tablet version

The site is built on the new platform that we built in early 2012. There are a few great ideas behind this concept, and I want to highlight a couple that makes me smile .

Desktop homepage

One of the biggest problems we are trying to solve has to do with reading behavior that most people have. Readers will come to the an article on the site, read it and leave. We want people to continue reading, and to do so, we have to streamline the reading experience and make it as effortless as possible. We do that on desktop by automatically open the next article when you reach the end of the current one. Infinite scroll has been implemented on many social web sites, but the technique is not being used for news sites. It is a great solution that help build a certain kind of user habits. It is something that behavioral psychologists call Variable Reward Schedule.

To streamline the reading experience even further, the team negotiated with the advertising team to move all ads to the third column on desktop experience. We place a new ad after every 5-7 paragraphs. And it is only being loaded when it is visible on screen. It is a patented technology owned by the company. That way the content integrity is intact and the advertisers are still getting their impressions.

Last but not least important is the social sharing bar on the left side that follows the user down the page. It has been done on other sites, but the colorful bar in this case stands out enough from the rest of the page without being obnoxious. And it tested really well in our usability lab.

So there it is, my last project at nbcnews.com. I am sad that I was not there to celebrate the launch with the team. Kudos to all the people that are involved. You guys are awesome!

Desktop story page

Tablet homepage

Tablet story page

Phone homepage

Phone story page

This is a test launch of the new format that we build on our new platform. It is also our first stab at making the site feels like a native application. By using responsive design techniques, we make the site work on different screen sizes and platforms. So far it has been a successful attempt.

To make this manageable, we decided to separate the desktop site from the mobile site, so that we didn’t have to worry about older browsers and business requirements that didn’t apply to our mobile business. It was a good choice because we managed to release this project in a very short amount of time. That gave us additional time to refine and add features post-launch.

There were a few challenging problems that we tackled. We decided to use a front-end solution to serve images of different resolutions to different screen sizes. There is no user agent detection involved. Another interesting problem was the different ad systems between phone and tablet, which we also solved using a smart front-end solution.

What make this feels like a native application is the fact that posts open in place. You can also search, filter or get more content in real time. Everything loads much faster than before due to some heavy optimization to the code base and structure.

A while ago, I posted about our last mobile redesign. Since then we have learned a few new tricks that help grow our mobile business by including a whole new category of users, the tablet users.

Last year I went offline for a few months to work on a couple of personal projects and an iPhone app for msnbc.com. About a year later and after the iPhone project fell through, I was asked to design a new msnbc.com mobile version. The target audience is people who own devices that have Webkit-based browsers such as iPhone and Google Android phones. The project was a huge undertaking especially for an inexperienced web designer like myself. For people who don’t know me, I am more of a data visualization person than a web design person. I have designed and launched a few successful brochure websites, but have never worked on a large scale one like msnbc.com. Given that most other large news organizations have released their websites for these devices, we wanted to challenge ourselves to do something better.

Brainstorming

I work with people from all different departments including sales, editorial and development to decide what the product should do. The goal is pretty straight forward. Show everything that we currently have on our desktop website. Given the deadlines, we can’t possibly create mobile rendering for every single piece of content on the full website. We have to come up with a modular design, so we can display whatever we decide and add new content as we go.

The first concept we come up with works like a native iPhone app. The content is divided into sections roughly based on media types. You scroll vertically to get to different sections and scroll horizontally to get more content from each section. The horizontal scroll works like the iPhone photo app.

There are a few problems with this concept. One obvious problem is that it hides the majority of the content behind the horizontal scroll. I am a big fan of how the iPhone photo app works, but it doesn’t apply well in this situation. Another problem is that the design is tied to a specific device, iPhone in this case. The side scrolling feature with the little dots at the bottom of each panel is very iPhonish. Since the website is supposed to work on any Webkit device, we decide to do away with this approach.

Although the first concept is not ideal, it does show what kind of content we want to surface on the mobile site. It also shows different ad opportunities that we want to support. One interesting point about the concept is that it supports showcase (300×250) ads in the design. I haven’t noticed this on other mobile websites.

Exploration

The second concept is more inline with the product requirements. It feels like a native iPhone app and at the same time has a distinct msnbc.com look. We modeled the design after the desktop site. The content is organized into slices. Each slice can function by itself and be placed at any location on a page. Some slices also have subsections, for example, the Categories slice has News, Business, Politics, etc. This design provides greater flexibility.

The biggest benefit of this approach is that we can use similar modules to build pages for any other msnbc.com properties such as the Today show, Dateline, Nightly News and others. It also allows us to add new types of content without affecting the rest of the design. As you can see from the image below, all the msnbc shows have unique content and design. They are all built using modules from the concept above. The only thing that is different between these pages is a few CSS overrides that give them distinct look and feel.

On the desktop site, we list photos and videos along with articles in the same slice. We wanted to carry that functionality over to the mobile site as well. Photo and video stories are listed along with the rest of the content inside each slice. That way multimedia stories don’t feel that separated and special. They are just part of the experience. Of course, we still have the dedicated video and photo sections like we have on our desktop site.

Final result

The final design that we released to the web looks almost the same as the design concept we came up with. Although I only provided the design for a few specific pages and slices, the development team did a great job of reusing the modules to build many others. For example, we did all the msnbc show pages in the last minute. I only provided the design for the Today show pages. The modularity of the design allowed us to not be concerned about the visuals, but only about what type of content we want on each page.

It was a great learning experience for me. And I want to use this opportunity to thank everybody involved. They were all great and without their efforts, we would never be able to release something like this.

Awards and honors
2010 – Website of the day from Cynopsis Media

Yep, it all happened rather quickly. When I stopped posting in late 2010, my girlfriend and I were planning our wedding. After the wedding she immediately got pregnant. I swear I didn’t do it on purpose . Since then, life have been pretty hectic for me as I had to stop being a baby and grow up was preparing to be a father. In the mid of all that, I got promoted to lead the mobile and devices team at msnbc.com. Apparently if you are good enough to be a father, you are also good enough to tell other people what to do .

So during the last 18 months, I learned a lot about designing for touch devices. We started using ASP.NET MVC for our new publishing platform at work, so I got to learn a lot of C# as well. In early 2011 with a friend and my wife, we built a prototype for our own web startup. It was a recommendation engine for people who enjoy good food. Although we never finished the project, I have grown a lot as a developer.

So, that’s pretty much it. As things are coming back to normal, I will try to stay more active. I will even try to write some tutorials again.

via Innovative Interactivity

via shoeboxblog

via graphjam.com

via Tiff

I think the guys over at Bing did a great job with this redesign. The map tiles look much cleaner and more aesthetically pleasing. The only thing that I still miss is the map of bus stops that Google has.

Read the full review at 41Latitude:

…this was not some incremental improvement that Microsoft gave to Bing Maps—no, this was a vast overhaul. In truth, it seems as though Microsoft has left nothing unchanged in the “new” Bing Maps. And yet even though the “new” maps are unusually light on detail (especially in how few cities they seem to show), they’re now among the most aesthetically pleasing maps on the web.