NLI Redesign CSS
Date: March 2024
Role: Graduate Communications and UX Design Assistant
Link: https://naturalearning.org/the-nli-websites-new-look/
Client: Natural Learning Initiative
Role: Graduate Communications and UX Design Assistant
Link: https://naturalearning.org/the-nli-websites-new-look/
Client: Natural Learning Initiative
In 2023-2024, I spearheaded the redesign of the Natural Learning Initiative's website by developing and implementing a new global CSS to enhance the user experience. This redesign was crucial as the website attracted over 40,000 visitors in 2023, with half accessing it via mobile devices. The original site was built on a WordPress blog theme with CSS that wasn't optimized for mobile use.
The updated CSS introduced several improvements, including:
Enhanced Mobile Accessibility: Readable font sizes, edge-to-edge page margins, and finger-friendly button padding.
Visual Accessibility: WCAG AA-rated color contrast for better visibility.
Responsive Layouts: Flex and grid designs to reduce scrolling and optimize content display across devices.
Research and Process:
Analytics: Over 40,000 visitors in 2023, with mobile browsers accounting for half.
Challenges Addressed: Non-responsive design, small fonts, and excessive margins hindering mobile usability.
Tools Used: Google Analytics, WCAG color checker, FigJam for brainstorming, and Adobe Dreamweaver for CSS development.
The redesign also introduced new breakpoints to accommodate the "tablet" screen size better and utilized custom classes to standardize common components. The updated site provides a modern, immersive experience, preserving the NLI brand's essence while enhancing navigation and content accessibility for all users.
