Methods Used
- Literature review
- Contextual inquiry
- Affinity diagramming
- Personas & scenarios
- Paper prototyping
- Hi-fi prototyping
- Usability testing
Technologies Used
- HTML
- CSS
- JQuery
Home > Portfolio > Shopping Cart Redesign
Redesigning the Online Shopping Cart Experience
A project to create an innovative new shopping cart experience for apparel websites.
Date: January-April 2008.
Teammates: Gaurav Bhatnagar, Maurini Strub, Beilei Zhang, Lingyun Xu
Course: SI 682: Interface & Interaction Design
My role: Most group work was done collaboratively, but I did a large part of the hi-fi prototyping work and built the entire "Outfit Creator"
Problem
Fry, Inc., a local Ann Arbor ecommerce firm, develops ecommerce applications and solutions for hundreds of retailers. Always looking to be innovative and on the cutting edge of ecommerce technology, Fry approached our SI 682 team with the task of designing a better shopping cart interface for apparel websites.
The shopping cart is paramount to the online shopping process - it marks the end of the shopping process and the beginning of checkout. We set out to discover how people use the cart when shopping online, to identify the major patterns in user attitudes and behavior that would later inform our design.
Process
Above left: Showing our affinity diagram to the client. Above right: Sketching some lo-fi prototypes.
We started out by looking into existing literature on consumers' online apparel shopping habits, and also interviewed 12 users about their experiences. We created an affinity diagram to capture our findings, which showed us that there are many issues with current online shopping carts that keep them from completely supporting users' common tasks.
After creating personas to represent the different types of shoppers we had discovered, we started brainstorming by sketching ideas on whiteboards and paper. As we iteratively got feedback from users, we refined our ideas to create a final high-fidelity prototype, which we created using HTML and CSS. In hindsight, coding was not the greatest method, as it made it harder to make changes and focus on the design.
Result
Our final idea was to have a sort of "mini" shopping cart that would appear on each page of the apparel website, to allow easy viewing and editing of items in the shopping cart. We also came up with the idea for an interactive "Outfit Creator" for those online power shoppers who love any features that make shopping more fun and interactive. The Outfit Creator also makes it easier to view a store's entire inventory on one page, by scrolling through the clothes in each category.
Click the image to launch the prototype.
Warning: It's a prototype, so it's buggy!