Rio Compass

Leave your thoughts

Back to college, sort of. Rio Salado College asked me to help them create hi-definition mockups for their new Rio Compass staff and student portal sites. I was instructed to rigidly stick to their current site brand look and feel… clean and boxy. I was allowed freedom for layout and new process and functionality concepts. My approach was simple wire-frame for data-grid positioning with usability reviews with PM & BA, alongside meeting with experienced stakeholders to better understand their existing processes. Then after functionality is ball-parked per permission levels, add in content and shadows for weekly hi-def design and usability committee meetings with the project stakeholders to fine tune. Hi-def mockups are always a better sell than the rough wire-frames. All 22 mockups were kept up daily due to process/usability feedback revisions on a shared server for full progress transparency.

I worked first on the staff intervention mockups based on existing and new requirements from the Rio Achieve committee input. After about 12 rounds, I hand coded a fluid responsive prototype for the DotNet programmer and marketing dept to refer to for styles.  I used bootstrap for some nav components as they also use that framework. Since the data-grid content was fairly tight, I created my own responsive breakpoints instead of using the built-in bootstrap grid in order to get fluid transitions at content stress areas when resizing. Also, they use Telerik widgets that generate tables for their data-grids… so I also used tables for my data-grids and targeted the responsive columns via css… leaving my table html barebones for better compatibility.  (css | jquery)

Then I began hi-def wire-framing the Rio Compass Student Completion Portal. The focus being an animated top progress bar concept…an impact-full device showing their academic goal progress. I was also tasked with designing a click-based planning tool (student) and check sheet (staff) to help out with student program planning. Then on to concepting combining a checksheet into the planner as well as a new checksheet creation tool… optimizing and simplifying the existing process. Also, I created other similar data-grid pages, dropdowns and modal window comps throughout as needed.

And finally, after all that was designed and new functionality added in the hi-def mockups, the committee began discussing a possible customizable student portal landing page…something to tie it all together. So I gave them a layout with a 3 column grid for easy responsive… one with their current branding and another shown above that leaned modern.

Overall, a top-notch and personable team to work with; really enjoy working there.