Art Imitates Life

More Art than you should ever need.

Responsive Product Page

Design Challenge

We have a large group of e-commerce sites that we work on at Pearson, and we are introducing new features and design updates on a regular basis. Launching a new site, redesigned from the ground up, isn’t an opportunity that comes up very often for us. When I learned that we were going to sign a contract with Microsoft to sell their Microsoft Press line of books, and sell that series of books through a new site, I was champing at the bit.

In 2012, the design team at Paravel worked with Microsoft to work out a responsive redesign of one of the busiest sites on the web. They wrote a few case studies(here, here, and here), which I passed along to the product folks at Pearson, along with examples of how the process matched our own responsive redesign work (and how it set standards that we needed to aspire to). I saw the chance to bring the design principles set forth in that redesign on the new Microsoft Press site as a great opportunity to push our work forward.

Solution

The 3-month timeline for the new site was a bit ambitious, considering the amount of changes they wanted from our existing codebase. I introduced two new things to our workflow that saved us time and made us more nimble.

First, we began using Sass, a CSS preprocessor. It had been on my roadmap for quite a while, and since we were building the site from the ground up, I saw this as a great opportunity to introduce it. It took a little time to ramp up, but when we got to crunch time later in the project, it paid off.

Second, we used Pattern Lab, the wonderful tool from Brad Frost and Dave Olsen, to work out our prototypes. I had shown Brad’s fantastic talk about Atomic Design to our UX and Development teams a few times in the past year, so the opportunity to put these principles into practice for this new project was quite exciting. Again, there was a bit of ramp-up time, but it really paid off in the end as change requests came in.

Getting Started

The initial design briefs that we received from Microsoft were JPGs embedded in a text file, with print-centric specifications (font size: 13 pt, for example). My first order of business was to study the existing Microsoft home page, compare it with the word docs, and create a color palette and universal text styles (as Oliver Richtenstein says, 95% of web design is typography). Once our colors and rhythm were established, I set about designing modules.

Color Palette and Headings
Color Palette and Text

Atomic Design

I wasn’t designing a collection of web pages, but rather a system. I chose to prototype what I knew would be the the most difficult or universal pages. That way, the hard decisions would be worked out early, and we could carry those decisions to the other sections of the site. Since it’s an e-commerce site, I started with the various combinations of product cover image/title/bibliographical info (each of these was an atom) that we would then use together throughout the site (these combinations were molecules). Once this was done, I grouped the molecules together in various organism configurations, which were then included in templates. This process took about three weeks, but by the end we had the common elements that made up 80% of our site. Now it was time to use them.

The Other Things You Might Like organism
The Other Things You Might Like organism

Template for the product page
Template for the product page

Production

In our UX group, our responsibilities range from initial concepts and wireframes, to visual design, to coding the final HTML, CSS and Javascript for production. We work with a great back-end development team, and our breakdown of responsibilities is: Get us the data on the page, and we will wrangle the code from there. We try to have functional prototypes for them to work with though, so they aren’t working in the dark and have some idea of wht the end result will be. That allows them to make sure we have everything we need, and it helps them spot any problems ahead of time.

For this project, we were able to point them to the Pattern Lab, and they could view the code to get the necessary HTML structure. Again, the ramp-up time to figure out the best way to use Pattern Lab paid untold dividends down the stretch. All of the major issues were already worked out, and it was a matter of fitting it all together.

Roles/Skills Used

On this project, I held the roles of UX Manager, IXD, visual designer, and front-end coder (HTML, CSS, and JS).

Working with the product manager, I distilled conflicting requirements documentation with the existing Microsoft.com site into a set of modular componenets that could be used to build the new site. I directed the work of the other UX person on my team on the reworking of the member services area and cart, making sure it followed the specifications that I put together.

Our work was done a week ahead of schedule, the client was happy, and the revenue from the site is growing each month, ranking nearly as high as our top performers after only a few months.

Leave a Reply

Your email address will not be published. Required fields are marked *