A8: Interactive Prototype

Tanner Page
2 min readMar 8, 2016

--

Design:

For this version of my prototype, I reduced the scope of my mobile/web app to focus primarily on the list functionality in tandem with the ability to map/compare stores by the price of a selected list. I kept much of the same design, but expanded on higher quality and more realistic visuals. I also added tool-tips and popup boxes in order for the prototype to be more interactive and feel more complete.

Mobile Prototype
Web Prototype

Process:

I used the feedback from my earlier prototype to analyze and come up with a higher fidelity design for my next iteration. I also made the prototype more responsive, since the last version (mobile) version of my prototype didn’t use a dynamic panel in Axure so it took much longer to load each state of my prototype then I would have liked. For this prototype, I used Proto.IO to have a larger number of assets and available interactions so I could further expand the interactions I had from my previous prototype, such as by including transitions between states.

Analysis:

For this prototype, both of the two people I tested it on thought that I could have added more map/store functionality in addition to my improved list functionality. Both participants wanted to be able to select and store and see the items that that store had from their created list, in order to make higher level decisions such as choosing a certain brand of merchandise/produce over another brand (one participant gave the example of bargain toilet paper versus Charmin Ultra Soft, which are at two ends of the price spectrum, so my participant would have chosen a brand of toilet paper in-between something cheap/ineffective versus super expensive). Based on the feedback from my participants, I would also make it so that in the final iteration of my prototype, I would add the ability to change items in the list based on store availability and user preference.

--

--