UI UX Case Study: Corporate Training Website
- Duration: 6 weeks
- Tools & Software: Adobe XD, Adobe Photoshop, InVision
- Team format: I was the sole UI UX Designer working in collaboration with content writer and consultation from lead project developer
Overview — What is CT4CP
I was given a great opportunity to hone my UX skills by creating a corporate training platform provided by a prestigious post-secondary institution.
Many companies invest in corporate training for their employees but it is not uncommon for learning and development activities to not be “in line” with the strategic goals of the organization.
This PROJECT, is a website that is targeted towards managers and business executives. The website starts with having users fill out a self-administered questionnaire that assists them in determining the organization’s goals and then find courses and development opportunities to match these goals. The PROJECT allows the function to create training plans with these courses with specific individuals or departments.
** the project below has been modified and core key features not shown for confidential reasons **
defining user’s main goals (user flow) + keyfeatures
Paper Wire frames
After identifying the user flow and key features, I sketched out some paper wire frames to brainstorm a layout on how to include all the features in a clean, usable interface. Below are examples of home page sketches done during the initial meeting.
Mid Fidelity Prototype
I created mid fidelity wire frames with several variations, getting feedback from both my clients and user testing to identify what made sense and more importantly, what didn’t. It was during this phase that my clients changed the formatting and I would go back to creating a user flow and another mid-fidelity prototype until things were looking good and we progressed further.
Design Decision #1 — Sliders vs. Drop-downs
I asked 12 individuals on which method of comparison they preferred and 8 of the 12 respondents said they preferred drop down menus; although it enforces more clicks, they are instantly recognizable in functionality. None of these designs made it to the final round, but the drop down testing reflected onto the final page iterations.
High Fidelity Prototype
I inputed colors and graphics onto the wire frames in creating a high fidelity prototype, which were also re done several times to reflect changes in the user flow and new additional features.
Design Feature #2 — Print/Share Training Plans
A big feature we incorporated into the PROJECT was to be able to organize and print/share training plans. As you can see below, filters on the left panel allow users to select what is shown on screen (which can be printed). This was inspired by fashion websites which have great filtering options that allow users to find what they’re looking for.
We debated on whether to organize the training plans by the skills being trained (left) or by the employees being assigned (right) and eventually went with the first. Although this format was less “employee-centric”, it allowed for less training plans to be created; the alternative would create a mess as there may be hundreds of employees but only several learning and development focuses.
Design Feature #3-Adding Employee Groups to Training Plans
As a team we debated how we would formulate the training plan layout. To reflect the previous design feature, we decided to organize the training plans by training activities (right) instead of organizing them by employees (left). The left design allowed for multiple training plans to be grouped under a single employee or department (employee list) while the right design allowed for multiple employees/departments to be grouped under a training activity.
Conclusion / reflection