UMBC - IS Department

A  smart  and  efficient  education  platform  to  accelerate   the  academic  information

design (1).png

Overview

The Department of Information Systems at the University of Maryland, Baltimore County is one of the reputed branches in Maryland state. Recently, there is a constant voice online asking UMBC to develop a feature that allows the user to extract clear information about the tuition fees and other department details. My team would like to dive deeper into this user request and figure out the actual "user needs" underneath the "user wants".  

Executing independently, we conducted user research and found out that users need more freedom to navigate a memorable website experience rather than extracting more information about the Information System department. It's more about the entire experience, the service, and the content provided by the university.  

Role & Duration

UX Designer

Competitive Analysis, User Studies, Persona Development, Storyboarding, Prototyping and testing

Team- 2 designers

Jan - April 2020

 

Understanding

UMBC is a community of career-oriented students, and there is a need to get students to engage and get better results using an efficient course website. 

smartmockups_kiaj83id.png

Department of Information System's original website

Process

Followed HCD process throughout 5 months

After evaluating the problems, we followed below design process.  We followed the User-Centered Design process to investigate how students and other faculty members want to recreate the website experience based on their preferences. Letting user research be our guide, we brainstormed and designed multiple solutions. We then tested our ideas via usability tests and developed a high-fidelity interactive prototype based on our findings. 

Department of Information System's original website

Discovery

Competitive Analysis- Similar websites already existed.

To start with the research, we analyzed 5 direct competitors in academics (University of Maryland College Park, Cornell University, University of Colorado, Boulder, Towson University, University of North Carolina Charlotte).

After carefully analyzing the websites we came up with following findings – 

  1. Create an easy, intuitive way to present information

  2. Avoid textual information overload

  3. Clear separation between each content

  4. Provide both visual and textual cues for the user

  5. Adding more audio or visual effects helps to attract applicant

5 websites, elicited by 3 critics

User experience, information accessibility, maturity in visual design

User Research

We came to the following range of people/clients who use websites and have connection with department.

Contextual Inquiries- Obsolete overview page would be better use case.

We conducted 2 subjective matter expert (SME) interviews with UMBC faculty members and students to learn about UMBC's business and product goals. These interviews helped us determine the scope of the project and, to better understand the opportunity for designing the solution. We learned that matching with the specific content or modified layout will lead to loss of user interaction and, fewer people will discover it user-friendly. 

Accessibility Hindrances

Accessing course content is inefficient - the most common impeding features mentioned was, to do with accessing content through navigation systems and on different devices.

What do students and faculty members feel about the current website?

Unable to recall the images

Students frequently recalled the images that were present on website. Out of 3/12  people identified the figures and information located on website. 

The users were requested to carry out tasks of their choice using the existing website. 

Inefficient communication tools

Students were unable to find the communication tool. Several students and faculty members do not use the messaging system tool offered by the department.  

Inefficient navigation system

Accessing course content and admission requirement inefficient. Students complain that they have to navigate on multiple pages and look for a particular course which makes them hard to find. 

Faculty Engagements

A significant number of complaints came from the site structure, but it led failure of faculty to update the research page. 

Long Informative Sections

60% of surveyed students and 40% of faculty find it hard to read the long informative sections.

 

Qualitative Interviews

The variety of users and their interactions with one another need to be led out in detail. To achieve that, we gathered as much as we could from the end-users to understand the challenges they face and how they see the website making a difference in optimizing pain areas. According to the interview guidelines, we interviewed 3 UMBC students to collect qualitative information about the existing website and user experiences to gauge whether users needed that force meet with a navigation-bar feature. 

Insights

After conducting countless user interviews, contextual inquiry, and analyzing the gathered data, I was able to categorize the insights into these 3 categories

Navigation

  • Unclear text Information about the admission progress

  • No clear navigation about tuition and financial aid or support

  • The typeface is on a rather small scale that causes trouble reading

  • The news section is not clear about which news belongs to the department

  • Under course requirements only providing the name of the course is not helping during the application

Major

  • The department details are incomplete and difficult to understand

  • Images are unclear and unaligned to the website

  • Lack of page links

Connections

  • Connections are vague Enlarge in 

  • Unclear links between home  and contact page

  • Empty links for the staff details

  • Footer does not match with main page detail

Persona Development

We made a small survey and identified group of people who may use this website and gain benefits from it. The persona reflects the details about students who would likely to navigate the website depending upon their interests. 

Personas

 

User and task analysis

Based on findings, we learned that the main purpose of the site is for program applications ( learning the requirements/information and guiding the user to the application portal). 

We narrow downed  3 primary tasks for analyzing the issue:

1. HCC Program Tuition fee for an expected year

2. Join CyberTraining

3. Request a meeting with faculty about joining the HCC research lab

Task Analysis

Ideation

Brainstormed the possible UX for the new design

Designing a new feature within the UMBC experience required us to brainstorm not only the design but how we would introduce this new flow to users. We explored different solutions and sketched out the user flows. Then we discussed and decided on the most feasible solution for this new feature.

Storyboard ideas

Brainstorm and  rough sketches

The Solution

A companion that sides students in academic progress

We identified 2 possible design solutions. The first, an option for students to input the preference by looking at 3 different majors of their choice and look at the available options of scheduling a meeting, availability of faculty members, tuition fee, course number, etc. the other, an option to directly navigate to departments page and follow the sequence of information through an anchor way. 

Usability Tests

Evaluating mid-fidelity prototype

We narrowed down on potential ideas and started prototyping based on the flow identified in the companion solution. We created a mid-fidelity prototype and moved on to evaluate that.

Mid-fidelity prototypes for a usability test

Low-fidelity wireframes

We recruited a total of 2 participants from our social channels. Through the use of a screener, we screened for faculty information, who interacts 2 times a month for reviewing courses and had a mix of experience in looking for other courses in advance. Due to the pandemic, sessions were conducted using Zoom. Each session later around one hour. 

Our goals-

  1. Test 2 primary usability challenges of IS department website- Information overload and layouts

  2. Test discoverability of newly designed navigation bar

  3. Test discoverability and usability of new interaction flow

  4. Learn about participants behavior, especially how and when they do find course information

Iterations

Main Screen

As the main screen gives a new experience to the students and tells in detail information about the sub majors in Information System Department. It briefly tells about the department and takes them to the dashboard. 

Dashboard

The department dashboard ranges from Program to People which means students can search from various academic stuffs to faculty members

User Guide

Learn more about the sub menus of each department. Enables easy access to task-specific menu, and allows users to keep track of pages. 

Tuition fee list

A systematic structure of tuition fee which helps students to know about department. View the upcoming fee format.  

Final Design

Here is my interactive prototype demonstrating the user flows I worked on building in this project.

Interactive Prototype

Usability Study

We tested the prototype on various stages of the project

Interactive prototypes were tested with the participants  to get feedback on the functionality, content, and interactivity on  the screen


A/B Testing was performed for better understanding between 2 prototypes. The second prototype was selected for the final design 

See Results...

We analyzed our results based on testing and combined the data categorizing into users, take completion rate and interaction rate.

Over 4K

Users

72.3%

Task completion rate

45%

Interaction rate

Reflection

The UMBC- Department of Information System website underwent the analysis of eight usability study methods that brought various results. From competitive analysis to heuristic evaluation to that of usability testing we arranged participatory sessions with users, who helped us to evaluate the issues and brought them into a new design for the website. Studying for the UMBC Department of Information System website gave us a different perspective to study the recommendations and believe in a sense of reliability and persistence. The redesign has successfully improved the usability issues that existed in the current website and despite there are few suggestions from the user comment that needs improvement, the redesign has been a success in severing major functionalists which the site is for comparing with the old design.

Poster- Check it out!

The poster provides information about the design process and tasks undertaken to implement the new structure of UMBC's Department of Information System's Website. It includes the stepwise workflow and detailed usability findings.

Takeaways

How did it go?

Creating a design system

Redesigning the IS Department's website from start to end pushed me to create a whole new design system; an ongoing onboarding experience and several core pages.

It was incredibly rewarding to work on a problem and create a solution for the university's website that my classmate and faculty use daily.

End of the semester experience

I would like to give a better end of the semester experience to the students and new upcoming students who interact with the website. I would also like to explore how my new design has helped them to fetch the basic information about the admission page and course requirements.

Are you a design geek, a pretzel lover, a movie buff, or a foodie who likes trying out new cuisines? If yay, do get in touch! ✨

© 2021 with 🥨 Savani Shrotri