Designing an Interactive System & Technology

November 2016 - December 2016 ​

OVERVIEW

HCDE 310 is a programming course taught by Sean Munson of the Human Centered Design & Engineering Department. The final project for this class required me to identify opportunities to build an interactive system. I designed, built, and justified a solution using Python and restful APIs. ​Note: This project was for learning purposes; Best Buy was not a real client.

PROJECT BACKGROUND

Over the course of three weeks, I created a mashup using API data from Best Buy's Products. This project idea was inspired by my experience of shopping at Best Buy. Due to Best Buy's myriad of store offerings, I often experience difficulty locating an item which leads to frustration. As a result, my solution was to design and build an interactive web application that eases the shopping experience for indecisive, time-pressured, and disoriented customers.

TARGET AUDIENCE

Online Best Buy shoppers who need guidance in selecting an item. In particular, shoppers who need help selecting an item that matches their search and budget criteria.

MY ROLE

This was an independent project where my role was Software Developer.

My responsiblities included:

identify problem

conduct client research

design the solution

do some pseudo-code

build the product

do some HTML/CSS to make the system more appealing

TOOLS

Restful API, Google App Engine, HTML, CSS, Eclipse IDE, VMware

METHODS

Python programming, systems design, sketching, virtual machines

THE PROCESS

WHAT

I chose to build an interactive web application that compares ratings, top review, online/store availability, price, brand, and sales between the top two products that match certain search and budget criteria. All of this data is collected real-time using the Best Buy Products API.

WHY

​An interactive web application offers a user-friendly approach to viewing a comparison chart. It also allows users to personally enter the products that they're interested in purchasing through a search bar. This approach allows the system to filter the user's selection and only select data relating to those products which increases efficiency in loading data and also eliminates any distractions that the buyer may experience when simultaneously exposed to many products. Overall, this project adds value by easing the users' shopping experience via a simple product comparison tool that'll aid customers in making their ultimate purchase decision.

HOW

Part 1 (week 1) Began by researching the BestBuy API and understanding its documentation. Used an interactive console (namely Ecllipse Software on VMware) to retrieve user input through basic Python, return JSON data from the API that matches the string parameters inputted by the user, and access the JSON file to obtain the product details (i.e.: top review, overall rating, availability, price, brand, sale, images, etc.).

Part 2 (week 2) Converted part 1 into an interactive web application where users can enter their product through a search bar. Users will also be indicate a budget on this interactive web application. Part 2 involved using Python and Google App Engine.

Part 3 (week 3) ​Used HTML and CSS to improve the visual design of the web application by incorporating Best Buy's brand colors, and experimenting with font types and webpage layout. Overall goal was to enhance the appearance for a more user-friendly interface.

FUTURE CONSIDERATIONS

​To improve the final product, I would experiement with advanced front-end frameworks using resources such as Bootstrap. Boostrap would have provided a more responsive, sleek, and intuitive web application.

FINAL DELIVERABLE

The final deliverable was an video demo of the overall use and functions of the interactive web application. I chose to create a video demo in case the data from the API got changed (which it since has). Please refer to this video demo for the end result.