FIU UX/UI Case Study

Problem and Assumptions

The FIU College of Engineering and Computing website https://cec.fiu.edu , the main website for the college, was very old and did not follow modern day design standards, was not mobile responsive, and contained duplicate information found on the micro-sites. The main site also contained many links to other micro-sites dedicated to the college’s departments and schools. The website users became frustrated and lost when navigating the site and frequently failed to find the information they were seeking.

Project Scope

  • Conduct user research to understand the problems and pain points of the users
  • Re-design the FIU College of Engineering and Computing website so that it is mobile responsive and follows FIU’s design standards.
  • Re-organize the information/content so that is it easily found by different types of users (current students, prospective students, others).
  • Eliminate duplicate information by identifying which information should be located in the main site and which information belongs in the departments and schools micro-sites.

Research Survey

As part of my research, we sent out a survey to a list that contained current FIU college students as well as prospective students from other colleges. We received 50 responses. The purpose of this survey was to select several students to do a more detailed interview. We wanted to select students from FIU, college students from other universities, students that were in different years of their degrees, and students both familiar and unfamiliar with the current website.

The survey results were as follows (also see pie charts below):

  • 84% of respondents were FIU students
  • 58% of respondents primarily used mobile phone 
  • 66% of respondents had visited the college website
  • a good sample responded from each college year ( freshman, sophomore, etc.)

Research Interviews

Users

We randomly selected 6 students ( 2 undergraduate FIU students, 1 graduate FIU student, 1 undergraduate student from a different university, and 1 high school student). We interviewed all six subjects, the recommended, best-practice sample size for this type of testing.

Testing Environment

We decided to do live one-on-one interviews. In this interview method, users were asked to perform carefully prepared tasks while observed, to capture their interactions and facial expressions. This method is well suited to soliciting qualitative feedback, the real and personal interactions of users. With this process, the goal is to uncover expectations, pain points and frustrations through feedback from real users as they interact with the website.

Targeted Tasks

When creating the tasks, we kept in mind the website’s target audience: current and prospective students. Tasks centered on students’ academic, financial and social needs. They followed the process for enrolling in the college and engaging in various facets of academic and social life in college. The goal was to see if users could find commonly used content and validate that the content was in expected places.

Users were asked to complete typical student tasks to see if they could efficiently complete them online. Tasks in this kind of user testing often test the site’s information architecture (IA) – that is the organization, structure and labeling of information on a site. Questions included enrollment, degree information, financial aid, academic support and social engagement.

Interview Instructions and Questions

Feel free to think out loud as you complete this exercise. Everything you think or say is valuable to us and helps us make better sites.

  • Take a look at the layout of the home page. How would you improve the look and feel of the page? What information important to you is missing?
  • As a new student, you’re not sure what degree you want to pursue. Where would you go to research and explore your degree options? Find and select a degree option.
  • Online coursework offers flexibility in how you complete your program of study. Where might you learn more about online options?
  • Now that you’ve selected a degree option, you want to know whether you qualify. What are the degree option’s admissions requirements?
  • College can be expensive. If you wanted to know how much will it cost to pursue this degree option, where do you think you might find that information?
  • You’re all set and ready to apply. Where might you do that?
  • Advisers can help you pick out your courses and keep you on track for graduation. How might you learn more about advising?
  • Certificate programs can help give your career a boost. Where would you learn more about certificate programs?
  • Labs are where the college’s cutting-edge research happens. If you were interested in learning more about the opportunities offered by labs, where would you find that information?
  • You need to contact your professor to let him know you’ll have to miss class, but you’ve lost your syllabus! How might you find your professor’s contact information?
  • College is more than just classrooms and homework. Student organizations can help you meet like-minded students, build your network and develop your leadership abilities. Where might you learn more about student organizations?

Survey Observations

  • The website’s home page and major pages contain too much text and not enough images to keep the users interested and browsing through the website. The website is not 100% mobile responsive.
  • The site structure becomes muddled as users explore deeper within the site.
  • Content is hidden behind audience segmentation sections such as “prospective students” vs “current students”
  • Educational language and presentation are not always clear to students
  • Out-of-date or missing content loses user trust

Recommendations Based on Survey Observations

  • The website’s home page and major pages such as the degree pages need to be re-designed so that it falls within modern design standards using full-screen layout , more images and videos, and using mobile responsive design.
  • Streamline the user experience by consolidating pages of similar information, eliminating duplicate content, and simplifying maintenance of content and design.
  • Revise the current information architecture so that it does not rely on audience segmentation. Work with information architect to organize and categorize content to meet our users’ expectations in the main navigation menu.
  • Work with content strategists to refresh content throughout the site to make pages more readable and language more student friendly.
  • Assign subject matter experts to work with content strategists to deliver informative and accurate content and keep it up-to-date long after the launch of a new website. Create new processes internally and identify content turnover review timelines.

User Personas

Based on the research gathered, we created user personas for the following:

  • John – Undergraduate Engineering Student
  • Rachel – Graduate Engineering Student Seeking Master or PhD
  • Tom – High School Student
  • Maria – Parent of High School Student

Below is a sample of one of the personas created.

User Stories

The following are the main user stories determined from the research and user feedback:

Student Stories

  • As a student, I want to research available degrees so I can choose one that fits my career goals
  • As a student, I want to know about the admissions process
  • As a student, I want to find an advisor that can help me pick my classes
  • As a student, I want to find available online classes
  • As a student, I want to know the college’s rankings and achievements so I can compare to other colleges

Corporate User Stories

  • As a corporate user, I want to know the history and mission of the college
  • As a corporate user, I want to know the college’s research areas so I can decide whether to provide funding
  • As a corporate user, I want to know the college’s industry partnerships so I can find business opportunities
  • As a corporate user, I want to find faculty and their related research areas to find possible partners

Sample User Flows

Based on the user personas and user stories, we created the user flows. Below is a sample:

Site Map

Based on the user flows and after performing a cart sorting exercise with potential users, we created the site map below.

Style Guide

The style guide was created by converting FIU’s print colors and fonts to accessible colors and fonts.

View PDF with style guide.

View complete online style guide.

Hi-Fidelity Wireframes

The following wireframes were created using Sketch.

cec-desktop-wifeframe-sample-720x1124

InVision Prototypes

We used Invision to create working prototypes of the main pages such as those found under the Research menu. Please contact me for links to the prototypes. 

You can also view the live website at https://cec.fiu.edu

Bitnami