STAR Mobile

Project Goal

star-mobile

This project was done for ICS 665 User interfaces and Hypermedia to solve the problem that the current interface for student’s to view their grades and requirements is not user friendly. In this project, I hoped to use responsive design and icons to represent aspects of a Bachelors degree that have been fulfilled. Also, the graph represents the current rate at which the student will complete a degree. As the goal of immediate project goal was to visualize a student’s data accessible all devices, the current demo has only static dummy data.

In order to place a true value on this interface, the future of the project will rely on a restful backend to retrieve the data. At the moment, the backend is very much a work in progress to ensure security yet flexibility.

Project Demo
http://star-mobile.herokuapp.com/

NOTE: Please fill in the login form with any information: user and password are acceptable.

Issues
Since STAR is used across the 10 UH campuses, a student’s data will vary from campus to campus due to each campus having its own policies regarding graudation. For most data points, this can be addressed by only showing data. All business logic is handled by SQL stored procedures, so the process can be boiled down to a data’s availability in the stored procedure’s results.

What is the process to choose appropriate icons? Could an icon be too ambiguous such that it may signify two different meanings? Does the icon indicate action or topic? When using icons, these are some of the questions to aide in determining the relevance and significance of an icon. Generally, the appropriateness of an icon may be decide by whether its usage is widely accepted.

Software Used
For this project, the following are used:

Server

Node.JS
ExpressJS

Basically, serves static resources and student data. ExpressJS was necessary in order to emulate asynchronous requests without using JSONP work around.

Views

YUI 3
Handlebars.JS

CSS

PureCSS

Typography

Font Awesome
Google Fonts

Build

GruntJS
grunt-flex-handlebars

Final thoughts
This was an interesting experience with writing a responsive single page webapp for all devices. Although I am familiar with icons, fonts, and the css packages, this was my first venture into single page application (SPA) territory. SPA is not very significant other than certain considerations such as CSS needs to be unique enough to properly handle all views. In addition, I had developed https://bretkikehara.wordpress.com/grunt-flex-handlebars/ to aide in precompiling HandlebarJS templates on the fly to better mesh with the YUI ecosystem.

Special thanks to http://colorschemedesigner.com/ for help with choosing a theme.