Concept
Interactions
Visuals
September - October 2021
Program Management Excellence, or PMX, is a branch within Raytheon Technologies that handles the ongoing training for their Program Managers. They have a large database of tutorial videos, conference videos and supplementary PDFs but no easy way for their PMs to access them. The new home for these resources will be an easily, navigated hub with filter options to help PMs find exactly what they need.
Create an easily filtered interface
Make a modern UI
Make content identifiable to the user before clicking
Age: 30
Occupation: Program Manager
Jacob is a Program Manager who has just been promoted. As a part of his promotion, he needs to watch some specific training videos about his new responsibilities. The training proves difficult to find on his company's website. Jacob would really like a specific website that houses all of his training in one place and made it easy for him to find.
Age: 52
Occupation: Program Manager
Pam has been a Program Manager for most of her career and attends all of the important conferences to stay informed and connected. However, due to personal reasons, she had to miss a recent conference. Pam would love to have access to a place where she can watch the presentations from this conference.
The vision that the stakeholder had for the project was a more simplified video website. I started with a few sketches just to get all the important goals and challenges organized.
Since we didn't have to worry about major features that you'd find on larger video websites like comments or uploading your own videos (uploading was done on the back end by the database facilitator), I was able to focus on a couple of main components in my design: displaying the content and the filtration of that content. Due to the more simplistic design, the coding team decided to forego any prototypes because they felt it was unnecessary and not worth our time considering the deadline.
I conducted one usability study for the project, this consisted of one of the stakeholders delivering feedback on the Digital Wireframes. A second usability study was not conducted as the stakeholder had no additional changes for the Mock-ups.
Did not like the paper clip icon bring used for the pdf files
Icons for the side bar filter options should be changed to match the text
Was not sure whether we would need the videos panel on the main video page
The original home page featured a different image and intro text for each task; however this was found to be redundant and removed. The account information was also fleshed out a bit more, as well as the scheduling system.
Home Page
Main Video with Recommended list example
Finished Main Video with Playlist example
The main challenge with this project was the filtration system. There were going to be hundreds of videos and pdfs with many different tags, and these had to be available at the click of a button or search. The side bar would feature many of the different tags available to filter the content and could combine that with a search to dig further down if need be.
Some of the UI's used for existing tools at the company have existed for a while and have never been updated. It was important that the UI for this project have a modern look and functionality that will still feel usable and contemporary for years to come. This was accomplished by using classic layouts that have proven over time to still be useful and look good as the years go by.
We needed to make sure that the user knew what training they were taking before they clicked it. This was done though the searching and the filtering of course but also through the use of icons and thumbnails.
By using the document icon and the play icon, the user will intuitively know whether they will be viewing a video or a pdf file.
By using a thumbnail on each resource, the user will have another visual clue as to what they are clicking on.
A lot can happen in a week! The development time of this project was very quick as the stakeholder/client had a very strict deadline for it. The development and approval of the wireframes and mock-ups happened within a couple days and then the actual development was done within a week.
This was a good lesson in designing for others, rather than yourself. I think as designers and artists, we get caught up on making everything look the way we want it to, when in reality, sometimes we're creating a version of someone else's vision.
With this project, I was able to make something we were all happy with and the stakeholder was so happy that they didn't have any issues with the mockups. I even received the following compliment from our manager on the project.