College of Engineering and Information Technology's Research Website Redesign
The COEIT research website was identified by users to be a little gaudy on the eye and have some prevailing issues that make the user shy away from the current website. As a semester project, our client (College of Engineering and Information Technology - Abbv: COEIT ) approached us to conduct research and provide redesigns for the research website.
- Categories: User Research, Website Redesign, User-Centered Design
- User Base: Students, Faculty, Researchers.
- Project Timeline: January 2020 - May 2020
- Team Members: 2 student team - Hirak Ray and Anirudh Nagraj
- Research Methods: Contextual Inquiries, One on One interviews, Heuristic Evaluations, Participatory Design, Time on Task, Personas.
About the Project
The website serves as an information hub into the various dimensions, ranging from the departments, faculty to the myriad of projects. The COEIT prides itself on the excellent research that is conducted in the labs of the various departments. (For example, the Interactive Systems Research Center (ISRC)), fostering a collaborative environment. Hence, we incorporated evaluative research and helped redesign the website for better user retention and increase the average time the users spend on the website.
User researcher responsible for conducting the qualitative study and help improve the usability of the existing product.
We showed that the proposed changes would lead to greater user retention leading to more time being spent on the website . Efficient navigation throughout the website leading to lesser bouncing and exiting by the users. Better internal structure and content structure to better aid user experience . The efficiency of using the redesign was found to be higher than the original website (based on timed activities). The post questionnaire results show that most participants found the information displayed on the redesign easier to find and easier to read. Furthermore, the feedback button was also easier to identify in the redesign. However, there were a few negative comments about the hover feature of the redesign’s feedback button which may impact visibility. Furthermore, the color scheme implemented had mixed reviews from participants. Some liked that the redesign’s color scheme matched UMBC’s theme, others felt that the change may be too jarring for returning users.
Our client, the College of Engineering and Information technology (COEIT) highlighted some problems in their research website. The issues stem from the decreased usability and decreased user reach in the website. Our team decided to employ user research and help improve the usability of the website focussing on the base requirements of increased usability and improved traffic on the website.
Initial usability concerns
- Inconsistent content
- Limited to no user engagement
- Verbose Content
- No clear pathways for research content
- The site not designed for an assorment of users.
Who are the users?
The COEIT research website is a source of information regarding research in UMBC. It is used by students aged 18-35, as well as professors (Age 30-70). External researchers may also use the website to learn more about research being conducted at UMBC.
What problem are we solving?
The COEIT research website has a lot of usability issues. We are trying to improve the usability and enable more people visit the website.
How are we solving the problem?
As we were two people solving the issue, we needed a process and a set of research methods to help steer the redesign.
We recruited participants using the snowball sampling technique avoid any sort of bias.
Demographic: Researchers (Faculty and Students) , Non-researchers (Faculty and Students) whose age ranged from 18-70
Total number of users involved throughout the project: 10 (2 - Contextual Inquiries, 3 - User Interviews, 2 - Co Design Sessions, 3 - A/B Testing)
Devices: Mobile (Android and IOS), Laptop, Desktops, IPad and other android tablets.
We divided the project by the tasks and allotted a set number of weeks to conduct the research and design tasks. To come up with the redesign, we had to go in depth to understand the painpoints of the users and conduct Evaluative research. Starting with competitive analysis and recruiting users for contextual inquiries.
We wanted to know what the other research websites offer. So we diverged and came up with pointers for each of them. Exploring other websites gave us the strengths and weaknesses of our client's website as opposed to others. Information was populated and insights were drawn to aid the future research for the current website.
Massachusetts Institute of Technology is a research-oriented institution whose research section shows extensive research projects conducted by its students, as well as appropriate language used to attract their competitive recruits. To attract customers, they use large images which stand out against the white backdrop, enhancing visibility and attention . While Carnegie Mellon University and New York University (NYU) have research sections to showcase the centers and institutes it collaborates with, NYU has listed them in alphabetical order as well. The University of Maryland College Park is a local competitor, whose research section could possibly cater to students based on local factors, which the client's website could learn from. Being similar in both content and location, studying the UMD research section could shine some light on its usability, and highlight the key differences between them. UMD’s research section also utilizes social media well, something which the client's research section has potential for, but is yet to implement effectively. We believe that finding the right balance between efficiency and visceral design could improve the current website.
Two participants were recruited and observed in their natural element. Insights were drawn from the user inputs when thinking aloud while operating on the website. We wanted to conduct contextual inquiries because we wanted to find out some answers to the some of the functions by letting users talk about what they are doing and why when they are doing it. Detailed information is not obtained from contextual inquiries, so we decided to keep this as a precursor for the interview sessions because we would have a general idea on how to go about the questions.
Participant P1 was, for the most part, satisfied with her experience. She enjoyed the visual content via images and videos. She also felt that there is a lot of impressive written content on the website. However, there were a few elements which caused confusion and frustration. Participant P2 , has prior experience of using the website. She did note some differences from the last time but was not put off by a myriad of changes. She was satisfied with the overall experience of the website. She was particularly impressed by the positioning and the usages of images along with the text to draw attention. In addition to these, there are instances where she felt like there is information overload.
I think this button is a little weird, it’s on like every page Did you find what you were looking for today? It looks like a button but it is actually a link in a box. That's kinda weird. I don’t want to go there, it scares me.
These campus partners could use more visual hierarchy, like they just have text and the text that is linked is blue and that is what set
Heuristic evaluations were conducted on the College of Engineering and Information Technology (COEIT) research section to determine the extent of its functionality and its effect on user experience. To achieve this, we strived to identify specific issues with the website, per Nielsen’s Ten Heuristics. We converged and explored the website and evaluated the interface to find usability problems. These problems were recorded in the form of a written report using Usability Aspect Reports (UARs).
According to the severity ratings assigned by the evaluators, issues of most importance seem to be related to unnecessary loops of navigation, redundant links, outdated images and text, lack of appropriate signifiers to accompany affordances, issues with feedback form access and submission, unclear utility, and overcrowding of information with large blocks of text. Most of these issues were rated fairly easy to fix. Some exceptions of difficult solutions involve changes related to user actions (such as on-hover), relocating utilities, and restructuring textual content to reduce information overload.
Three participants were asked to participate in a full interview that was semi-structured. Specific inputs from the participants enabled us to strengthen the findings and combine the insights obtained from the contextual inquiries. We wanted to gauge the attitude of the users and gather information on the users’ feelings, motivations or how they use research website.
Their navigation of the COEIT website involved some frustration and confusion. Complaints were often targeted towards, and not limited to, the layout and presentation of textual information. Participant 3 felt that most of the information was just “there” and didn’t serve much of a purpose. Participant 4 felt that the text should be more spaced out, more meaningful and briefer. They were also aggravated at the lack of internal consistency within the website, regarding its navigational menu, image layout and navigation between its subpages. All the participants noticed the lack of explanation for some complicated terminologies and abbreviations used within the website. Participant 5, on the other hand, was flustered by the lack of information and often cut a frustrated figure because she could not find what was being searched for.
Maybe when you click on Research, this should be the first thing that pops up. This is what UMBC does. This is far more interesting. Every website says that they do cross-disciplinary research. But it is nice to see examples of it, like they do here with this. But they currently have this at the second to last last item in their menu. So....
I do notice after looking at the menu on the left that a range of items have appeared which do relate to research centers. They should actually be listed in the main content of the page.
Using the insights and pain points, we created two personas to reflect the key characteristics of our participants, that aided us in developing an understanding of current users and potential users and create the redesigns accordingly.
- Stressed on the lack of contact information for various resources and services listed on the website, which would otherwise promote collaboration.
- The navigation of the COEIT website involved some frustration and confusion
- Lack of nesting of information caused frustration.
- Participants were aggravated by the lack of internal consistency within the website, regarding the navigational menu, and navigation within its sub pages.
- Participants felt that information was just 'there' and does not serve any purpose.
Reduction in the content may decrease information overload.
Eliminating the navigation loop enables smoother navigation.
Text can be spaced out, brief and more meaningful
Placing the 'Research Highlights' tab much further above in the navigation menu would serve the website’s purpose better.
The positioning and the usages of images along with the text to draw attention is useful in the present state, and hence can stay as is.
Reducing the nesting of information can reduce click rate and help users to stay on in the website.
Design from the RESEARCH Conducted.
With the data collected and showed our client where the problem was, we were now ready for the redesign. We wanted to go in phases and start from the skeletal structure of the website. We used Pen and Paper for low fidelity, draw.io for medium fidelity, and Adobe XD for high fidelity mockups and the actual prototype.
Pen - Paper SketchesPopulating all the insights, we converged and made sketches on paper as a starting point for the redesign and went back to Shendelzare to show our progress.
The designed sketches may not have correctly encapsulated our participant’s suggestions. To verify this, we employed MEMBER CHECKING (a technique for exploring the credibility of results. Data or results are returned to participants to check for accuracy and resonance with their experiences) may be used.
Digital MockupsDraw.io was used for the medium fidelity mockups.
High Fidelity MockupsImproving the color, fidelity and showing the overall redesign.
Research Questions Answered
- Is the banner of the “College of Engineering and Information Technology” legible?
- Can users easily identify which page they are currently on?
- Is the website consistent with UMBC’s theme
- Can users identify how to navigate to the Home page?
- Can users efficiently navigate through the website?
- Do users know where and how to submit feedback on their experience?
PrototypeThe working prototype on Adobe XD
As the COEIT research website is a text-heavy website with a lot of cross-page navigation, we wanted to focus on incremental development rather than changing the setup altogether. We have come up with the designs so that all the concerns and pain points are taken care of. We were cautious in choosing the color of the buttons, how the pagination works on the page, and allowing the user some freedom on the reverse navigation, something that the users complained about. Additionally, this was an enjoyable experience as it involved a lot of user research and data synthesis. I got a teammate who helped me grow as the project wore on. In the future, we would like to see this design change being implemented as we believe that our prototype can attract a much bigger audience given our exhaustive and extensive work to refine the existing website