DOCUMENTATION: DEVELOPMENT
The images above are the Gantt Charts showing my plan of action for this project. The first image shows the plan that I created during the first two weeks. The second shows the schedule I created after eight weeks, the halfway point for the project. Throughout the 16-week course, there were five main phases, each represented by a different color in the Gantt Chart.
The planning phase lasted approximately two weeks. This was the time to do secondary research to determine the context and then create a basic research plan and justification for this decision.
The exploratory phase was also two weeks long. The focus of this phase was to explore many possible solution areas through research.
Phase 03: Prototyping (Generation // Sense-making // Evaluation)
Nearly half of the semester, seven weeks, were spent doing generation, sense-making and evaluation. The purpose was to complete an iterative process of rapid prototyping in order to find the best possible solution for the problem context.
After the design of the project was completed, the next step was to create documentation of the design process. The result of this documentation is the website you are currently viewing.
Finally, the senior VCD class (approx. 40 undergrad students) put together a capstone exhibition show which spanned two evenings in order to share the projects we had done throughout the semester.
Design Methodology
One of the focuses of the VCD curriculum at Herron is "human-centered design." What this means is that each and every design decision should be made to improve the user experience. For this project, it meant that I did primary research in the form of surveying the target audience and conducting user-testing sessions.
PHASE 01: PLAN
Before the semester started, we were instructed to think over winter break about what we might like to concentrate on for our capstone project. Based on some work that I had done in pervious semesters, I decided that my context should be recycling or sustainability.
After this, I diverged a bit in the first week to come up with many possible areas to concentrate within that context. The result was that I decided to make some sort of resource to learn about the "three R's" of recycling: Reduce, Reuse and Recycle.
The schedule within this 16-week semester was left fairly open to us. It was important to plan the steps of the project carefully. My professors provided a loose guideline for the semester so that we could create our own schedule within it.
PHASE 02: EXPLORE
The first step in the exploratory phase was to do some basic secondary research about my project context. The main part of this research was to conduct a competitive analysis. In doing so, I was able to study where other solutions did not solve the problem and ensure I would create a unique solution.
To see the results of my competetive analysis, please visit the "Current Solutions" and "Limitations of Current Solutions" sections on the Justification page.
The next step was to talk with my primary audience and learn about what they thought of the problem context. Surprise! In human-centered design it is very important to include humans! The primary research I conducted before starting the design was done in the form of an online survey. I sent this out to classmates and through my Facebook page. I got a total of 44 responses, but only 20 of these were in my target audience.
While a survey of 20 people is not statistically significant, it was enough to support my project plan. Most importantly, I found that of the people surveyed, the majority recycle and know what to recycle. Many also reuse some items that could be thown away and are interested in DIY projects to reuse disposable materials.
There were a few different answers for what to do with an item when they were not sure if it was recyclable. Ten said they would throw the item away, many of these noting that it was too difficult to look up. Six participants said that would try to look it up online, and four would recycle the item either way.
To view a full copy of the survey and the results, see Appendix A.
In the Fall 2014 semester, I worked on a collaborative project with three classmates studying recycling within Ball Hall, an on-campus residence hall at Indiana University Purdue University Indianapolis. Throughout the 12 week project, we facilitated design research to come up to a solution to the design problem within our context.
I was able to use my previous research as the foundation for my project in the Spring 2015 semester. Though the two audiences were somewhat different, I had already learned a great deal about recycling and how people would like to learn about it.
To view the case study from the Ball Hall project, see Appendix B.
Design Criteria
Based on my intial research and exploration, I was able to come up with a list of criteria for what would make my project successful. These were editted through user testing and the rest of the design process. The final criteria are as follows:
-
The website must be easily navigated.
-
The website must have a search function that allows users to quickly find information they are looking for.
-
Users should have an incentive to return to the website.
-
Recycling information must be accurate and up-to-date despite rapidly changing requirements.
-
The website must be responsive and work well across a variety of digital platforms.
PHASE 03: PROTOTYPING
The first step was to sketch out basic potential layouts for the website. The first sketches were only meant to get my ideas on paper so they were quick and messy (see Appendix C). I talked through these with my professor and a few classmates to figure out what pieces made sense. After that, I printed out a header so that my second set of paper prototypes would be neat enough to test with potential users (see Appendix D).
Presenting this inital prototype required quite a bit of explanation to ensure participants knew what they were looking at. As such, they responded a little bit more to the overall idea, than to the specifics of the design. Simply working through the paper prototypes with potential users showed me places where the user flow was not functioning as I wanted it to. Through the participants didn't have anything specifically negative to say about the prototype, I was still able to observe the potential issues.
The next step was to move my prototypes to the computer. Using Illustator, I created digital wireframes. I considered placing these wireframes into InVision, a digital protyping application, but decided that it was unnecessary considering the time required to do and the ease of user testing with paper prototypes.
Now that the prototype seemed a little bit more "real" compared to the hand-drawn prototypes, participants in the user testing were more readily able to point out issues and make suggestions. The biggest point of concern with the first digital prototype (see Appendix E) was the system for filtering. A few participants noted that they prefer to see what the criteria for filtering are while the results are filtered; others mentioned that they preferred being able to see more results on the page without scrolling too much. This clarified that the filtering process needed to be revised.
When I tested the second digital prototype (see Appendix F), the comments were generally positive, with participants reporting that the site seemed logical and easy to navigate. A few noted that it was hard to judge without more visuals, but they thought the layout made sense.
Using all the feedback I had received from my user tests so far, I took a look at the user flow for the site. It ended up being surprisingly simple, but it was still a good exercise. Taking the time to really think about the ideal user flow helped simplify tasks to improve the user experience.
I also made a few different style tiles (see my blog post about style tiles here). These helped me think about what visual aesthetic would make the most sense for my site and users so that when I began working on the page mockups, I would have a set of visual guidelines.
My last step before coding the website was to create digital mockups and test them using InVision (see Appendix G). Working from my styletiles and digital wireframes, it was pretty easy to put together something that looked real!
Using InVision, which allows the creation of hotspots to link pages together, I was able to test this prototype in a way which was most representative of the final product without wasting time coding something that would still have significant changes later.
I had a small problem with testing this prototype because some participants were simply impressed with what it looked like and delighted by their ability to click things on the page. However, even once they got past their initial excitement about how "cool" the site was, there were very few things that participants found problems with. In fact, my most useful feedback came from the participants who were also my classmates, as they had advice on how to make the visual design better.
Since my user testing with the digital mockups went so well, I decided I was ready to move on to the final phase of prototyping: coding. I had only worked a little with HTML before, and I had definitely not tried to make an entire website, especially not one that was responsive. My challenge was to use Foundation, an open source front-end framework created for developing fully responsive web apps, and teach myself HTML and CSS in only 8 weeks.
After watching a few tutorial videos on Lynda.com and extensively reading the Foundation documentation, I was ready to dive in. It was certainly slow going at first, but as I began to become more fluent in the language, the speed significantly improved and I really enjoyed the process.
To view my final annotated solution, please see the Solution page.
To view the live site, please visit: http://pages.iu.edu/~gkenyon/
PHASE 04: DOCUMENTATION
While finalizing my website and tweaking issues in the code and visual design, I also spent a great deal of time documenting the process. This required going through everything I had done throughout the semester so that I could gather all of that information into one place. The result of the documentation is this website.
PHASE 05: EXHIBITION
The culmination of the Spring 2015 semester was our Senior design exhibit, Momentum. Putting together this 2-night exhibition was one of the focuses of another class, VC6: Portfolio. The goal was to present our capstone projects and portfolios to show all we had learned in our undergraduate careers.
To showcase our capstone projects, we each created a process poster to hang during the show which explained our problem and solution. To view this poster, please see Appendix G.