Subtlety in design. The research website changes…

TIMELINE: January 2020 – May 2020

While research has always caught my attention, I have always believed that to reach out to a person who is involved in specific research or even search for research topics is arduous and time-consuming. To create a change, one has to be the change. The opportunity to make searching for research simpler through better design arose when the College of Engineering and Information Technology (abbv: COEIT) came calling with its research website. I jumped at that instant and teamed up with a friend of mine who is currently pursuing his Ph.D. as I knew that this was an ideal platform to showcase that LESS IS MORE. Additionally, 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

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.

divergence and convergence

We decided to diverge each week, working on individual research items and then converge in the end to populate the individual data and brainstorm what was needed.

USER ANALYSIS

The COEIT research website is a source of information regarding research in UMBC. It is used by students (Prospective and current; age 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.

While the tasks were being executed, we proceeded to take notes. These notes allowed us to code the data and effectively analyze the user’s actions which took place during the course of the interview. 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 the arduous task. However, we managed to single out the navigational loop and the difficulties faced by the user as a challenge worth considering. The other usability challenge was the headings and its sizing. We noticed that the headers were not synchronous with the text and caused a lot of confusion among people who looked only to read the headline and move on with other tasks on the COEIT research page.

Procedure:

Skeletal structure laid out on cards


After the 10 minute session of general navigation, we explained the major usability challenges identified from our heuristic evaluation to the participant. While we showed our UARs and the cards which have small interactions to the participant, he was quick to identify the fact that he also faced a major problem with the navigation in the COEIT research website.

We used small cards, made the skeletal structure on the cards and made these structures into a journey map . This aided in the discussion and ensured the smooth flow of the participatory design process. For example, the below figure shows a storyboard explaining how a newly added back button would operate.

PERSONAS

We attempted to create two personas to reflect these key characteristics of our users, which will develop an understanding of our 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 six 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 which may have arisen from these initial recommendations. While we focused on two major usability issues, namely heading sizes and navigational loops (home button, back button), other issues with high severity ratings may also need to be considered.

HIGH FIDELITY PROTOTYPES