Yorkville High School Computer Science Department
Yorkville High School Computer Science Department on Facebook  Yorkville High School Computer Science Department Twitter Feed  Yorkville High School Computer Science Department on Instagram

Yorkville High School Computer Science

ASSIGNMENTS: No Current Assignments

User Interface Design :: Projects :: UI Project


This is a working implementation of your project. This project MUST be turned in on the due date since you will be given a presentation showcasing your project.

By the deadline your implementation should be complete in the sense that you are ready to test users on the tasks you used for your paper prototype. Your implementation should have both frontend and backend. User interactions should be live, not canned responses.

No written report is required for this part. Instead, you will demonstrate your implementation to Mr. Miller on the due date. You will have a 10-minute time slot. Within this time, you will have to:


Make sure all aspects of your user interface are accessible via keyboard if your interface will be run via a computer. Also, make sure your interface passes Section 508 and WCAG accessibility guidelines, if applicable. You can use the website CynthiaSays to test your site.

User Testing

In this part you will evaluate your interface with a small user test and write a final reflection.

Find at least 3 representative users from your target population. None of your users should have been enrolled in User Interface Design. All should be willing to participate voluntarily.

Prepare a briefing and tasks. These may be the same ones that you used in paper prototyping, but you may need to improve them based on feedback from the paper prototyping.

You may, if you wish, also prepare a short demo of your interface that you can use to show your users the purpose of the system. The demo should be scripted so that you do and say the same things for each user. It should use a concrete example task, but the example task should be sufficiently different from the test tasks to avoid bias. The demo option is offered because some interfaces are learned primarily by watching someone else use the interface. Think carefully about whether your interface is in this category before you decide to use a demo, because the demo will cost you information. Once you've demonstrated how to use a feature, you forfeit the chance to observe how the user would have learned to use it alone.

Pilot test your briefing, demo, and tasks, before you test your real users. You can use another member of the class for your pilot testing, if you wish.

Conduct a formative evaluation with each user:

You can choose to facilitate the user testing or take notes. You should enlist someone else, ideally someone who has taken User Interface Design, to fulfill the other role. You can use screen capture software such as Camtasia Studio if you'd like to supplement your notes.

Collect the usability problems found by your user tests into a list. Assign each problem a severity rating (cosmetic, minor, major, catastrophic), and brainstorm possible solutions for the problems.

What To Turn In

Make sure your final design is uploaded to the correct place. Somewhere on the site you can put "Designed and Developed by YOUR NAME, Class of YOUR GRADUATION YEAR" so you will leave a legacy at Yorkville High School.

Add a new section User Testing to your website with the following subsections:


Describe the final design of your interface (after implementing changes following user testing). Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).


Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.


Describe how you conducted your user test. Describe how you found your users and how representative they are of your target user population (but don't identify your users by name). Describe how the users were briefed and what tasks they performed; if you did a demo for them as part of your briefing, justify that decision. List the usability problems you found, and discuss what you did (if anything) to solve them.


Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your observations.

As usual, be complete, deep, and concise. Tidy up your entire site to make it a usable presentation of your term project. If your project changed direction or scope over the course of the semester, update earlier sections (such as the original Problem section) to reflect your final project.

Yorkville High School Computer Science Department on Facebook Yorkville High School Computer Science Department Twitter Feed Yorkville High School Computer Science Department on Instagram