CSC318: Design of interactive computational media

Project Summary

The focus of this course is on the design of interactive computational media that enhance and support the cognitive, communication, and creative processes of their users, and on user interface design for computational media. Throughout the course, students will work in groups of three-four on a project to apply user centered, iterative design of prototypes of computational tools appropriate to the needs of a specified user group. Students will learn about users & conceive, design, prototype, and evaluate a design.


1. to provide the future user interface designer with concepts and strategies for making design decisions
2. to expose the future user interface designer to tools, techniques, and ideas for interface design
3. to introduce the student to the literature of human-computer interaction
4. to stress the importance of good user interface design
5. To work in multidisciplinary design teams

Technologies Used
Since this course is not a programming course, there aren’t any programming tools used. This course focuses on the concept of design and prototyping, in which case tools such as Adobe Photoshop, and simple pencil & paper are used to sketch out the UI and other parts of the prototype. For presentations, Microsoft Word and Microsoft Powerpoint are used.

Responsibilities and Roles
I worked with 4 of my CS Peers on this project; our parts were usually decided upon as a group. My responsibilities throughout each stage include:

-Checking over everyone else’s parts to ensure fluidity and coherence

-Summarizing the field studies conducted including observations, surveys, questionnaires and interviews

-Writing up the final summary after each stage

-Fleshing out ideas for the design requirements

-Listing the evaluation plans we used in our project, including heuristic, cognitive and think aloud

-Discussing and summarizing the results of the evaluation plans

-Presenting results and criticisms of our evaluation plans to the class

Project Details

Our goal is to design an efficient, time saving device/software for people to shop for clothes. This was a sub-problem of the main problem presented in this course, which was to help people better manage their clothing. Clothes are an everyday part of people’s lives and we want to minimize the time and effort required to choose and decide what to buy and wear.

Our primary stakeholder group are people aged 18-29. Since most of our studies and research were conducted on people our age, it makes sense for our design to appeal to this target audience.

Design Requirements:
Pulling from our functional,technical,user,usability and environmental requirements, these are the key requirements:

-Provide locations and directions to stores of interest

-Provide notifications about events, such as sales or limited time offers or availability of items of special interest

-Learn user preferences by gathering user shopping habits and preferences

-Enable user to specify special items of interest and use the information during shopping sessions

-Ensure portability of solution so that it can be accessible to the user at all times

-Ensure compatibility with other platforms and electronic devices

-Ensure privacy when necessary and filtering of messages based on message priority and user preferences

-Allow uninterrupted shopping experience

-Provide an affordable solution for individuals with lower income

-The solution should minimize the amount of effort a user needs to perform in order to start using the application

-Solution should interact with environment (nearby stores, kiosk, and information booths) to collect information relevant to users shopping session

-The solution should be able to locate the user in real-time

-The solution should provide means of connectivity with the environment


User wants to set his/her preferences
User wants to set his/her preferences

While the application will learn user preferences from user’s interaction with the application and information provided by the stores where the user shops, it provides functionality for the user to review and adjust any preferences. Additionally, before the user starts using the application for the first time the application will ask her to answer a few questions so that it can provide relevant information about clothing stores that cater to the user.

User wants to locate a store
User wants to locate a store

When a user wants to go shopping for clothes she can search for a particular store, item, or brand using the search feature. The feature will perform a keyword-based search and will return the results in form of shopping center locations together with details about the shopping centers and why they were chosen. Additionally, the user can check frequently searched keywords to be included in the search.

Shopping for clothes
Shopping for clothes

An additional example with our physical prototype giving an example of how someone would interact with our device if he/she wanted to go shopping. (From left to right): First screen shows main interface menu. Second screen shows the list of searches that user has saved with search button. Third screen shows a Google Maps-like interface depicting bubbles of relevant stores inside a mall. Fourth screen shows
information pertaining to a store when a bubble is clicked.

Sketch showing multi-platform capabilities
Sketch showing multi-platform capabilities

The sketch shown above was made to show how our application would look like on different devices. In this case, the sketch shows the application on a Blackberry, an iPhone, and a laptop. The purpose of this sketch was to show to variation in size of the interface on different devices. This sketch shows that the application can be supported on different platforms but does not compromise in terms of how much a user can see.

Evaluation plans
We decided on three evaluation plans: Think aloud (which allows users to give feedback), Cognitive walk through (which allows peers to give feedback) and heuristic evaluation (which allows for in-depth evaluation of all criteria).
In the cognitive walk thorough and think aloud, the following tasks were performed and feedback were given on them:
-The task of setting up user preferences and searching for a particular item in the area.
-The task of locating a store after inputting their location.

In the heuristic evaluation, our software was evaluated based on the following heuristics (Nielson’s heuristics):
-Visibility of system status
-Recognition over recall
-Aesthetic and minimalist design
-User control and freedom
-Consistency and standards
-Flexibility and efficiency of use
-Recognition, diagnosis and recovery from errors
-Help and documentation
-Error prevention
-Match between system and real world

Improvements and Final design
The Preferences section of the application will be redesigned so that there is no need for the user to configure any preferences the first time she uses the application. Additionally there will be no need for the user to enter information about gender, age, sizes, or preferred stores. The application will infer this information from user’s shopping habits.

The improved design will only allow users to review and possibly delete preferences that application collects from user’s shopping habits. The information stored in the preferences will include: shopping frequency and information about different garments purchased at those stores This information will be used by the application to make smart suggestions and better prioritize search results for the user.

The store locator feature will be improved by making changes to the way user interacts with the search results. Namely, once user enters keywords into the search field and clicks on the “Search” button the application will still display a map centered at user’s current location and mark different shopping centers located in the vicinity. Shopping center/store markers will now have names listed alongside search priority number to make it easier for the user to understand the meaning of the markers. Additionally the names will be underlined to afford clicking on them.

The second difference is that once user clicks on a store marker, the application will display a “popup” over the map which will still point to the location of the shopping center and display a list of stores in this shopping center together with a short-list of items relevant to the initial search keywords below each store name. This will address the lack of connection between search keywords and search results, as well as problems of memorizing which marker user clicked on to get the shopping center details. Each of the stores in the list will be underlined to afford clicking on them. This action will result in application displaying a detail page for the store together with a longer list of relevant clothing items

Phase 2 – Field studies & Design requirements
Phase 3 – Prototyping & Evaluation plan
Phase 4 – Results/Critique of Evaluation plan & Prototype improvements
Github Repo

  • Kashif

    I am thinking of taking this course this winter. What is the marking scheme? are there any midterm or finals?

  • Hey, there is a final and the marking scheme consists of the separate project stages (G1-G5), the presentation, and the final. Hope that helps.