Project Overview
MSOE's current Handshake platform has some limitations in how students register, fill out their profiles, and set the search criteria to find the most suitable and relevant internship opportunities.
​
Our team was tasked to develop a navigation design that’d let students access and update their profiles easily, adjust search settings, and have direct access to career services and events information.
Discover
To better understand how a User can navigate an internship platform, I explored and compared how other job boards function, incorporated some of the discovered tactics into our prototype, and collaborated with the team on how to avoid the flaws seen in the compared websites.
Define
Based on our collaboration and team findings, it was established that we need to devote special attention to the homepage & login, career services, user profile builder, internship search, and events sections of the prototype. The goal is to ensure that the navigation across these sections has enough flexibility and that the filtering mechanisms align with the candidate's needs.
Develop
During the early prototype building stages, I experimented with different progress bar versions and concluded that the website version should have a horizontal progress bar while the mobile version - vertical.
Deliver
Personal Contribution - User Profile Builder
​
The rationale behind the profile builder was for the user to have the ability to build their digital resume gradually. The wizard takes the user through stages, from general information through the last stage and the final submission. The idea behind displaying the digital profile first wasn’t only to show the user information when it is completed but purposefully show the areas yet to be completed. This way the user can see what’s missing and decide if they want to provide the missing information or leave things as they are.
​
Both the round buttons with symbols of the wizard and words that indicate application steps, are clickable for the user’s convenience. To reinforce the visibility of profile levels of completeness, I've also provided three different colors as indicators: grey means fully or partially completed, black - the user is currently accessing this stage, and dark blue - the category hasn’t been accessed or touched by the user yet.
I chose to give the forms an overlay display, meaning that once the user taps/touches one of the profile stages, for example: “skills”, the form with wide margins pops up over the wizard screen and offers enough visual space with minimal obstruction. If the user wants to go back to the wizard display, he only must click “Save & Return”.
To view the complete digital profile, I added the sandwich menu bar that opens the list of subcategories on the digital resume, such as contact information, my journey, the candidate’s skill set, and professional background.
The digital profile/resume is displayed as a single page, and has a scrolling function: every time the user clicks on the profile category, for example, contact information, the page scrolls down precisely to that paragraph.
Key Takeaways
The mobile and desktop prototypes for the internship website aligned with industry-leading UX standards. The prototype demonstrated flexibility with which the user can navigate through different stages of profile completion, moving forward, skipping steps, revisiting previous steps, or moving from the profile to a different directory.
During the prototype presentation participants and the instructor noted that the wizard idea was relevant, and the design and navigation pathways were well structured.
This project was a valuable learning curve that solidified my understanding of user-centered design requirements.