ITS Internship site
It’ll be the internship’s 10th year anniversary!
May - Aug 2023
How do we boost the appeal of our internship?
The University of Michigan (U-M) Information and Technology Services (ITS) started their internship program with 4 interns. Now, we have almost 50.
I worked as the lead UX Researcher and Designer to revamp the entire site, making it more student-focused and informational.
Problem:
Information was scattered and does not showcase the prestige of the program.
Goal:
To build out a comprehensive website for prospective interns.
Links:
Tools:
Figma, Google Suite
Understanding the User
Contextual interviews
I conducted contextual interviews with 5 students to identify how their process looks like and what they would try to find in an internship website. This was done through a virtual Zoom call where participants will share their screen and navigate through the website, telling me what they like and dislike on the site.
Insights:
5/5 students would like to know the different job titles available.
4/5 students knew about the internship through word of mouth.
3/5 students did not notice the sidebar menu.
Top 3 popular information to find are an intern’s pay, hours, and dates.
My research notes
Preliminary Research
I collaborated with my supervisors and the internship planning team to understand their needs and wants of the site. They explained to me the process behind this internship and wanted a site that can convey all our resources to prospective interns.
Their main struggle was having interns drop out of the internship nearing the start date. This is an issue that occurs every year because interns would be accepted to a different internship after signing our offer letter.
Wearing the thinking cap
Paper Sketches
Once I know the pages and features needed, I used my favorite way to ideate: sketching! I folded a paper into quarters and sketched four different wireframes, each an improvement from before. I then put a star next to the features I chose to implement.
My paper wireframes for the about page.
Figma Wireframing
I mixed and matched the previous features into a single wireframe on Figma.
Application page wireframe
I also made options for my supervisors on presenting some information. Below is an example from the home page.
Options on presenting our various job titles
Option 1
Option 2
Option 3
Refining the Design
“There was a lot of back and forth for my visa because I’m studying in the Dearborn campus and not Ann Arbor.
I wish I knew that beforehand.”
I included international student details in the qualifications.
before
after
“I wish they would just tell me how much I’d get paid instead of having to guess my range.”
Because salary was fixed according to your academic level, I wanted to break it down for everyone.
before
after
“I don’t know anything about the program’s history. I would never have guessed this is their ninth year.”
I added an about page to showcase the history and dedication behind the program.
Hi-fi Prototype
As a result, I ensured that popular information is front and center for prospective interns and provide more links on the home page to reduce frustrations if a user does not notice the sidebar menu or if they’re looking at the mobile view which displays a hamburger menu. I also showcased more data on the internship and planning team to showcase credibility and prestige.
What do users think?
Usability Testing
I supervised a high school intern to 5 moderated usability testing sessions. We constructed 9 questions with 4 tasks to generate a mix of quantitative and qualitative data.
Our list of questions
Insights:
5/5 users liked the list of job titles
5/5 users found the information they wanted to know for an internship.
2/5 did not notice the qualifications section in the application page.
The average time to find qualifications and apply button is 13.6 seconds.
Notes from one of the participant
Web Development
After making the appropriate iterations, I collaborated closely with a web developer to build out the site in Drupal. Because Drupal is more developer-facing, I used some HTML code to imitate my prototype.
A video walkthrough of the website
Interact with my prototype.
Check out the live site!
My Favorite part:
I really enjoyed my weekly meetings with my supervisors. I was given a lot of autonomy in this project and our meetings would mostly consist of me showing them my progress of the week.
It was fun going into a meeting and bringing or showing something I made, kind of like bringing a gift, and get their responses.
Takeaways
Consider technical constraints. Drupal was a challenge to work with because something that was more complex had to be coded in HTML, CSS, and JavaScript. Because of technical and time constraints, I made sure to devise a simple-to-implement but still intuitive design.
Expect something unexpected. I was not aware of the U-M ITS web guidelines when I started. I was only following the U-M (the bigger ecosystem) brand guidelines and had to change some items mid-internship when I found out there was more! Luckily, they were just small changes!
Ask for help. While working on this project, I had to reach out to many people for help to properly understand different processes. As someone new in the team, this is really important but also really intimidating.
Final Thoughts
As someone who has always had a fascination of higher education and helping others reach their potential, I loved working with the backstage of the internship. I had fun understanding the inner workings of the internship and even had a conversation with my supervisor on how to find a position in a setting like that.
This was a big project to approach alone but I had a lot of help from everyone around me. My biggest takeaway is how welcoming and willing to help everyone is. I was not treated like a measly intern, I was treated as a fellow staff.