NOMAD Lab
The NOMAD project's evolution resulted in a major redesign focused on enhancing accessibility and efficiency. The new platform offers a seamless experience for researchers with a user-centered design, refined information architecture, and optimized interface, reflecting NOMAD's dedication to advancing technology and knowledge.
My role: UI/UX specialist in the development team.
ABOUT NOMAD
NOMAD or "NOvel MAterials Discovery" spearheads innovative materials research through advanced simulations, data analysis, and AI. This global collaborative platform accelerates material properties prediction at the atomic level impacting industries from electronics to renewable energy.
NOMAD's website lacked a cohesive design strategy, resulting in an inconsistent and cluttered platform with a crowded information architecture. The abundance of content lacked proper structure, making navigation difficult. In addition, outdated visuals, including a mismatched logo and color palette, hindered accessibility and failed to align with the brand's identity.
THE PROBLEM
Introduction
GOAL
As the leader of the NOMAD Lab redesign, my primary task was to address significant usability challenges and optimize the user experience. I focused on simplifying the interface to clearly present features, explain mechanics, and offer guidance. Aligning with NOMAD and FAIRmat's values, I ensured the design met scientific standards while navigating the specific requirements of the research field and government funding constraints.
The beginning of the story
The site's accessibility was hampered by several issues, including poor colour contrast, inconsistent style and overloaded navigation. Furthermore, the website had obsolete links, abandoned logos, and broken user paths. In addition, interactive features such as the Twitter widget were not working, making it difficult to follow and giving the impression that the site was not being maintained.
Identified problems
Fragmented Design
The website's design lacked uniformity, leading to a fragmented and unappealing user experience.
Accessibility Issues
Inadequate attention to accessibility requirements resulted in poor contrast, readability, and usability, alienating potential users with varying needs.
Cluttered IA
Excessive and poorly organized content overwhelmed users, making navigation difficult.
Bad Onboarding
Users faced a cumbersome and confusing onboarding process, leading to frustration and decreased engagement.
Outdated visuals
The site featured an outdated logo and color palette, failing to represent the project's current identity.
Interactivity
Non-functional interactive elements reduced user engagement and disrupted platform functionality.
Ideation Phase
During the ideation phase, our team rethought the information architecture by identifying essential elements for a more usable navigation scheme. We were faced with a lot of old and outdated requirements that were critical in the past, but don't apply anymore.
-
The visual elements are eye-catching but can distract from the main content.
-
The overall design could benefit from more organized sections
-
Consistent use of colors and fonts, but the layout could feel dated and less user-friendly.
-
Many artifacts and outdated visual elements.
VISUALS
-
The home page should provide essential information about publishing, exploring and analyzing materials science data.
-
Text-heavy sections discourage users who prefer quick, scannable content.
-
The content is too vague and high-level, it should be more straightforward and informative.
-
"Less politics, more science”
CONTENT
-
The first impression is informative, but the layout feels a little overwhelming.
-
"It doesn't look like a website from 2020, it's more like something abandoned in 2005."
-
Not prominent enough to be used as a project asset and promotional tool.
-
"You can feel it's not something professional"
WEBSITE
FIRST IMPRESSION
-
The navigation menu is comprehensive but may be overwhelming with multiple dropdown options.
-
Users could struggle with finding specific information quickly due to the breadth of content.
-
Some users mentioned feeling lost, indicating a need for improved information hierarchy and easier navigation paths.
NAVIGATION
In discussions with users and stakeholders about the NOMAD platform, I focused on understanding their concerns, their vision for NOMAD, and what the website currently lacks. These conversations were crucial in helping me identify priorities and recognize unnecessary elements. This insight guided me in making targeted improvements to better meet their needs and expectations.
Design Concepts
Wireframes
The design of NOMAD involved many iterations, with early consultation with the project leader to ensure we were heading in the right direction. The team worked closely to decide which features were most important and how to present them effectively. We focused on creating a narrative that would guide users through the platform, making sure it aligned with the overall goals of the project.
Early prototypes
In designing the NOMAD, my primary focus was to ensure that users quickly grasp what they can achieve with the platform rather than simply being impressed by its features. I wanted to create a user experience that emphasized the benefits and capabilities of NOMAD and how it could enhance their journey or solve their problems. By prioritizing clarity and ease of use, I wanted the design to naturally guide users toward discovering the value of NOMAD for them rather than just showcasing its technical prowess.
Final Design
1. Visual Asset
PRIMARY
#2A4CDF
OASIS
#008A68
BLACK
#1D1D1D
COMPLIMENTARY
#192E87
CAMELS
#BF8A36
PLUGIN
#4185DF
WHITE
#FFFEFE
2. New Logo
I redesigned the project's logo because the original one was overly complicated, difficult to use, and contained too much detail, making it difficult to read or recognize. In the new design, I opted for simplified, organic symbols that better convey the core ideas of sharing and connecting, drawing inspiration from the well-known sharing icon and atomic bonds. This approach improved the logo's clarity and usability and reinforced the project's themes more cohesively and powerfully.
3. New homepage
4. Subpages
5. Mobile experience
Outcome
The website redesign, including the new logo, received strong positive feedback from stakeholders, team members, and users. People particularly appreciated the clean and elegant design, which made the site more visually appealing and easier to navigate. The simplified approach addressed previous readability and usability issues, making the platform more accessible and user-friendly.
My learnings
1. Consistent feedback loops are crucial: Regular consultation with the project manager and team helped ensure that the redesign aligned with the project's goals and user needs. Sometimes, this was frustrating because it prolonged the process, but it was worth it.
2. Clarify expectations early: I learned the importance of discussing and confirming expectations about color palettes early in the design process. This would have saved time and avoided unnecessary revisions later on.
3. Always talk to people: In the beginning, it was very difficult for me to understand what the whole project was about and how it was possible to have so many different visions for it, but with time, I managed to understand that all these perspectives were necessary and worth including. Without talking to the staff and some of the users, I couldn't create anything meaningful.