Luis Uribe
UX Designer

University of Washington Bothell - Interactive Media Design Site Redesign

Case Study - March 2020

Design Process

My Role: UX Researcher & UI/UX Designer

Duration: 10 Weeks (research completed on 3-14-20)

Team or solo project?: Team project

Tools & Devices: Figma, Photoshop, Google Forms

Team members (all were UX Researchers and UI/UX Designers): Luis Uribe, Leighlyn Ha, Hieu Doan, Alex Vickrey, Eimi Koga

Context

As a current student at the University of Washington Bothell, I chose an elective course entitled: CSS 478: Usability Engineering instructed by Professor Arnie Lund. In the second week of that course, the students in it got grouped in groups of 5 that would then each take a site from the UWB site (examples: Computer Science site, Business site, etc.) and work for weeks while learning new methods and concepts of user research to redesign their selected site to something more user-friendly. 

Note: this case study is a condensed version of all the research we did, contact me through my email or LinkedIn if you want to see the final research report we completed. 

Current IMD Home page (https://www.uwb.edu/media-design)

Current IMD Home page (https://www.uwb.edu/media-design)

The IMD site, what is it, and what are its downfalls/pain points?

The IMD site is the website for the Interactive Media Design major. While it does serve its purpose, unfortunately, the site has many pain points such as:

  • Outdated information

    Students need current information so the picture they form about the IMD program is accurate. For example, the IMD Faculty and Staff page lists people that are currently not part of the IMD program.


  • Difficult navigation

    The current information architecture requires a lot of jumping around the site to find needed information. This may lead to important information being hidden and fewer students using the site because it is hard to find what they want.


  • Minimal student work shown

    Currently, only three (outdated) student projects are shown. This does not show the diversity of the program. Students might want more recent student projects shown as a source of inspiration for their capstone.


  • Broken or unnecessary links

    Some links (like the “schedule appointment” button in the “Need Assistance” section) are broken. This leaves students frustrated at a dead end. Other links do not provide helpful information (like a link to the How to Apply page within a section about prerequisites) and are distracting and unnecessary. 

With all this information recorded, we decided to start our research plans...
Step 1: Research

Research Techniques

This section lists the research techniques that were used to answer our research questions (these included a lot of "whos", "whys", and "whats"). 

1. Personas

These will be created for the primary site users (and expected site users, based on stakeholder interviews). These personas will help us identify potential user goals, expectations, tasks, likes, dislikes, and preferences.

2. Scenarios

These will be created for each persona as a frame for testing the usability of the current and redesigned IMD websites.

3. Journey Mapping

Journey maps will be created to identify the user experience and emotional state of potential users in potential situations. These will be used to further identify pain points and delighters to help us redesign the current IMD site.

4. Interviews

These will be conducted on both stakeholders and users to get their respective expectations, goals, concerns, likes, dislikes, and anything else they would want from the IMD site. Interviews will be used to analyze how current users interact with the site.

5. Heuristic reviews

These will be used to see how the existing site holds up to design guidelines, and where its strengths and weaknesses lie.

6. Secondary research

This will be used to gather potential general characteristics of site users--their likes, dislikes, preferences, what media/technologies they use, etc.

7. Questionnaires

These will be used to validate the types of IMD site users, their characteristics, their expectations, their goals, what they like/dislike about the site, and how to make the site better.

8. Ethnography

This will be used to get an understanding of user characteristics, as well as how they complete tasks and goals in their everyday surroundings.

9. Card sorting

This will be used to develop a potential information architecture for the IMD website that can meet or exceed user and stakeholder expectations.

10. Prototyping

This will be used to build a potential design for the website that can be tested to see if it meets or exceeds user and stakeholder expectations.

11. Usability studies and tests

Usability studies will be conducted to see how users interact with the current IMD website. These will be used to discover user expectations, goals, likes, dislikes, and any other information relevant to our research. Usability tests will also be conducted after the construction of a website prototype to test if our team’s redesign meets or exceeds user expectations, and to find out potential tweaks to the design to make the prototype even better.

University of Washington Bothell - Interactive Media Design Site Redesign

Personas (Current IMD Student)

Example

Based on the research we had done so far, we set up three personas. Each of them represents a possible user for the IMD site.

What this persona taught us:

  • Current IMD students want to have personal and academic growth

  • Current IMD students feel as if their mentorship/networking opportunities are low

  • Current IMD students want links that can help them connect with like-minded individuals (clubs, etc.)

University of Washington Bothell - Interactive Media Design Site Redesign

Personas (Prospective Transfer Student)

What this persona taught us:

  • Prospective transfer students want to have a list of possible careers that an IMD graduate can choose from as the program's description is generic-sounding

  • This type of user will prefer more detailed course descriptions as the current ones are vague

  • There needs to be more relevant and newer student work than what is currently shown (which are two outdated video pieces)

University of Washington Bothell - Interactive Media Design Site Redesign

Personas (Prospective Non-transfer student)

What this persona taught us:

  • This group of users wants to have some opportunities present to talk with other IMD students

  • All users probably want a better site layout as the current one requires the users to click around a lot

Scenarios

After doing our personas, we decided to make up some scenarios that can be used to validate/challenge assumed information.

Suraela Kerr (Current IMD Student)

  Scenario 1: Courses Next Quarter

    Description

     Find out what courses to take next quarter, in order to do some preliminary research and preparation for that course.

    Motivation

    She wants to know what she will learn next quarter and to get ahead by downloading any necessary software, getting familiar with certain topics, purchasing textbooks, etc.

    Context

    She is on spring break and decides to research upcoming courses on her laptop at home.

    Goal

    Pick the courses she wants to take next quarter, and make sure she is prepared to succeed in them.

  Scenario 2: Resources to Land an Internship

    Description

    Look for opportunities and resources to help land an internship, ideally at Airbnb.

    Motivation

    She is graduating soon and wants to work at Airbnb. She would like to use any available resources/people/connections in the IMD program to better her chances of success.

    Context

    She is taking her second-to-last quarter before graduation and decides to browse the IMD website on her smartphone over the 15-minute break between classes.

    Goal

    Find and utilize any available resources, opportunities, IMD events, alumni connections, etc. to help her land an internship, ideally at Airbnb.

Carrie Smith (Prospective IMD Student--Transfer)

  Scenario 1: IMD Classes Offered

    Description

    Look up what classes the IMD program offers to know what skills she might learn if she transfers into the IMD program.

    Motivation

    She is considering different colleges and wants to know what makes the UWB IMD program stand out. She wants to improve her design, coding, and communication skills, and any other skills the IMD classes offer.

    Context

    She is starting her second year at Cascadia College and decides to check what the UWB IMD program has to offer by visiting the IMD site on her laptop.

    Goal

    Discover what skills she might learn in the IMD program and what makes UWB more appealing than other colleges. 

  Scenario 2: IMD Career Pathways

    Description

    Discover what career pathways the IMD major offers, to get an idea of what career might be best for her.

    Motivation

    She is unsure of what specific career to take, and wants to know what are some potential jobs, their perks, their required skills, and their typical activities. She wants initial guidance on which job suits her best.

    Context

    She is starting her second year at Cascadia College and decides to pass the time commuting to campus on the bus. She visits the IMD website using her smartphone to see what career options are provided by the IMD program.

    Goal

    Discover potential career pathways that the IMD program offers and get an initial idea of which career she should pursue.

Miguel L. (Prospective IMD Student--UWB)

  Scenario 1: Making New IMD Friends

   Description

    Look for opportunities to connect with other IMD students, so he can meet new friends and discover the social aspect (student life) of IMD.

    Motivation

    He likes to make new friends and enjoys the student life at UWB. He wants to know what extra social opportunities the IMD major can offer, as well as to network with other IMD students and faculty.

    Context

    He is taking the last remaining prerequisites for the IMD program and decides to use his smartphone to see any IMD social opportunities listed on the IMD website, while eating breakfast in his dorm.

    Goal

    Discover upcoming opportunities that he can participate in to meet IMD students.

  Scenario 2: Applying for the IMD Program

    Description

    Figure out how to apply for the IMD major, so he can start preparing the necessary things to get in.

    Motivation

    He is taking his last IMD prerequisite classes and wants to get in the major in time to register for next quarter’s classes.

    Context

    He uses his laptop and researches how to apply to the IMD major in the evening after classes are done.

    Goal

    Identify what is required to get into the IMD program and apply for the program.

User Journey 

We currently have one journey map developed so far. This journey map is for the persona "Miguel L." who is a prospective non-transfer student. He is currently trying to figure out the steps needed to apply for the IMD major. This journey map describes the actions taken, emotional experience, and potential opportunities to improve the experience. Below, you'll see our user journey map:

We learned from this user journey that little additions/edits to the application process can greatly enhance the user experience (as seen on the opportunities section)

We learned from this user journey that little additions/edits to the application process can greatly enhance the user experience (as seen on the opportunities section)

Initial Usability Study Results

Before redesigning the IMD site, our team also conducted usability studies on current and prospective IMD students using the existing IMD website. Some of the usability test methods that were done are card sorting and usability studies to give examples. In this section, I'll list the key takeaway lessons learned from these usability studies:

1. Poor Site Organization

Users tested spent time scanning the side menu to find specific pages--indicating they might be lost. They often tried several random links before getting to the right page

2. Poorly Worded Links

Some links were poorly worded, leading the user to scan every link on the page and click them randomly, guessing that it will take them to a page with relevant information.

3. Hard-To-Find Prerequisites

Users often jumped around the homepage, then to the How to Apply page, before finally seeing the Prerequisites page in the How to Apply dropdown. Prerequisites are only listed for UWB students, while transfers have to navigate to the Course Equivalency page to see what courses they will need to take.

4. Poor Course Descriptions

Users found it hard to understand what they would do and learn in a required course. For example, the course description for B IMD 362 does not imply there will be coding, even if the class involves a lot of coding. In addition, users are confused about what information the Curriculum Objectives page is trying to convey.

5. Lack of Career Path Descriptions

Users thought that the bare list of career paths did not provide enough information on how to actually get hired for that career or what they would do in that career. In addition, the career paths section is placed beneath the graduate school section, so users did not see it when the page first loads.

6. Too Much Technical Jargon

Users sometimes found it hard to understand the site content because the language used to describe some sections (like the Curriculum Objectives page) had a lot of technical jargon (or was not worded in a way that users can easily understand).

7. Outdated Information

During one usability test, a user found an inconsistency with the application date. The How to Apply page at the top showed that applications were closed, while at the bottom, it showed that applications were open. This confused the user.

8. Poor Description of the IMD Major

Prospective users had a hard time describing what the IMD major is about based on the description from the website and looking at past student projects.

9. Lack of Student Life Information

Users found it hard to discover existing IMB clubs and events from the website. Very little information on these topics could be found by the users, and even then, they struggled to locate it.

10. Links that Open in the Same Tab

When users clicked on a link that directed them to a different site in the same tab, they did not realize they were taken outside of the IMD site. They tried navigating the new site as if it was part of the IMD site, and then realized they needed to get back to the IMD site.


Step 2: Design

Information Architecture

The information architecture displays some rough menu organization categories for which the future IMD site could be redesigned to follow. Our prototype develops further on this design. This information architecture was based mostly on the card sorting activities we did with some subjects. This was our first step into the design phase.

Showing every page of the UI redesign would take lots of space, unfortunately. A link to the prototype containing all our work can be found in the conclusion section of this case study.

Showing every page of the UI redesign would take lots of space, unfortunately. A link to the prototype containing all our work can be found in the conclusion section of this case study.

UI Design - Medium-Fidelity

After completing lots of extensive research and doing the information architecture, we started to redesign the UWB IMD site on Figma (link down below in the conclusion section) to then do more usability testing on the prototype itself to validate some assumptions/scenarios (such as one that, IMD site visitors would prefer to see past IMD alumni work such as IMD application portfolio requirement examples and IMD capstone project examples) and see what things still needed improvement. 

*You can scroll the web page on the laptop to the right!

So, what did our participants think of the prototype?:

Overall, the prototype was ranked as mostly usable (easy to use) by all evaluators. There were some scenarios where most evaluators performed well, and some scenarios that highlight aspects of the prototype that could be improved.

Scenarios that were ranked the highest in each type of metric were “Discovering the IMD Program” (finding out what IMD offers), “Applying for the IMD Program” (finding the application to the major from the home page), and “Getting Inspiration” (looking at past student work). It seems the corresponding pages (to those scenarios), including the IMD homepage, how to apply, and student projects pages were easily found by most evaluators and the scenario description appeared to be clear and straightforward.

Scenarios that were ranked the lowest in each type of metric were “Planning Next Courses”, “Networking with Others”, “Finding IMD Career Options”, and “Participating in Alumni”. The “Planning Next Courses” and “Networking with Others” scenarios seemed less understood by the evaluators (indicating the scenario might be poorly written or too complex). Evaluators took longer to find the associated information for those two tasks, which could stem from bad navigation structure to these pages, as well as from not understanding what to look for. For the “Finding IMD Career Options” and “Participating in Alumni” scenarios, evaluators had a longer time finding the correct page and/or needed information on a page. This could indicate making these pages more easily found. In the case of the “Participating in Alumni” scenario, this lack of finding needed information seemed due to a poorly written scenario. The scenario asks evaluators to find benefits for participating in alumni, while the intended action was to just navigate to the alumni page (which had dummy text). 

A

A "Recent Capstone Projects" page that could show potential IMD students more of what IMD offers

UI Design (cont.)

Out of the additions we added to our reimagining of the IMD site, here's one page that most of our subjects enjoyed a lot and would love to see on the IMD site one day (shown on the right):

Additionally, here's some more strengths and weaknesses regarding our prototype shown in a more condensed fashion:

Strengths:

  • “It’s clean, it’s not overwhelming” - tester

  • “Way easier than the current site” - tester

  • Users quickly noticed the video and button to schedule an advisor appointment

  • Many participants liked the inclusion of an IMD trailer video on the home page along with the big advisor appointment image and button present in all pages

Weaknesses:

  • Still some sections that are hard to navigate

  • Collapsible menu hides many options

  • Reorganize and reword for the next prototype

  • Top right links within page seemed unnecessary due to short page length

Step 3: Conclusion

Stakeholder Feedback Post-Briefing

Our final IMD website research was put into a presentation that was showcased to our stakeholder, Sara McDermott, the IMD & Computer Engineering advisor.

Overall, the feedback we got back from her was positive and said that she would take a deeper look into our presentation’s findings and prototype which we sent her a link to.

Some of the positive feedback Sara gave us was that we included a diverse set of personas (both in terms of their IMD association status and their backgrounds) into our research, we have a good site layout in our prototype, showed alumni work (example IMD application portfolios), and liked the promotional IMD trailer idea on the IMD site homepage.

However, we also got constructive feedback such as following the design of the current webpage and thinking about logistics of how the changes could be made - who would do it, how would it be done, and for the prototype to suggest minors a student could take when looking through courses. However, considering that the logistics of making our redesign prototype a reality is out of the scope of our team’s abilities and given time, further research will be needed to improve our designs and test their viability.

Personal conclusion

I'm very proud of the extensive work we did to get this research project done and I really hope that some of our research findings get applied to an updated version of the IMD site one day. 

Furthermore, the amount of UX knowledge we all gained was incredible thanks to this project and class. I learned and also got to try the card sorting technique and other UX methods on very insightful users that allowed us to make our prototype better afterward.

The only thing I wish for is that we had more time to work on the prototypes as we could've perhaps made something even better and more functional; our current prototype is, unfortunately, mostly static due to the constraint of time.

All that being said, I learned a ton of information thanks to this project and class and will apply it to future personal projects and take another course with Arnie Lund as he's a great instructor.

Thank you for reading this lengthy case study, and now, here's the link to the prototype: https://www.figma.com/file/vMym78uyJKRnUgKdwy5LLQ/CSS-478-Website-Prototype-1?node-id=0%3A1.