Chris Basham

Interaction designer & Front-end developer

Portfolio

Kuali Student Design Guide

The Kuali Student Design Guide is an initial foundation for a design pattern library created to centralize and articulate user interface design decisions occurring within the Kuali Student products. The guide is meant to be maintained by Kuali designers and front-end developers, regularly updated as problems are encountered and resolved throughout development. Patterns are abstracted as nested components, following the Atomic design methodology. It serves as a daily reference for designers and developers, yet also invites the larger non-design community to see and engage in the process. Research and recommendations are initially documented as repository issues before being adopted into the guide.

Screenshot of the mobile and widescreen view of the Pagination pattern.

The Design Guide features a responsive design and statically generated content, making it both accessible and performant.

View the Design Guide GitHub repository

Course Registration proof of concept

Using the recommendations as outlined in the Mobile Strategies for Kuali Student document, a proof of concept for a university course registration application was developed over a period of six weeks as part of an initiation phase for the student enrollment product. The application features a responsive, mobile-first interface, developed in AngularJS.

Backstory

The Kuali Student project is a student information system established by the Kuali Foundation in 2007. Over the initial years, the primary objective was to build the administrative foundation, which included Curriculum Management and Course Offering. These applications defined essential relationships, such as:

With this data in place, Kuali Student started to prepare for Registration, which would enable students to search and register for classes for a given academic term. As the first student-facing application within this suite of tools, there was no precedent to follow, and all recognized how different of a user experience is needed when students, not administrators, are the primary audience.

In understanding that there were numerous unknowns regarding the best approach for either design or development, I authored a document listing a number of recommendations in order to guide the process along, including:

Read Mobile Strategies for Kuali Student

Backing these recommendations, leadership allocated six weeks to develop a proof of concept application that embodied these recommendations.

Process

While a separate team prepared the back-end to offer a web services layer, I spent most of the first couple weeks sketching and producing wireframes of the interface, keeping in mind small and larger viewports.

Sketch of a list of selectable university terms. Sketch of a course search form
A series of sketches explored how to navigate among academic terms.
Wireframe of course search form for mobile
Wireframes helped to define relationships within the interface and explore rudimentary interactions.

Leveraging my experience using the AngularJS framework the past year for Indiana University projects, I was able to quickly develop the general architecture of the front-end. Once the markup and styles fleshed out, data embedded into the markup was abstracted into static JSON fixtures, and the template was altered to be dynamically driven by these fixtures. With the fixtures as a guide, the services team was able to adapt the web API to match the fixtures. By the third week, the fixtures were starting to be replaced by live web services.

Templates were originally driven by static JSON fixtures, such as in the ScheduleService provider.
Once built, JSON fixtures were replaced by live web services, such as in the scheduleService provider.

Even though the proof of concept was primarily concerned with the technical feasibility of this approach, I was still able to receive rudimentary student feedback to guide refinement of the user interface throughout the entire project, by means of an Indiana University undergraduate intern.

In order to ensure basic accessibility, the proof of concept was frequently tested with a keyboard as the sole input device.

Outcomes

The proof of concept successfully demonstrated the rapid speed of development capable by decoupling the front-end from the back-end, the engaging user experience possible through modern client-side JavaScript frameworks, and the incredible performance of REST web services. Based on these results, the development team has continued this general architecture, producing higher quality user experiences in less time than sibling teams.

For the first few months following the proof of concept, I guided the Registration development team as they learned AngularJS, and I frequently provided feedback regarding both design and development directions.

The proof of concept was demonstrated to Kuali Student development teams at the end of the allotted six weeks.

Watch demo video GitHub repository

Reflection

Since the purpose of the proof of concept was challenging technical concerns over design concerns, a number of design compromises were made. By devoting either more time or a second designer to the project, more effort would have been placed in refining lower fidelity ideas before rushing into code; a visual style would be explored, especially regarding typography and color; and further feedback would be gathered from students, including those proficient with assistive technologies.

Course Search proof of concept

Tasked with building a proof of concept web application for Indiana University students to search and bookmark classes, this six-week project was the first attempt within the University Information Technology Services department to pair a client-side framework (AngularJS) with REST web services for a student-facing application.

Demonstration of the proof of concept course search and bookmarking application.

Watch demo video GitHub repository

Student Billing functional prototype

In late 2012, the Indiana University student billing user interface was redesigned in order to make it easier for students to understand their monthly statements and pay the balance on their accounts. After numerous low-fidelity design iterations and subsequent user tests, a functional prototype was crafted in AngularJS as a model for the production version.

Screenshot of the Amount Due and Account Status summaries in the student billing prototype.

The prototype features two primary views. Current Status provides an easy means for students to understand recent billing activity and pay the account balance, while History provides an archive of all past account activity.

View prototype GitHub repository

Past portfolios