Redesigning the Liquid Galaxy, an open-source project from Google

- brief -

Redesigned the Liquid Galaxy website, an open-source project from Google, to enhance its user experience and information architecture. The redesign aimed to improve responsiveness, readability, and overall user interaction. The project was completed in 7 days and involved XML, HTML, CSS, JavaScript, and Google Blogger template editing. The wiki addition was built in React and took 4 weeks to complete.

- context -

Liquid Galaxy is an open-source project with a significant online presence. It's a presitigious organization participating every year in Google Summer of Code with Student Contributors, Mentors and Org Admins from all around the world. The website required updates to better serve its users and reflect the project's current status and offerings. The original site had issues with responsiveness and information architecture.

- problem statement -

The website had readability issues on various screen sizes and outdated information architecture. Key challenges included:

Ensuring the site was fully responsive across all devices.

Streamlining navigation to improve accessibility and user experience.

Updating content and design to reflect current project priorities and developments.

- crafted solution -

Information Architecture (IA) Changes:

Revised Navigation Menu: Simplified and reorganized the navigation bar to prioritize current and relevant information, such as Google Summer of Code (GSoC) and major project updates.
Removed Obsolete Items: Eliminated outdated sections like old GSoC pages and reorganized content to highlight current and active projects.

Responsive Design Improvements:

Enhanced Readability: Ensured the website's design adapts seamlessly to various screen sizes, addressing previous issues with clipped content and readability.
Responsive Design Techniques: Utilized CSS flexible grid layouts to create a layout that adjusts dynamically to different devices.

- UX Case Study: Enhancing Liquid Galaxy's Design and Information Architecture -

Objective

To create a more user-friendly, responsive design for Liquid Galaxy, ensuring better information architecture and improved user interaction based on established UX principles.

Key UX Principles Applied

Jacob's Law: Users prefer websites to work in the same way as others they are familiar with.
Krug's First Law of Usability: "Don't make me think." The design should be intuitive and straightforward.
Simplicity Principle: Simplified the design to enhance usability and reduce cognitive load.

Design Improvements

Responsive Design: Ensured the website adapts seamlessly to various devices and screen sizes.
Information Architecture (IA)
- Simplified navigation structure to help users find information quickly.
- Organized content into clear, logical categories.
Visual Design
- Updated the visual hierarchy to guide users' attention to key areas.
- Enhanced readability with better font choices and spacing.
Interactive Elements
- Added interactive maps and visualizations to engage users.
- Added a Liquid Galaxy wiki for all the important Q and A.

User Satisfaction

Feedback Scores
- Before Redesign: Average satisfaction score of 7/10.
- After Redesign: Increased to 9/10.
Information Accessibility
- Before Redesign: Users took an average of 5 clicks to find key information.
- After Redesign: Reduced to 3 clicks.

Conclusion

The redesign of Liquid Galaxy's website, guided by UX principles and laws, significantly improved user experience and engagement. By making the site more responsive and restructuring the information architecture, users can now navigate the site more intuitively and access information more efficiently.

Liquid Galaxy Website ↗