Interactive Prototyping


The Original System Diagram.

The crazy system that started it all. We were amused and surprised to realize exactly how hard candy and chocolate is to organize!

Candyland | System Diagram

Candyland Prototype: Version 1

The idea was to have a non-grid like visual arrangement of candy images for the user to browse with. The various steps in the first 3 screens confused several users. The scale differences between the parent element of Candy and its child elements and the placement of Candy still on the page, confused a few users. Users also mentioned that they wished they could select more than one.

Screen 1: The Homepage.

Candyland Paper Prototype

Screen 2: The Candy Page.

Candyland Paper Prototype

Screen 3: The Candy Page (Rollover Effect).

Candyland Paper Prototype

One of our most interesting and important observations was that we did not make the objective of our prototype clear in the beginning. Not wanting to bias the user experience, we made it seem that it was up to the user to browse when in reality the steps had been predetermined by us to lead the users to Strawberry Hard Candy.

Initial feedback was that there were too many steps for the user to get to the grid page with all the search results. (Also, due to having too many steps leading to the grid page, backtracking to the visual browsing system was a bit tricky.) Once there, however, they found the grid page to be useful and easy to navigate around.

Search Results.

Candyland Paper Prototype

Search Results: Detail

Candyland Paper Prototype

During this first prototyping session we fixed several kinks based on the feedback we got. We made the links clearer, added tiny post its to increase quantity in the cart and also left the main template the same by cutting out the center. This way we could change the center content during prototyping without having to add the static elements of the template to it.

All Prototyped Pages from First Session (in sequence).

Candyland Prototype: Version 2

We discussed all the feedback from the first prototype testing session and made many edits based on that. We made our dynamic navigation system for initial browsing a lot clearer by adding magnets(!!!). We also reduced the initial browsing system to one page by moving things around on the same page instead of taking the user to another screen.

The New Homepage.

Candyland Web Site Prototype

On product and search pages, we added pop-ups using post-its for a quick add to cart option and also for a pop-up that tells the user when the item is added to the cart. We also added a cart screen with a express checkout option and a regular option. (We informed the user before starting that they were already signed in, and that the system has their shipping and payment information stored in their account settings). The grid page had dynamic search options on the left with a hide/show menu divided between flavor, texture, price, brand—and this time, we informed the users ahead of time that only the options underlined in blue were the active links to avoid any frustrations during testing.

The Magnet System.

Candyland Web Site Prototype

Candyland Web Site Prototype

Candyland Web Site Prototype

During the testing session we informed the users that the goal was to search for Swedish Fish candy. (One user mentioned the confusion between Swedish Fish being gummy or chewy…perhaps something for future delicious taste testing!) We also added shipping options and clarified the cart options by adding another screen in between sessions as a response to user feedback, as well as adding active links for the Candy and Chocolate tabs on the top of the screen.

The Candyland Prototype Structure.

Candyland Web Site Prototype

Overall, our second prototype was successful in achieving the goal, thanks to multiple users testing and giving feedback. The dynamic interface with the magnets really helped give a much better sense of the fun element we had been trying to achieve. Explaining the goal in the beginning led to a smoother navigation as it didn’t make it seem like there were less options, just that they didn’t lead to Swedish Fish!

Video documentation from all sessions of user testing are below. Watch or scroll through to see our various prototypes in action, as well as the changes we made throughout the process.

Video: User Testing (All Sessions).

Category : Interactive Prototyping | Spring 2011 | Blog

Assignment: Sketch a diagram of a system that is part of your day-to-day life. I chose to diagram the relationships present in the system of a soccer team. While I had originally intended the team itself to be the upper bound, I ended up extending it to include the league in which the team participates as well. The sketch is below, spanning from the soccer league (“League”) on the upper bound, and classes such as “Cleat” and “Sock” on the lower bound.

Soccer System Diagram

Category : Interactive Prototyping | Spring 2011 | Blog