Portfolio - Design

Explore

Case Studies

Case Study: University Capstone

Responsive Website Design focusing on Eco-Friendly Solutions (2015)

Summary

As the Capstone Project for my BFA in Visual Communications, I focused on how I might help solve challenges relating to reducing waste. Building upon lessons learned studying recycling habits of University Students, and I designed a responsive Website to serve as resource to inform people about what, where and how to recycle.

Skills

📊 Quantitative Research (Surveys)

💬 Qualitative Research (Prototype Evaluation)

🖥️ Wireframes & Prototyping

⌨️ HTML & CSS

CONTEXT

Misunderstanding of Recycling Requirements limits effectiveness of programs.

Curbside collection, drop-off locations, and MRFs (Materials Recovery Facility) are just some of the recycling resources available in Indianapolis, a city with a population of over 800,000. Learning about recycling is a complicated task. Information is found across a variety of websites and downloadable documents. The goal of this project was to increase recycling and reuse of materials while limiting the waste of disposable items.

⁠

RESEARCH

Competitive Analysis

The first step was to conduct a competitive analysis. I studied DIY Websites as well as local recycling pick-up services and drop-off locations. In doing so, I was able to study where other solutions did not solve the problem and ensure I would create a unique solution.

Survey

Through an online survey, I reached out to learn about what my primary audience thought of the problem. 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 believe they know what to recycle. Many also reuse some items that could be thrown away and are interested in DIY projects to reuse disposable materials.

Design Facilitation

In the previous semester, I worked on a collaborative project with three classmates studying recycling within an on-campus residence hall at Indiana University Purdue University Indianapolis. Throughout the 12 week project, we facilitated design research to come up with a solution to the design problem within our context.

I was able to use this research as the foundation for this project. Though the two audiences are a bit different, I had already learned a great deal about recycling and how people would like to learn about it. This research helped me decide that a digital resource would be the best medium to inform people about what, where and how to recycle.

⁠

PROTOTYPING

Sketched Wireframes

I started to sketch out potential layouts for the website with quick, low-fidelity marker sketches to get my ideas on paper. Presenting this initial 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.

⁠

Digital Wireframes

The digital prototype seemed a little bit more “real” and participants were readily able to point out issues and make suggestions.

My main goal in the first round of testing was evaluating 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.

With the next iteration, 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.

⁠

Digital Mockups

My last step before coding the website was to create digital mockups and test them using InVision. Using InVision, which allows the creation of hotspots to link pages together, I was able to do another round of rapid prototyping in a way which was most representative of the final product without wasting time in the details of code.

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.

⁠

Explore the Prototype on Invision⁠

⁠

DELIVERABLES

The responsive website tested well with target audience

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 studying 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.

⁠

More Case Studies:

⁠

Case Study: Corporate Accounting⁠

⁠

Case Study: Project Management & BI Start-Up⁠

⁠

Case Study: B2C Website Redesign⁠

More Info:

⁠

Management & Mentorship⁠

⁠

Professional Experience⁠

⁠

Testimonials⁠

⁠

Email Me

⁠

Connect on LinkedIn

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.