User Interface Design and Architecture class

The project portion of the class was to break into groups and generate a project that we would go through all the phases of web site prototyping. The steps we went through in class are as follows:

  1. Sketch ideation of what the site would do and feature it would have.
  2. Low fidelity paper prototype of how the screens would look and controls placed on them.
  3. High fidelity prototype in tool ( Balsamic ) to run through detail interface design and functionality.
  4. Design review of the high fidelity prototype to optimize the navigation, features and look and feel of site.
  5. Iterations of the site to reduce the violations of Nielsens Heuristic principles.
  6. Build the functioning site.

Here are some work products that were submitted during the process.

Stock Flow Diagram.

Our project is a company called UTrain which allows content creators to post their training content for free to monetize ( under the UTrain brand ) or under their own brand name in exchange for hosting fees. A service that is similar to the WordPress Product but tied to a hosting agreement and focused on teaching/online learning.

Here is the Case Diagram for the site.

When we did our Paper Prototypes, each member of the team did a particular platform that the application needed to be available on. I selected to do mine on the Smart TV platform. Here is a screenshot of the home page on the Smart TV.

Once the low fidelity paper prototypes were done, we transitioned to the Balsamic tool. This tool was one of the most interesting tools we used in class.

The following was taken from our midterm submission which was the high fidelity prototype of the UTrain Site.

After submitting the high fidelity assignment, we evaluated each other’s work and used Nielsen’s design principles to critique the principles that were overlooked. Here is an assessment graphic I devised for the last group homework assignment which visualized the results of all the critiques.

Leave a Reply