Task-Driven Design

Prioritize functionality for end users based on their current tasks (ex: "setup system" vs. "interact with students"), and cater to their departments' roles & responsibilities (ex: "finance" vs. "admissions").

Home - Setup

The primary goal for this home landing page is to make sure the end user is aware of all setup tasks that need completed. The calendar widget (left bottom), in addition to alerts & notifications (right column) still allow for communication with student candidates - another primary need for users.

Home - Communicate

Look familiar? With the "setup" portion of the system established, the user's focus now switches to "communicating with student candidates". The goal is to provide users with the information necessary to be more efficient at their jobs.

Student - Enrollment

This view gives admissions counselors the information they need to help get candidates enrolled (and stay that way). Note the emphasis on the interactions icons on the top right, emphasizing the continuous need for communication.

Student - Financial Aid

This is an entirely different persona (relative to the "Student - Enrollment" design, above). The focus is now ensuring a financial aid office worker can help the student stay eligible for financial awards, such as loans and grants.

User Research: Card Sort

Recently, my UX team had the fortune to spend time with members of a Registrar Office at a customer school. One of the activities they participated in is called a "card sort", which helps us determine the navigation and information architecture of a product.

Step 1

Users are given a stack of cards, each with a product feature printed on it

Step 2

Users group the cards into categories, and provide a title for each category.

Step 3

Card groups are scanned (via barcode) in to the computer, and given the appropriate titles. This creates a "user model" for each participant.

Step 4

Using software called OptimalSort, the team compares all of the user models and calculates where they overlap or share similarities. This creates the "school model".

Step 5

On day 2 we introduced the school model built by OptimalSort. Participants worked as a group to flesh out any unknown or missing cards.

Step 6

The final model is created (including some tasks we originally missed), and can be used as a basis for the product's architecture and navigation.

UX Batch Edit

Users need a tool for making modifications to a large number of constituent records.

Step 1

The original state of the task is a "nothing selected" message, with the ability to search for or upload a file full of constituents to modify.

Step 2

After selecting 'Search', the system displays an advanced search slide-up window, which is used in various parts of the system. The user enters their search criteria.

Step 3

The system asks if the user would like to add to the current list, or replace it with the search results. There's an option to skip this window in the future, but it can also be viewed by selecting 'Settings'.

A 'Loading constituents' modal displays while data is retrieved.

Step 4

The search results are loaded into the main screen, where they can be modified or removed. Filtering and pagination allow for viewing specific constituents.

Step 5

The user can select which constituents to modify, and then chooses an edit action to perform. The remaining design work has yet to be realized, but the intention is to leverage existing pages in the system, and allow the user to review or change the edit actions before publishing to the data base.

UX Import Tool

Provide users with the ability to import various types of files, which contain new and existing data records. The goal is to minimize the amount of manual intervention on the part of the user.

Each task gets assigned an icon

I used icons as a sort of road map for my functionality. This helped minimize the complexity of each screen during design, and focus on the task at hand.

Icons fleshed into sketches

Added the minimal amount of functionality needed to accomplish each step in my hand-drawn sketches.

Reality check

Does each icon adequately represent the task it's associated with?

"Configure file" wire frame

"Clarify records" wire frame

Persona-Based Views

Provide a 360-degree view of student and faculty, based on several personas and their unique user stories.

These were part of a series of user stories which were fleshed out into wireframes to show the configurability of a single screen.

Advisor View of Student

"As an advisor, I need to view student information so I can provide academic advice".

Conversations Pop-Up

"As a faculty member, I need to configure my interactions settings so students can communicate with me appropriately".

Advancement View of Alumni

"As an advancement officer, I need to view alum information so I can solicit a donation".

Faculty View of Student

"As a faculty member, I need to view student information so I can discuss their progress in a course I'm teaching".

Provost View of Faculty

"As a provost, I want to review the performance of a faculty member".

Heuristic Evaluation

Perform an evaluation of existing designs to measure a product's usability.

Heuristics

Measurements of whether a UI design is compliant with recognized usability principles.

Severity

Allows evaluators to rank heuristic infractions as part of the results. This helps consumers of the document see where the real problems are, and prioritize fixes.

Results

Consumers of the document are able to see where usability problems exist, how bad they are, and (in some cases) what they can do about them.