Indiana University -
A website redesign.
A revamp of Indiana University's M.S. HCI/d website to better educate students about the program.
Role
My primary role was a UX designer where I was responsible for visual and interaction design, but I also assisted with content strategy and collaboratively conducted user research.
Overview
The director of the MS HCI/d program recruited me and 4 others to redesign and launch a new website for the program. This was an extremely fast paced project and a volunteer effort, but a great learning experience to work cross functionally to ship a real product. Together, we redesigned the website to better educate prospective students about the program.
Duration
5 weeks
Team
Aditi Saldanha, Payoshni Kulkarni, Andi Zhang, Lingyi Ge (coder), Animesh Gupta (coder)
Tools
Adobe XD, Sketch, Principle
Client
Indiana University
PROBLEM
There was a disconnect between the way students felt about our website and how we wanted them to feel.
1
The website did not reflect what prospective students wanted to know.
2
The website's design nor content conveyed the program's unique design approach or reflected those of a highly ranked school.
3
The number of incoming applications and subsequent enrollments were reducing - did our website play a part in that?
HCI/d Existing Website
PROBLEM STATEMENT
How might we redesign the website to better educate prospective students about the program and entice more students to apply?
SOLUTION
Introducing the new HCI/d website.
An all-inclusive homepage.
An overview of the most important aspects of the program to help students get a sense of the program without having to search for information.
A curriculum timeline.
A linear timeline approach to help students imagine how they will grow and what the next two years will look like.
A chance to meet the cohort.
A photo gallery and biographies of current students to help prospective students connect with and get a sense of the variety of backgrounds represented and valued in the program.
DESIGN PROCESS
We followed the Lean UX framework.
We chose this framework because it gets to an MVP as quickly as possible. We worked in one week sprints. The framework taught me the strength of ideating quickly and testing often. It ensured that we were always moving forward even if some ideas were not well-received and challenged me to prioritize the most important components to the MVP.
DISCOVERY
User research - identifying patterns in students' design making process.
Historically, the program has comprised of three main demographics; American, Chinese, and Indian students. We created proto - personas of these groups based on our assumptions and tested them by speaking with current students in the program. Our goal was to understand users’ behavior, needs, and pain points when choosing between HCI programs.
We were able to prove and falsify some of our assumptions to redefine our personas, which we used to guide our design process. While each demographic had slightly different motivations and needs, there were some underlying themes:
“I don’t have any coding or web experience. I constantly searched for other architects who had made the transition to UX, so I’d feel more comfortable joining a HCI program."
“I was on LinkedIn everyday trying to find the companies IU alumni were working at and the positions they had. I wanted to know I could get a job at Google or Apple."
Speaking to subject matter experts.
We spoke with the director of the program and a professor of an undergraduate HCI class. Both SME’s have been with IU for many years, allowing them to share insights observed through the years. The goal was to not only understand the problem space from their perspectives, but also to understand how the program wants to be marketed to users.
Looking at other schools' websites.
The analysis looked at how other schools represented their information, the actual content itself, and the feelings the overall experience imbued on the user. Being a HCI + Design school, it was imperative that our website reflected both aspects. Thus, we looked beyond traditional HCI programs and looked at art, film, and business programs as well.
We found that most programs represented themselves in one of two ways: more technical and research heavy vs. more visual. There was no program that meshed the two seamlessly, and we wanted to be the first program that did that.
University of Washington (MHCI+D Degree)
UW makes prospective students feel more at ease about fitting in by showcasing students’ bios and backgrounds.
School of Visual Arts (MFA Degree)
SVA cleverly uses bold colors, typography, and strips to direct readers to the most important information.
DEFINE
Our primary users were prospective students.
Through synthesis of our research, we were able to establish that prospective students would be the most frequent users of our website. While parents, companies, and other groups may visit our website occasionally, prospective students were the main group and therefore, should be our focus.
Prospective students could be further broken down into two sub-groups.
1
Domestic Students
2
International Students
Defining the user and business goals.
Being a real project, it was important that we balanced both the user goals and business goals when designing rather than just evangelizing the user. In order to keep us on track, we outlined the user and business goals which helped us validate design decisions and decide which features and pages were most important to design, implement, and launch for the MVP.
DESIGN
Key design considerations to keep in mind.
Working for a real client came with limitations, which pushed me to become a better problem solver. As a team, we were great at brainstorming possibilities and ideas for the website but had to remember two key considerations at all times.
Feasible within the timeline
1
Cool design ideas that would take longer to code and weren’t essential to the usability of the website had to be placed on the back burner.
Low Maintenance
2
i.e. require minimal updates. Since there is no team dedicated to maintaining the website after the re-design, we had to be mindful of placing elements that were subject to change.
A cycle of iterating and testing.
The quick timeline forced us to move very quickly from low to high fidelity mock ups to better convey designs to students during testing. The assistant director (project manager) encouraged us to be as 'quick and dirty' as possible - don't focus on making it look pretty right now, just get the ideas out there.
Our testing efforts were mostly focused on the homepage, as we believed that was the most important page to get right for the MVP. We asked students their first impressions, feedback on the selected content and visual representation, and the order of content in terms of importance.
Iteration #1
Design decisions and overall feedback
In order for students to quickly get the gist of the program, we decided that we wanted to do a long scroll with short overviews of the most desired information with quick links for more information.
Students thought it was a big improvement from the original website and liked that it wasn't as text heavy but still wanted more photos. A big criticism we got was that it didn't stand out.
Tested features and feedback
1
Apply now
Should be way more prominent on the page - shouldn't have to search for it.
2
Left navigation bar
Students thought it was weirdly placed. They suggested replacing important dates with it and moving important dates to the right.
3
At a glance
Students loved this for a quick overview but wanted it to be higher up on the page.
Iteration #2
Design decisions and overall feedback
After initial feedback, I took the lead in designing a website that I, as a student, would want to see. I looked at UX agencies for inspiration to better convey information and story tell.
My team loved the new direction but cautioned me that it should still look like an academic website and not become too agency like.
Tested features and feedback
1
'Who am I' animation
International students loved it but American students thought it wasn't inclusive enough as it didn't include states.
2
Important dates
Still not at the right place. Looks odd where it is.
3
Our curriculum
Not a fan of the quote - was there something else that could be more informative?
Trade off's with the coders.
This was my first time working with coders which was both fun and challenging. As a team, we had to make compromises on what features were most important the MVP and what was essential to the website's usability. We often worked together to ensure what we were designing was feasible within the timeline and what they were implementing was what we wanted.
1
'Who am I' animation
We all agreed that having this be the first thing students see would make our website memorable, however, it had to be let go for the MVP as it would require to coders to use Java Script and it wasn't essential.
2
Search feature
We wanted a search feature to facilitate quick searching but it wasn't feasible before the launch as it would require each element to be tagged.
3
Limit opacity changes in elements
I learned that coders prefer distinct hex values for colors vs. reducing opacities on colors because it takes less time to code.
Framing and testing the architecture.
I created a site map to better understand the architecture of the website, also acting as a reference for coders to understand the site’s interactions when developing. I worked with one of the coders to create a card sorting exercise to test the architecture and validate our assumptions of the way students looked for information. It generally validated our assumptions.
SOLUTION
BEFORE
Homepage
About the MS program
AFTER
Homepage (first half)
Curriculum page
Homepage (second half)
Students page
Next steps for the HCI/d website.
1
Continue building pages and adding content to the website that extend beyond the MVP offerings.
For the launch, we focused on the essentials to get it out ASAP. Now, we need to focus on a more holistic picture of the program and go deeper into what makes the program unique, which includes research, alumni profiles, awards, and more.
2
Develop and build 'cool' or 'good to have' features that we didn't get time to do in the first phase.
Due to lack of time, many ideas were discussed but placed on the back burner. Moving forward, we would like to develop a 'search' feature and unique animations to really help students understand what our program is all about.
What I learned;
1
Working in a cross functional team relies on good communication and trust.
Everybody has different roles and responsibilities and depend on each others' and deliverables to move forward. I learned that communicating what I've done effectively is key to somebody else being able to build on it. I also learned to trust my teammate's strengths.
2
Quick and dirty ideating and testing was key to producing an MVP in time.
Coming from architecture, I have a tendency to only present refined and complete work. But if I had worked that way for this project, the website would have never launched. Quick and dirty was paramount to getting feedback, learning, and moving forward.
Thanks for reading!
The MVP website launched Jan 2020, and the team plans to design and launch secondary pages this semester. You can check it out here!