The University of Alabama

Case Study
Stepshow Judging Application

Project Overview


Responsive Web Application

My Role

Project Manager
UX/UI Designer
Front-End Application Developer


Mobile Web Development
Technical Documentation



Project Summary

Every year at schools around the nation people gather for Homecoming Weekend in the fall. Current students, alumni, and community members enjoy the planned festivities throughout the weekend while supporting the school.  In 2013 The University of Alabama, I wanted to raise the bar a little by incorporating more technology in the NPHC stepshow competition. I did some after hours work to come up with some design concepts that would work for the contest.

My Role

I led the UX/UI design, prototyping, project management, and development for this project. I worked with 1 other full stack developer, our director and a student worker on this project. The other develop helped me with database setup and back-end calcualtion for the administrative system. My student work helped with testing the iPad at the event venue before the shows.


After coming up with some ideas on how to execute a potential solution for problem, I spoke with my supervisor about the idea and he liked it. We set up a meeting with the Homecoming committee to discuss our options and Use Cases. During our meeting, we asked them about using this idea for several events throughout Homecoming and they agreed pending testing of the applications. After our discussion we came up with two User Roles for the system, Contest Judge and Contest Administrator.

Staff Homecoming Committee

Staff Homecoming Committee

Homecoming Director Meeting

Homecoming Director Meeting

Student Homecoming Committee

Student Homecoming Committee

Homecoming Director

Homecoming Director Meeting

User Roles

Contest Judge

Contest Administrator


Based on the discussion we had in our meetings, I started to do research to come up with some ideas. I looked at some of the other projects within our group for reusable concepts and looked at out of the box solutions. After doing some research I made a decision to design and build a custom solution as to keep costs down for the project. I also used a similar design that I created from another project to get started on the process.


I came up with an idea for the judges to use an iPad to enter in the scores for each contestant during the preseatation. I would use grid design that would allow the judges to pick a number for each category that needed to be enter. This would would be easy for the judges to use since we would have much time to train them on the system. Below are some sketchs of this particular idea.

Admin Sketch
Front grid sketch


Color Style Guide

Crimson color style


Light gray color style


Dark gray color style


Functional Design 

Judging System
Judging System admin


Along with the Front-End design, I added an administrative system that would allow the administrator to view the results. The results from the judges would be enter into a database and the results would be calculated in the back-end system. From here it would be easy for the administrator to view the results instantly and determine the winner of the contest.

Administrative System Design


As a result of this project, we received a lot of positive feedback from the Homecoming Committee and some students who attended the event. As a part of this project we created a Mobile survey that would allow people to rate their experience. In addition, this event ran more efficiently and reduced the overall time of the contest. Finally, the system was used for several years after it was created for the first. My team and I evaluated the first version of the project and made changes as needed.

Stepshow 1
Stepshow 2

View More Projects

Previous: Fusion 

View Case Study

Next: MyTest

View Case Study