Improving the usability of the COEIT research website – A User Experience study

Prototype gif
TIMELINE: January 2020 – May 2020

INTRODUCTOIN

Searching a website should be an easy task. However, this may not always be the case. Some websites may present information in a way that the user often leaves to check out other websites. The College of Engineering and Information Technology (COEIT) research website is one such website. This was a semester project and I teamed up with Hirak Ray who is currently pursuing his Ph.D. His inputs over the course of the project were invaluable along with the instructors.

My role: Conduct User research and synthesize the data to improve the usability of the College of Engineering and Information Technology’s research website as a part of a semester-long project.

Team Members: Anirudh Nagraj , Hirak Ray

THE Brief

With the growing number of researchers and internet readers alike, how can we improve the usability of the COEIT research website of UMBC to better showcase the research done at the institution?


Research websites are generally verbose. So it must be said that people would like to look through the headlines and then proceed towards the website’s actual content. The COEIT research website was identified by people to be a little gaudy on the eye and have some prevailing issues that make the user shy away from the current website.

When the opportunity did come along, we had little to no idea what the usability concerns were and the best approach. We sat together to brainstorm about the different ways in which we were going to approach the problem and the type of process that was to be implemented. As we were two people in this project, we decided to use the double diamond method as it offered us a chance to converge and diverge after each sub-task that was completed.

Process

Double Diamond Method

We used the double diamond method throughout the design process. We collaborated using Google Docs and enabled a divergent thinking process. At the end of each week, we would converge and populate our ideas and iteratively work on them.

We worked independently in the beginning to explore some of the critical questions that were projected from looking at the website at a glance. We wanted to know who the users are, which other university or lab has a research website, some of the initial usability concerns identified by past users that remained unanswered. What is the metric for the site to perform well, etc.,

User Analysis

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.

Competitor Analysis

We wanted to know what the other research websites offer, both in terms of the positives and the negatives. So each of us went into searching for other university research websites. We compiled our findings and narrowed into 5 websites for reference and analysis.

Some Usability Concerns – As identified previously by users

We spoke to the website administrator to get to know the initial usability concerns, and they gave us a document entailing the issues. Some of the issues are highlighted below. This gave us an idea of how to go about things when we would start our research phase.


We wanted to focus on getting more out of the website by conducting thorough User Research. Both of us were particular about obtaining as much Qualitative Data as possible. We brainstormed on whether we wanted to conduct generative research or evaluative research. In the end, we opted for a hybrid approach because we wanted to have concrete data on our hands so that we could easily spot the main improvement points when we began designing eventually.

Contextual Inquiry

Once the competitive analysis was out of the way, we proceeded to our first real step of bringing the users into play – The Contextual Inquiry. Contextual Inquiry gave us qualitative data on some of the user’s thoughts based on pure observations and think-aloud. The participants were picked so that their studies and interests are at different ends of the spectrum. This allowed us to gain a wider range of data, given the diversity. This was the first step in the research for the project.

User Interviews

Continuing with our generative research, we began recruiting participants. Our participants comprised of students, faculty, and researchers alike. A SEMI STRUCTURED FORMAT was followed. We prepared a protocol and the questions of our own and included the permission to record/take notes. To ensure confidentiality, we included the assurance that personal data would not be used anywhere. Although we proceeded with the general flow of navigation, we did probe the user at specific points to get the most out of the interview. Probing the user is like threading a thin line; the users should not be pressurized at any point in time during the course of the interview.

This gave us loads of qualitative data and we were able to dive into some of the subtle aspects of improvement for the website.

As the tasks were being executed, we proceeded to take notes to code the data, thereby effectively analyzing the user’s actions. This analysis leads to us chalk out patterns and identify the major pain points of the user.

Before we jumped into the persona and the redesign, we wanted to do a thorough analysis of the websites by ourselves and we both agreed that a Heuristic Evaluation was the way to go.

THE HEURISTIC EVALUATION

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).

In the UARs, Name refers to the element of the website which has an issue, Evidence refers to the heuristic which is being violated, and Explanation describes the issue in detail. One evaluator found 9 issues, whereas the other found 11. Out of these 20 issues, one issue was mutually identified and highlighted, bringing the total to 19 UARs.

UAR of the issue highlighted by both members of the team.

Overall, the website appears to be quite usable and functional but is highly prone to cause annoyance and irritation for users due to multiple usability concerns with relatively simple solutions. The evaluators’ multiple issues also coincidentally relate to common concerns held by our participants from previously conducted studies involving contextual inquiries, direct observations, and interviews, which shows common ground between experiences among experts and novices alike.

Participatory Design

Brainstorming ideas and coming up with challenges was quite an arduous task. However, we managed to point out the navigational loop (navigating from one page to the other without knowing what to click to come back to the initial page) and the other difficulties the user faced like the headings and its sizing as challenges worth considering. We noticed that headers were not synchronous with the text and caused confusion among people. This led us to take some time out and conduct a participatory design session to get a better idea of what the design will look like.

Procedure:

We used index cards to draw skeletal site structures and asked the users for their opinion and what changes they would make to the same. This aided in the discussion and was a bonus to our participatory design process. At the end, we wanted to know what the users would want and what their preferences would be when the revamp eventually happens.

Personas

We created two personas to reflect the key characteristics of our users, which aided us in developing an understanding of current users and potential users.

** all images used for personas were obtained as stock images online.

Keeping these key characteristics in mind, we created our personas accordingly. Mary Carpenter embodies prospective students excited about research and looking forward to their future. She aims to seek new knowledge and has an inquisitive nature. Being new to the research world, she wishes to find contact information for possible mentors. On the other side of the coin, Dr. Andrew Myers reflects participants in relatively advanced stages of their research careers. 

With experience comes self-independence and pride, as shown in our studies. Andrew’s needs were also motivated by our participants, one of which was a professor in search of funding. Andrew’s experience and time constraints also contribute to his nature of being impatient while scouring the internet for resources, a sentiment shared by our participant who mentioned that he wouldn’t spend more than thirty seconds on a website with the sole purpose of searching for funding opportunities.


Low Fidelity Mockups

We continued to low fidelity using a combination of sticky notes and sketches. The design of the prototypes was mainly motivated through our Participatory Design session with all the 6 participants involved, as well as considering the UAR from the heuristic evaluations (which showed mutuality with findings from previously conducted contextual inquiries and interviews)

The designed sketches may not have correctly encapsulated our participant’s suggestions. To verify this, 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. Furthermore, the fidelity of the prototypes will require improvement to highlight any further complications.

Medium Fidelity Mockups

Converging again, we set out to make medium-fidelity mockups to bring to life the content on paper. We used draw.io to make these sketches. Medium fidelity prototypes gave us an idea about the placement and the working of the new designs. We were careful to incorporate incremental development to the website as we firmly believed that radical changes would hurt the users.

High Fidelity Mockups

We added minor changes to the website as we believed from incremental development right from the off. We proceeded to add a home button to round out the navigation. A feedback button that is evident and easy to identify. Additionally, A color change that works best with the design scheme of the website.

HOMEPAGE

SUB Pages

FORMS

Now the website uses Google Forms. We made it more intuitive and in sync with the color scheme and made a personalized form. This includes a back button for the user to go back if they want to head back to the main page.


RESEARCH QUESTIONS ADDRESSED

The Developed Prototype look to address the following research questions:

  1. Is the banner of the “College of Engineering and Information Technology” legible?
  2. Can users easily identify which page they are currently on?
  3. Is the website consistent with UMBC’s theme?
  4. Can users identify how to navigate to the Home page?
  5. Can users efficiently navigate through the website?
  6. Do users know where and how to submit feedback on their experience?

The Prototype

Considering all the data collected, synthesized, the researchers came together to collaborate on Adobe XD to create a prototype that had incremental developments to the current version of the website. These minor increments played a major part in enhancing the usability of the current website.

https://xd.adobe.com/view/06e13530-77e8-4605-9876-14dc804996f9-53b2/


The Takeaways

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. In Hirak, 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.