PROCESS HIGHLIGHTS
Design challenge and responsibilities overview
Challenge
Class prompt: Learning UI/UX design through client project
Opportunity
Redesign a feature in Glansis Website to create a better searching/reading experience for researchers
Timeline
Aug - Dec 2023
Disciplines
User Interface Design
User Experience Design
Responsibilities
Design Thinking
Wireframing
Prototyping
Tools
Figma
Background
Understanding the organization and their goals
GLANSIS provides dependable information to limit the invasion, spread, and impact of ANS in the Great Lakes. This is realized through a vast collection of tools including species profiles, a specially curated invader list, mapping features, risk assessments, and more. The assistance of Dr. Rochelle Sturtevant, who is the program manager for NOAA's GLANSIS, has been invaluable in procuring feedback from customers who have utilized the website.
The redesign aims to create an intuitive, user-friendly platform that caters to the diverse needs of stakeholders by using consistent branding, enhanced search functionalities, improved aesthetics, and a more intuitive layout.
The Process
1
Discover
Identifying Problems
Defining goals
2
Ideation
Developing Solutions
User Flow
Midfidelity
3
Final Design
Style Guide
Final Prototype
Key Design Decision
4
Reflection
Next Step
Discover
Identifying Problems
Homepage
Lacks optimized visual hierarchy, making it challenging for users to navigate and access information efficiently.
Searching Page
Unintuitive categorization and input labels, leading to user confusion.
Species List page
Unintuitive sections organization, leading to user confusion and hindered intuitive information access.
Species Profile page
Poor readability, outdated color scheme and typography layout, resulting in visually uncomfortable experience that overwhelms user.
Discover
Defining the Goal
With a thorough examination of the predecessor's layout, the aim of this task is to revamp the GLANSIS website, improving its visual structure to enable a smoother retrieval of information. This will mainly target the Homepage and the Species List Generator.
Ideation
Developing Solutions
Given the knowledge that The Species List Generator allows users to build personalized lists of invasive species by selecting criteria like geographic region and taxonomic group, and provides access to detailed information via the Species Profile, here is my key solutions:
Homepage: Prioritize the key features, and maintain a clean, user-friendly design with seamless scrolling.
Criteria selection: Easy-to-use dropdowns, checkboxes, and search functions for simple customization.
Tooltips and help: Tooltips and a built-in dictionary guide users throughout the process.
Result page: Advanced filtering and sorting options for fine-tuning results.
Species Profile: Clear visual structure with organized information cards for fast data retrieval.
Ideation
User Flow
Ideation
Mid Fidelity
Mobile
Desktop
Final Design
Style Guide
Final Design
Final Prototype
Mobile
Final Design
Key Design Decision
Implemented Responsive Design
Design a responsive framework that adjusts to varying display dimensions, guaranteeing uniformity and user-friendliness on smartphones and computer systems.
Added Side Navigation
Side navigation and pop up window create a cleaner and more consistent user experience. This design choice allowed for better content organization, improved space usage on mobile screens, and a more intuitive flow for users.
Opted for card-sorted layout
Card-sorted layout combined with a facted filtered system provide users with a more structured and accessible way to explore species. Each species is presented as an individual card with a summary of the species name, category, and status, while filters on the left allow users to refine their search based on different criteria.
Reflection
Next Step
This is my first UI/UX project, and it is also what I am proud of. Although I only had to choose one search tool to redesign, it was a really fun learning experience being able to put UX design methodology into practice. I found how amazing it is to do information architecture and resize the icons and buttons to make users have a good experience while navigating through the website/interface!
If I had more time, I would definitely …
Fully developing the features of every page, deciding the color palette for the website, and adding more interaction to create high-fidelity prototypes.
Testing with more users to assess usability, get more feedback, and remove some of my own assumptions.
