My first project to utilize the USU Django infrastructure was an online voting application that students would use to elect the University’s student body officers.

This was a relatively simple project, but a good showcase of my methods for simple, intuitive user interface design with an emphasis on accessibility—all prototyped, designed, and implemented rapidly to meet a deadline.

After logging in, the system would automatically determine and show only the positions that the student could vote for based on their degree, their status as an undergraduate or graduate student, and other factors.

When a user would start typing a write-in candidate, I wanted to suggest the proper spelling of names that others had used, without any admin interaction in the process. To do this, I wrote a simple algorithm to aggregate the names of write-in candidates and only show the spelling of names seen most frequently. This had the intended side-effect of encouraging even more people to spell a candidate’s name correctly, thus making the election results more concise later on while still automatically mitigating spam write-in candidates (such as “Your Mom” or “More Cowbell”).

Accessibility

I wanted to make sure that this application would be usable by everyone in the campus community, especially students who may be accessing the web through assistive technology.

To facilitate this, I made sure that the underpinnings of my design followed web accessibility standards and I worked to make the UI as intuitive as possible. For example, here is the above ballot but with styles turned off:

This makes an important point: the styling of the elements to make the colorful ballot above is no more than creative use of CSS on label and input elements, with a dash of JavaScript to tie everything together. Because of this, devices such as screen readers could interact with the site just as they would with a normal form, and JavaScript degradation could be accomplished by simply exposing the underlying input elements.

Simple and intuitive design decisions—front and back—can greatly facilitate accessibility.