Challenge

For this project I created mobile versions for three sections of the Woot app and mobile site. The mobile site had been using scaled down versions of the desktop web pages, which resulted in a sub-optimal user experience.

The pages in question were: the Woot shirt catalog, the Woot shirt derby, where users voted on designs to include on the site, and the Woot blog page. This is what their old versions look like, as you can see content is being cut off on a phone screen.

Methodology

I began with the blog page. It was the most straight forward of the pages, and by completing it quickly I could pass it on to development while I moved on to the more complicated pages.

Derby Pages

I took inspiration from apps like Tinder. I wanted users to vote on every entry possible, and the research I had indicated the Tinder format was excellent for that purpose. I also wanted to create a more standard voting format as an alternative.

Two column shirt catalog.

The final page I worked on was the shirt catalog. I originally went with a two columns design with simple sort and filter options.

Single column shirt catalog.

However, this simply didn’t allow for all the relevant information to be displayed in a pleasing manner, so I moved to a one column format, using sort/filter menus similar to Amazon.

Catalog red-lines.

After this design was approved by leadership, I created redlines and handed it off to development.