Improving the usability of the COEIT research website – A UX case study.

TIMELINE: January 2020 – May 2020

To create a change, one has to be the change. The opportunity to make searching for research information simpler through better design arose when the College of Engineering and Information Technology (abbv: COEIT) came calling with its research website. I teamed up with a friend of mine who is currently pursuing his Ph.D. His inputs over the course of the project were invaluable along with the instructors.

Methods: User Research, Contextual Inquiry, Competitive Analysis, User Interviews, Usability Testing, Persona Development, Task Analysis, Heuristic Evaluation, Participatory Design, Wireframing, Rapid Prototyping.

ROLE: Interaction Designer, UX Researcher

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?

USABILITY CONCERNS

  • Inconsistent content
  • Limited to no end-user engagement
  • The site should be designed for an assortment of users
  • Verbose
  • No clear pathways on research content.

The Process

We used the double diamond method throughout the design process. We collaborated using Google Maps and enabled a divergent process. Each week, we would converge and populate our ideas with the hoping we could bring out the best redesign possible.

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.

COMPETITIVE ANALYSIS

  1. Carnegie Mellon University (Research Section) – https://www.cmu.edu/research/
  2. New York University (Research Section) – https://www.nyu.edu/research.html
  3. Massachusetts Institute of Technology (Research Section) – https://www.mit.edu/research/
  4. Palo Alto Research Center (PARC) – https://www.parc.com/
  5. University of Maryland College Park (Research Section) – https://research.umd.edu/

CONTEXTUAL INQUIRY

Once the competitive analysis was out of the way, we proceeded to our first real step of bringing in the users into play – The Contextual Inquiry. Personally, the contextual inquiry does not offer a lot as it is just observation and inferences drawn out of the participants thinking aloud. The participants were picked in such a way that their studies and interests are at different ends of the spectrum.

USER INTERVIEWS

We prepared a protocol of our own, asked them to follow the think-aloud protocol, and even 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.

As the tasks were being executed, we proceeded to take notes that allowed us 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.

PARTICIPATORY DESIGN

Notes and boards trying to prompt the user

Brainstorming ideas and coming up with two important challenges was quite an arduous task. However, we managed to single out the navigational loop, and the other difficulties faced by the user as challenges worth considering. The other usability challenge was the headings and its sizing. We noticed that headers were not synchronous with the text, and caused a lot of confusion among people.

Procedure:

Skeletal structure laid out on cards


After a 10 minute session of general navigation, we explained the major usability challenges identified from our heuristic evaluation to the participant.

We used small cards, made the skeletal structure on the cards, and made these structures into a flow diagram and asked the users for their opinion and what changes would they make. This aided in the discussion and ensured the smooth flow of the participatory design process.

PERSONAS

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

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

LOW FIDELITY PROTOTYPES

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

Dividing the page into frames
Adding color to the menu entry
Adding a UMBC home button

The designed prototypes may not have correctly encapsulated our participant’s suggestions. To verify this, member checking may be used. Furthermore, the fidelity of the prototypes will require improvement to highlight any further complications.

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 in case they want to head back to the main page.