UMBC - IS Department
A smart and efficient education platform to accelerate the academic information
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.
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 –
-
Create an easy, intuitive way to present information
-
Avoid textual information overload
-
Clear separation between each content
-
Provide both visual and textual cues for the user
-
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
.jpg)
.jpg)
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-
-
Test 2 primary usability challenges of IS department website- Information overload and layouts
-
Test discoverability of newly designed navigation bar
-
Test discoverability and usability of new interaction flow
-
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