As part of the Activities Filter Pattern Redesign Project, I created a web prototype of the two most promising filter pattern concepts in order to evaluate them through a user study.

We are creating a new system for categorizing activities, based on categories and subcategories. In order to expose this new system to our users, we needed to create a UI pattern for filtering with these categories.

We had come up with two different concepts for an activities filter pattern, and I wanted to conduct an evaluative user study to help us determine which would be the better concept to choose to move forward with. In order to have a more realistic user study, and thus better data, I decided it would be beneficial to create a functional prototype using real activity data and the new activity categories. It's important to create the right fidelity of prototpye for what you are trying to learn in a study, and I believed that in order to get realistic feedback for a filter pattern, we would need to allow users to be able to interact with any filter and any activity.

I knew we had all the parts we needed; I just needed to figure out how to put them all together.

I began by determining the necessary types of data and their relationships, which I used to design the SQL database schema.

Next, I created and populated a database with the data and relationships from a spreadsheet which contained the category and subcategory names and how they map to each other.

Once this was done, I wrote a PHP script to parse another spreadsheet which had a list of every activity in Las Vegas, its unique ID, name, and which subcategories it belonged to. This script then inserted this data into my database.

Next, I wrote a web scraper to pull the remaining activity data off of our live site, including rating, review count, image URL, and price.

Now that I had all the necessary data in my database, I wrote the necessary SQL queries to select the correct activities based on which categories and subcategories users chose via the filter UI.

Finally, I built the prototype front end framework in HTML and CSS. This was the skeleton of the prototype, with all the pieces that were common across the two pattern variants. There was a div called "filter_pattern" where I would fill in the different code for each variant's filter UI. The underlying javascript code which detected the user's input, requested the data from the database, and returned it to be displayed as a list of activities was the same for both variants; only the HTML and CSS were different.

Using this prototype, I was able to conduct a realistic evaluative research study where I asked users to look for an activity that was interesting to them in Las Vegas, and they were able to browse and explore all 471 activities that we actually sell in Las Vegas using our new categorization, with each of the proposed filter patterns. The details of this study are covered in the Filter Pattern Concept Designs Evaluation Study project.

As a result of this project, I gained more confidence in my skills to see how many disparate pieces can be put together to create a new, useful whole. I saw that we had the pieces we needed to create a prototype which would give us the best feedback to help us make the best decision as to which filter pattern to continue to iterate.

In particular, I learned how to write PHP scripts to pull data from a .csv file, as well as wrote my first web scraper. I revisited SQL schema and query design for the first time in many years.