In year 2014 I attended a course called Human-Computer Interaction by Scott Klemmer from University of California, San Diego. Even few years later I find this course very helpfull and eye-opening. Bellow is a project I made during this course. Each project phase represents one of commonly used design technique and it was reviewed by other course attendees.

The first week of the course was focused on finding a user need that could be satisfied during the course.

I used a research technique called Needfinding. I watched and asked people in my neighborhood to learn about their goals and to uncover their needs. This way I could uncover opportunities for improvements.

I watched 3 people during their daily activities and then I interviewed them to get a better picture of their attitude during these activities.  

After few days I found an interesting user need: challenges associated with waste sorting.

I also verified this user need by creating a online questionnaire to get quantitave data. The questionnaire is still accessible on Google Forms (in Czech).

The second task was to collect some Design Inspirations.

One of the main activities which could by done by the application, is to get information about near trash cans. Google Maps offer and interesting way how to visualize such information.

Waze is a project used for traffic monitoring, car navigation, or gas station locations. There is one thing which attracts my attention, the community aspects of this project. All available information are created and maintained by the community. I think the same model could be used for the cans fullness level or their location.

The application Traveler IQ Challenge teaches all kind of people basic geographical knowledge in a way which looks more like a game, but in the end, the amount of obtained knowledge seems to be pretty high.

At this point I knew the user need I would like to satisfy. Now it was time to define concrete user stories. In this case we should create two storyboards with different use cases for the selected user need.

To the next phase advanced however only the second storyboad called A good helper.

With clearly defined story and data from interviews and questionnaire I could proceed to wireframes.

Most real-world problems don't have only one exact solution and this case was no difference. Actually we were encouraged to create two different wireframes which should solve the same user story.

All wireframes were created using Balsamiq.

The Map version uses map as a primary viewport. On this view user can easily see near trash cans. The application allows user to navigate to trash can which fulfill his needs (trash can types, distance…). User can also check trash can detail to see or edit its fullness.

The second version uses more action-oriented user interface. All records provide information about fullness on first sight and the map view is visible only during navigation.

After processing the feedback on both wireframe versions it was time to create a high fidelity mockup. The most important feedback was that users don't want to start the application with a map view, they would like to see list of near trash cans with their fullness level.

The mockup was designed using Axure and I used features like Masters, Dynamic Panels, Events, Global Variables, or Repeaters.

With high fidelity mockup done it was time to evaulate them.

The evaulation was done by other course students and it was done according the 10 Usability Heuristics for User Interface Design by Nielsen Norman Group.

The full evaulation with my comments and outcomes is publicly available in document Heuristic Evaulation on Google Drive.

The second task in this phase was to prepare (but not to execute yet) an usability test. My goal was to think about these parts of usability test: Goals, Participants, Tasks, Feedback. All these information are publicly available in document Evaulation Plan on Google Drive

So the Evaulation Plan for usability testing is prepared and reviewed by other students. Now it was time to run the tests. But… how?

In year 2013 I read two books written by Steve Krug. The first one was an introduction into Web usability - Don't Make Me Think. The second one was a  how-to book for usability testing - Rocket Surgery Made Easy. With the knowledge from this book I was able to organize a testing session with 4 participants.

The testing session is described in documents Breakdowns and oportunities and Findings and issues. In short to prepare a proper usability test I had to do these things:

• Create a list of tasks to test.

• Decide the test format (Moderated In-person vs Moderated Remote vs Unmoderated).

• Choose desired results form (Think Aloud vs Statistical).

• Select test participants.

• Get feedback on the task list.

• Run pilot test.

Having done usability test I decided to take all the feedback and update problematic parts of the application. This update was done in Balsamiq, so it is low-fidelity only.

I decided to redesign the filters screen because I have found that users didn't use them much. I have though they could be very helpful with better visual design and grouping.

It was really great experience to try the full design process with weekly feedback iterations. Although I attended this course more than 3 years ago, I use the introduced design techniques in my everyday work.