Nestrasil Lab Responsive Website
Project Specifications
Duration: ongoing since February 2021
Tools:
- Figma
- Optimal Sort Workshop
- Google Sheets & Docs
- Canva
- Whimsical
- Zoom
The Nestrasil Lab welcomed my request to take on the UX/UI design for building a website prototype to showcase their work and team with the aim of launching a live site by Summer 2022. Dr. Igor Nestrasil hoped for an opportunity to give an online presence for his lab so that their cutting-edge work using imaging techniques and methods could be shared with more in scientific and clinical medicine communities.
The Challenge
How might we showcase what the Nestrasil lab – with all the members, research projects, and opportunities to contribute – has to offer in a relevant way?
Research
GOALS
To begin determining how the website could provide a meaningful and relevant look at the lab, I focused on answering the following questions:
1 What does the lab want for the website to accomplish?
2 What are prospective users seeking for in a published website?
PRIMARY RESEARCH
Interviews with: (A) 3 subject matter experts who were research coordinators and doctorate level researchers; and (B) 3 potential users which included an undergraduate research assistant and post-graduates who had worked in research positions as students – allowed me to learn about the target audience’s:
Motivations
60% want to get research experience and explore career interests in research before graduating
60% also more likely to reach out to a research staff if the website was well-organized
Pain Points
50% reported they felt overwhelmed when there was too much text
33% said they may quickly move on to other sites if there was too much text and jargon
Key Takeaways
1 Engagement: users are able to not only stay engaged when pictures and videos are included along with text written in a college student-friendly way but are more likely to be curious about the lab and remember what is being presented on the website.
2 Transparency: communicating the content in clearly and simply, so that information on what the lab is doing and their mission, is important for user accessibility. Often websites that are not up-to-date with what they are doing were less likely to be trusted.
COMPETITIVE ANALYSIS
I then evaluated 2 direct and 3 indirect competitors that were mentioned or highly recommended by the interview participants.
Key Takeaways
80% of competitor sites included information about what alumni and current lab members were doing and accomplished
For the landing page:
need to have a good balance of text and images, clear and accessible call-to-actions, and professional and engaging tone overall
Navigation considerations:
organized and intuitive menus, use dropdown menus, and include only pertinent topics about the lab and its research
PERSONA & EMPATHY MAP
To keep my design solution user-centric, my research findings led me to empathized with the target users’ motivations, needs, and pain points through building a user persona and empathy map.
UX Design
As a new site, determining intuitive and simple content organization was essential, especially as many interview subjects reported feeling overwhelmed by other research/internship websites that do not have a good balance of text and imagery.
INFORMATION ARCHITECTURE
10 volunteers who had current or past involvement in a research lab were recruited to complete a card sort exercise on Optimal Workshop. To the right is a 3D cluster view result that I helped to inform some of my decisions about how to organize the website content that could be easily digested by my target users. See below for an overview of the full card sort study & key takeaways:
SITE-MAPPING
Considering the suggested card sort study groupings and feedback from design critiques, I refined the categories to better account for content priority and the user persona’s goals and needs. I also consulted stakeholders for suggestions on what content they wanted to showcase.
USER FLOW
After identifying the overlapping goal of the stakeholders and my target user persona, Sasha; the main user task I chose to explore was how might Sasha apply for an open research position through an email newsletter.
IDEATION
After determining the main screens from iterations of the site map and user flows, I sketched low-fidelity wires to explore design patterns for laying out pertinent elements and content of a research lab website.
I also identified features to prioritize based on competitor research and the stakeholder’s goals and incorporated the key learnings about content organization and navigation from the information architecture phase.
WIREFRAMES
In Figma I created mid-fidelity wireframes so that when I presented to stakeholders for feedback and suggestions for iterations they would be able to imagine the visual hierarchy and consider what user interface elements, UX writing as well as functionality to include in the hi-fi prototype.
Visual Design
BRANDING
As a brand new site, stakeholders left it up to me to discover a brand identity for the lab. I explored color, typography, iconography, and imagery on Pinterest based on the following key words to convey the lab’s brand identity:
1 Cutting Edge
2 MRI Scans
3 Simple
4 Welcoming and inclusive
UI KIT & STYLE GUIDE
For consistency throughout the website as well as in the larger context of connecting the website’s identity to the University of Minnesota research community, I developed a design system that was incorporated into the high-fidelity wires.
HIGH-FIDELITY SCREENS
I also incorporated notes and feedback from a remote stakeholder review session of the mid-fi wireframes to create these high-fidelity screens which would be used for a clickable Figma prototype (below) and usability testing.
Testing & Iterations
USABILITY TESTING
Methodology
Moderated testing of the high-fidelity desktop screens using the clickable Figma prototype (above)
There were 4 participants total; 3 were current members of the lab and 1 was a UX/UI designer with a background in research.
Participants were asked to show:
(1) How might you learn about the Nestrasil Lab
(2) How would you apply for an undergraduate lab position
Results
Overall no errors occurred with 3 of 4 participants, except for a broken prototype that prevented the 4th participant from completing all the tasks. This was a good lesson I learned about the iterative process: to (1) not make changes to the prototype I use for usability testing until after all sessions are done, and (2) make a copy of the prototype for iterations.
Despite a failed testing session, there were still positive responses to the prototype. Below are some highlights that affirmed the design decisions I made in earlier phases:
All participants clicked on the call-to-action button “Learn More About Us” and said just based on the homepage images and content wanted to get to know more about the lab.
They described the homepage as welcoming because of the images and CTAs and also liked that it was clean and intuitive for them to understand what the lab is focused on.
1 of the participants went directly to “Current Projects” page and described that the images helped her see how the lab’s research activities aligns well with what she would be looking for if she had been a new student interested in pre-med.
3 of 4 participants were able to successfully complete task of applying for a position.
50% of participants went directly to the “For Students” page to complete this task and skimmed down to the “Apply Now” button to click on that instead of reading or clicking on the “online student form” linked text at the top.
REVISIONS
In Miro, I created an affinity map to compile detailed notes of my observations from the usability testing and user feedback to the prototype. Based on what I learned, I also prioritized potential revisions & next steps to polish and complete all the website screens.
Live site coming soon!
Starting in the Summer of 2021, the Nestrasil lab stakeholders and I began creating content for launching their website. A new name was given to the website: the Medical Imaging Lab.
Since the usability testing, we reviewed updates on new pages that were not part of the first usability test session (ie. “Meet the Lab” and “Contact Us” pages) as well as layout changes to the pages we have tested usability on. Other iterations were also made to account for the UI design constraints of the Drupal Lite platform.
Evaluation & Reflection
WHAT I LEARNED
At every phase of the design process, when I did not challenge my reasons for what I chose to do, I made assumptions and technical mistakes that could have been prevented. I learned the importance of being willing to get a quality assurance check from a mentor, co-worker or pilot group before executing, for example, the card sort study and the 4th usability test session. Also I learned how grammatical errors, alignment with text blocks, and too large font size can be distracting during usability test sessions.
NEXT STEPS
1 Build out the high-fidelity screens of the remaining pages for the site such as the “Meet the Lab”, “FAQs”, and Contact Us” pages along and update the logo and UI design based on stakeholder feedback.
2 Begin working with developers to build the site on Drupal Lite and work with a content project manager for the lab to collect specific content information and images.
3 Recruit 5 more participants outside of the lab and re-test the usability of the updated website to try to get a more unbiased perspective of how easy and attractive the site is as prospective research assistants or collaborators.
Next Case Study Project: