National Invasive Species Information Center (NISIC)
Overview
The NISIC is the gateway to invasive species information; covering federal, state, local, and international sources.
Invasive species are plants, animals, or pathogens that are non-native (or alien) to the ecosystem under consideration, and whose introduction causes or is likely to cause harm.
On a team with four skilled designers, we were tasked with collaboratively redesigning the UI of one of the website's pages. Alongside the redesign, we diligently incorporated responsive web design principles.
Role
Product Designer
Visual Designer, Researcher, and Information Architect
November 2020-December 2020 (5 weeks)
Deliverables
Information architecture/site map, sketches & wireframes, responsive high-fidelity mock-ups, UI style guide, and brand voice.
Understanding the Problem
The NISIC is an educational resource on invasive species for various regions in America. Users, with an agricultural or gardening background, need the ability to seamlessly navigate the site for the most updated information. The site contains four levels of navigation; some links are broken and some are duplicates. The information architecture can cause confusion and frustration, which could result in users leaving before getting the information they need.
Research
To understand the prospective users of NISIC each designer conducted usability testing with three to five strangers to navigate the website. The testers had the same scenario-based tasks and completion time limits. Our goal was to identify any usability problems, collect qualitative and quantitative data, and identify where we can apply changes to improve user satisfaction.
Results
Meet: Rose
After studying the website and discussing the usability test results, Rose Chatham was collectively created as a user persona to represent a key audience.
User Scenario: Rose is an award-winning Plant Ecologist and professional gardener. She travels to various areas of the country to teach and consultant with clients. Rose would like to know more about an area’s current issues with invasive species before arriving.
Solution
NISIC has a very important role in keeping the US informed on topics that effect nature such as climate change, pollution, invasive species and more. Our goals are:
- Redesign the homepage information architect for an uninterrupted navigation flow.
- Redesign UI components for a fun user-centered experience.
- Redesign homepage to include weekly informative highlights to let users know the content is relevant and up-to-date.
Ideate
With open minds and focus on our goals, we each presented ideas for the redesign. I presented an architectural restructure for the primary and secondary navigation bar. I noticed the secondary navigation bar had broken and duplicate links. My goal was to decrease repeated jargon, simplify main topics, and reduce the amount of clicks to get to an end point.
Information Architect Restructure
I created an outline in Figma of the primary and secondary navigation. Then, I rearranged the titles to remove any redundant titles and combine similar titles to create less clutter while using the navigation bar.
Low-Fidelity Mockups
Collectively we created low-fidelity mockups of the home page redesign in desktop and mobile views. The primary and secondary navigation were updated. We reimagined a page that is simple where users have immediate access to emerging news, weekly invasive species highlights, and various events around the nation. Several concepts were reviewed before choosing the final layout.
UI Style Tile
For fun and to test our creative skills, we worked on a UI Style Tile drawing inspiration from a moodboard that consisted of pictures related to nature. The style tile contains a variety of elements such as colors, typography, shapes, lines, textures, and certain UI elements that provide a guide to the redesign. One new element to highlight is how the titles on the navigation bar would resemble leaves when hovered over. In the end, we created a high-fidelity home page using the low-fidelity outline and elements from the UI style tile. To influence the style, perspective, and personality of the website we chose adjectives such as Educational, Trustworthy, Engaging, Powerful, and Trendy.
Final Redesign
The team created a responsive web design to ensure a seamless and optimal user experience across different devices and screen sizes.
Final Takeaways
My First Thoughts
I believe the overall project was a success. The team set out with a goal to redesign the primary and secondary navigation to reduce information clutter and create an engaging UI. Using the current sitemap as a guide, we saw where users could get confused and have navigation flow problems. Many pages shared the same name but did not lead to the same endpoint. A new sitemap could improve functionality. It was a great learning experience with team members who provided valuable insights.
Challenges We Faced
Managing all of our ideas on a tight deadline. Effective communication allowed us to implement most of them. We set aside the remaining ideas for future projects.
Making sure to decrease visual clutter on the mobile application view while redesigning the desktop view. The Invasive Species page has long list of related subtitles that we could not group together.
Finding the right balance between aesthetics, functionality, and usability. Sometimes I got carried away, with excitement, by adding too many interactions. I remember to reflect on our "why" and desired outcomes.
Learning it is easier to design screen sizes from small to large. We found ourselves in a dilemma and press for time when we added content on the desktop view that would overcrowd the mobile view.
The government website: https://www.invasivespeciesinfo.gov/ . Check it out!
