Website redesign for
New York Mycological Society
The transformation of NYMS website- Building a platform which fosters categorized information and encourages engagement
METHOD Research & Design
PRODUCT TYPE Website (Desktop)
CLIENT
NY Mycological Society
TIMELINE January-April 2023
TEAM Priyanka Jain (me)
Ruhee Shah Sacchit Vartak
Yuxin Huang
MY ROLE
UX Designer & Researcher
TOOLS USED Figma, Miro, FigJam, Zoom
Our journey with NYMS was sparked by their desire to cultivate a lively community united by a love for fungi. Sensing the need for a website overhaul, we eagerly took on the challenge. Our focus? Creating a digital space that's not just easy on the eyes, but also intuitive to navigate, packed with intriguing content, and visually captivating. Our goal? To craft an online haven where users can effortlessly dive into the world of mycology, fostering curiosity and connection every step of the way.
Overview
The New York Mycological Society(NYMS) is a mushroom club for anyone with an interest in fungi. Their website (newyorkmyc.org) contains a variety of fungi resources, organization information, and served as a hub for educating amateurs.
Our mission was crystal clear: to enhance user accessibility, engagement, and connection within the mycology community. To achieve this, we embarked on a collaborative journey with NYMS, diving deep into their goals, aspirations, and user needs.
Our approach focused on designing a platform that not only organized information but also fostered engagement and community interaction. Through meticulous planning and creative execution, we embarked on a comprehensive redesign journey, transforming the NYMS website into a dynamic and user-centric digital ecosystem.
Unveiling the Narrative: Crafting the NYMS Website Redesign Journey
In the effort to rejuvenate the NYMS website, we embarked on a journey driven by a systematic approach. We began by thoroughly understanding client and user needs in the Discovery phase, followed by organizing insights to align with the client's vision in the Define phase. Transitioning into Development, creativity flourished as we redesigned the Information Architecture (IA) and crafted prototypes, refining designs based on user feedback. Finally, in the Deliver phase, after we meticulously finalized designs based on iterative client feedback, we ultimately delivered a website that exceeded expectations through Client presentation and design documentation.
As we transitioned from the narrative of our journey to the research phase, our focus shifted towards defining clear objectives that would drive our understanding of user needs and behaviors.
Charting the Course: Navigating with purposeful Research Goals
These goals served as guiding lights, as we sought to revitalize the NYMS website experience:
1
Understanding how NYMS members find information about different events offered by the organization.
2
Learn if the information on the website is useful for users in understanding the history of the club.
3
Understanding how do users navigate and use the educational resources.
4
To gain a deeper understanding what motivates users and what they expect from the membership experience.
Conducting Exploratory Research on the current NYMS website to inform our redesign strategy
During the Exploratory Research phase, we set out to unravel the intricacies of NYMS, its stakeholders, and the existing website. We wanted to gather insights that would serve as the bedrock for crafting a purposeful redesign strategy, one that resonates with both the organization and its diverse audience.
Ecosystem Map: Understand influential roles shaping user and organization environments
NYMS: event-centric organization collaborating with other clubs.
Volunteer-based approach, prioritizing membership sign-ups and information dissemination.
Focus on fostering a diverse and active community for knowledge exchange about fungi
Technical Analysis: Understand website & user journey through existing website evaluation.
Cognitive walkthrough uncovered issues:
Terminology repetition
Inconsistency across pages
Visually cluttered design
Evaluation of the information architecture unveiled:
Empty pages
Disjointed flow between pages
Redundant information
Despite these shortcomings, the website exhibited strong accessibility, scoring above 75 on various checker tools.
Competitor Audit: Understand market dynamics, strengths, and weaknesses.
Examined primary and secondary competitors' websites.
Key aspects to an effective website - organized homepage, concise navigation, meaningful labels, consistent appearance, and well-structured content
Literature Review: To get informative insights on mycology and diversity in design as per industry standards
Emphasis on inclusivity in design
Necessity of easily accessible resources highlighted
Significance of a welcoming user experience
User Interviews and Usability testing insights:
Understanding the challenges faced by audience of the NYMS Website
1. Lost in the Web: John’s struggles in Navigating the NYMS website
Intuitiveness
Ambiguity
Did not know that NYMS provided resources like glossary and genus keys
Archives are hard to find
Rely on emails to get latest info
Rely on word-of-mouth to learn club history
Discoverability
Prefer to get knowledge from books rather than the website as he found the website not updated
2. Navigating Ambiguity: Charlie’s struggle with Clarity on the NYMS website
It is not clear to them that the mission is about education
Ambiguity
Hard to read and understand the history page
Readability
The website didn’t catch her interest because it lacked visual elements
Aesthetics
Design Principles and Strategy to create a new information system
Building on this foundation, we explored NYMS's organizational principles and engaged directly with the client to understand their perspectives, goals, and expectations for the project and the NYMS mission.
Exploring the NYMS Organizational Principles and the goals to achieve
Spread awareness by education
The New York Mycological Society’s (NYMS) mission is to raise public awareness, appreciation, and knowledge of fungi through education and research.
Foster a community of diverse perspectives
NYMS wants to foster a diverse community of mycology enthusiasts with different perspectives to enhance the learning XP.
Sharing NYMS history
NYMS wants people to share and learn more about the history and background of the society.
Raise community engagement for walks and events
As a non-profit organization, NYMS is focused on growth and encouraging participation (not conventional conversion).
From Goals to Design Principles and Strategy: Breakdown of our objectives
Our design strategy focuses on crafting a seamless experience that categorizes and prioritizes different types of information to learn about fungi and utilize NYMS resources.
We also aim to craft intuitive interfaces that are visually appealing, easy to navigate, while ensuring that all users are encouraged to engage with NYMS activities.
Charting user pathways: For a seamless interaction
To enhance the website experience for both members and non-members, we created a spectrum ranging from Information to Engagement
John’s interaction spectrum
Charlie’s interaction spectrum
Placing the Users needs at the Heart of the Experience: Info. Architecture
Our design strategy focused on creating a seamless user experience prioritizing information organization and access to NYMS resources. We aimed to develop intuitive interfaces, visually appealing and easy to navigate, encouraging user engagement.
Our approach to Information Architecture (IA) emphasized intuitive pathways for effortless website navigation.
Education Section: Introduced a new "Education" branch for beginner-friendly mycology resources.
Get Involved Section: Created a "Get Involved" branch to encourage member engagement.
Events Hub: Restructured the "Events" section as a central hub for NYMS-related gatherings.
These changes aimed to facilitate easy navigation, encourage engagement, & foster community
Early mid-fi wireframes for concept testing
In this phase of the NYMS project, we transitioned from the initial ideation stage to creating mid-fidelity wireframes. These wireframes served as a bridge between our conceptual ideas and the final design, allowing us to flesh out the structure, layout, and functionality of the website in more detail.
Ensuring Brand Consistency: NYMS Style Guide
In our design process, we meticulously crafted a style guide tailored to NYMS's digital presence. This guide encompasses everything from color schemes to typography, ensuring a cohesive and recognizable brand identity. By adhering to this guide, NYMS can offer users a seamless experience across their website.
Optimizing Design with Limited Developer Resources: Leveraging WordPress for Efficiency
Considering our clients’ limited capacity on engineers, we decided to adapt our designs into a Wordpress template to ensure the design solution is:
Responsive
Feasible
Easy to implement with pre built drag and drop elements.
The template is responsive which helps us accomplish our clients needs. It ensures that the website is optimized for all devices
Low Cost
One time purchase at a cheap price.
From Concept to Creation: Designing an Intuitive Experience for NYMS
After finalizing our designs, it was time we shared the prototype with our participants for feedback. Before we dive into what they said, let me take you through our prototypes !
Evaluating User Experience: Prototype Testing Assessment
As part of our iterative design process, we conducted prototype testing through task-based evaluation to gather insights from both members and non-members. This method allowed us to assess the usability and effectiveness of our designs, guiding iterative improvements.
“
I like that this is a lot smoother and that you guys were able to, basically, just remake the site without losing the information or fuel of the site”
Especially for the older folks it will be very familiar hopefully”
“
Education and resources, this is super nice.”
“
I like the way that history is showed in this timeline.”
“
Iterative Improvements Based on Feedback
After conducting user testing, we made several valuable changes to enhance the user experience on our platform.
Added Homepage Category
Incorporated news articles into relevant categories
Relocated Lecture Archives under Resources
Prominently placed INaturalist on the homepage
Created a specific walk feature (included in documentation)
Improved the newsletter
Optimizing Accessibility and Responsiveness: Developing Mobile Screens
As we moved forward in our design journey, we enhanced platform accessibility and responsiveness by creating mobile screens, ensuring a seamless experience for users on smartphones. Despite the template's responsiveness, we tailored specific screens to maintain consistency with the desktop version and optimize for smaller devices.
Quantifying the Impact: Enhanced Usability Scores
After conducting tests with five participants on the current website, we observed a marginal usability score of 55 out of 100 on the System Usability Scale (SUS). Subsequently, upon testing the new prototype with four participants, we witnessed a significant improvement, with the usability score soaring to 87.5. This remarkable leap, exceeding the threshold of 85 denoting excellent usability, indicates a positive trend of enhancement. Although the sample size may not be statistically significant, the notable increase underscores the effectiveness of our design improvements.
Client Satisfaction: “I am Speechless, I love it!”
Throughout the NYMS website redesign journey, our team worked diligently to transform the user experience in alignment with the client's vision. The culmination of our efforts was met with resounding praise and excitement.
Left to right: Yuxin, Prof. Hasan, Ruhee, Sacchit, Elan(Client) & Priyanka
It makes it easy for me to design. I want to start designing this yesterday!”
“
This enthusiastic feedback from our client served as a testament to the successful collaboration and the exceptional design solutions crafted to meet their needs. By incorporating their valuable input & leveraging our expertise, we achieved a remarkable outcome that significantly improved the overall user experience.
Reflections from the NYMS Website Redesign Journey
1
The collaborative effort among our team, the professor, and the client proved crucial for project success.
2
Moving into the development phase upon receiving approval and excitement from stakeholders was a significant milestone.
3
Witnessing the transformation of design concepts into a fully functional website was rewarding.
4
Our collective efforts allowed us to unlock the potential of design excellence.
We're confident that the NYMS website will thrive as an engaging platform, delighting its users.
Future Enhancements of the NYMS website
In planning for the future of the NYMS website, several key insights and recommendations emerged:
1. Member center implementation
Implementing a member center on the website would offer an array of features, including event tracking and attendee connections. Additionally, members would be incentivized with virtual rewards for their contributions and participation, fostering increased engagement, particularly among younger members.
2. Species list enhancement
To improve user experience, adding images of species alongside their names would facilitate easier species recognition, eliminating the need for users to rely solely on memory.
3. Newsletter Subscription Optimization
By integrating a newsletter sign-up in the footer of the website, we can enhance visibility, engagement, and member base growth over time. This strategic placement ensures easy access for users interested in staying updated on NYMS news and events.
These recommendations aim to further elevate the NYMS website, ensuring it remains a valuable and engaging platform for both current and prospective members alike.