Digitalizing analogue processes for university employees.
Summary
The Services team at the head office of Université du Québec (a network of universities across the province) was working on a platform that would replace paper forms. An initial design had already been proposed internally for expense reimbursement requests and the team wanted to use Google's Material Design to continue designing interfaces for other types of requests. Our main objectives for this mandate were to (1) evaluate the interface proposed internally for Expense requests and make recommendations for UX and usability improvements, and (2) design a new interface for Staffing requests, based on the improved Expenses interface.
My Role
Myself and a colleague in my Master’s program produced design work and acted as consultants on UQ team’s internal design strategy. Together we established a research plan for auditing and testing the initial interface, carried out the tests and produced updated wireframes and visual designs for the team.
Outcome
In collaboration with the head office team, we built a solid foundation for the digitalization of their internal processes and developed the necessary guides and standards for the team to continue designing the portal independently.
Process
Key Considerations
Diverse audience
Both request platforms were to be used by employees from various departments and positions. These employees had different goals and different levels of experience with administrative tasks.
The main categories of users:
Those who submit requests for themselves;
Those who submit requests for others (ex. administrative assistants);
Those who need to view or approve requests.
Flexible Needs
Beyond the need to serve different types of employees, the platform also needed a certain amount of flexibility to allow exceptions or edge cases that occurred relatively infrequently.
The biggest challenge was therefore to enable employees to complete requests that included exceptions, without eliminating functionality or creating unnecessary complexity for those submitting common/frequent requests.
Clarity & Consistency
Another challenge in this project was transforming what were essentially long and complex paper forms into a digital format that would allow for quick feedback and / or approval of requests.
Complex forms can easily turn out to be confusing or frustrating, especially when the people who fill them out don’t do so frequently. We therefore made it a point to prioritize clarity and precision as much as possible (with regards to input fields and instructional copy) while navigating some institutional constraints.
Evolution of Staffing Requests
Diagramming the information flow
Following interviews with stakeholders and users of the current system, we mapped out all mandatory and optional information according to the types of staffing requests that could be submitted at any given time. This included conditional logic that would show or hide certain steps depending on previous answers.
Establishing layout & hierarchy
We used wireframes to block out priority information for each type of form. We used extremely low-fidelity shapes to find the appropriate sequence of steps and then updated the wireframes with more fidelity and more detail to work out what specific input formats we might use for which type of information.
We validated the logic with the internal team to make sure it captured all of the required information.
High-fidelity mockups & prototype testing
We were able to quickly get started on the design of detailed interfaces thanks to the Material Design components and our audit of Expense Reimbursement Requests in Phase I.
We used the Moqups web application to create a clickable version of the interface, which we tested with current users of the form to validate hierarchy, clarity, and usability.
Iterative design and standardization
Following usability testing and stakeholder validation, we revised some interface details to make improvements and ensure the components were being used consistently. Then we laid out all relevant components in Moqups so the UQ team could use them to keep working on design internally.
Key Design Decisions
While the purpose of the employee platform was straightforward, one of the bigger challenges lay in using the right layout and appropriate interactions to communicate the kind of information that was required of our users and when/where to enter it. Here are a few of the deliberate choices we made for our final designs:
Segmentation
Dividing the interface into an easier-to-manage sequence and using a progress indicator helped employees anticipate next steps.
Contextual focus
Using modals for more detailed and demanding tasks allowed employees to focus on one task context at a time and reduce their cognitive load.
Auto-suggest and free input
The combination of a drop-down list with dynamic suggestions and a free input field gave employees the option of quickly choosing from common responses or submitting an alternative response for exceptional cases.
System safety nets
System processes such as automatic updating and saving of drafts were meant to prevent employees from losing progress or information.
Complementary mobile experience
Giving priority to certain actions that were more likely to be performed on the go (rather than showing employees the forms in their entirety) was intended to split the workload into smaller chunks that require less effort.
Through this project, I became familiar with Atomic Design philosophy and the Material Design framework. This was also an excellent opportunity to learn to balance specific input and requests from a client with UX best practices and find a common ground that satisfies both.
