Mentee Shriya Chauhan
Organization: AsyncAPI
Project Title: Redesign the AsyncAPI Website and Implement Dark Theme
Mentor(s): Ashmit JaiSarita Gupta & Aishat Muibudeen
Project Resources: Repository Figma Design & Project Issue
This summer, I worked on redesigning the AsyncAPI website and implementing dark mode. The goal was to modernize the website’s look and feel, improve user experience and accessibility, and reduce screen glare for better usability.
Initially, only the Homepage and Community page had new light-mode designs. My task was to extend those designs to the rest of the site, create dark mode variants, and then implement everything in code.
In total, I redesigned 10 pages in Figma, including all related components, and implemented 12 pages in code. This process involved updating content, replacing images, and redesigning icons where necessary to align with the new design system.
-
Created dark mode designs and extended light mode designs for multiple pages
-
Wrote & refined content where necessary
-
Designed and updated:
-
Navbar
-
Homepage (Dark mode design)
-
Community Page (Dark mode design)
-
Docs
-
Case Studies
-
Blog
-
Roadmap
-
TSC
-
Ambassador
-
Events
-
Newsroom
-
Tools Dashboard
-
Dashboard
-
-
Implemented redesigned pages in code
-
Added dark mode support across all pages
-
Cleaned up redundant code and created reusable components
Implemented pages:
-
Navbar
-
Homepage (Implementation + Dark Mode only)
-
Community Page(Implementation + Dark Mode only)
-
Docs
-
Case Studies
-
Blog
-
Roadmap
-
Dashboard
-
TSC
-
Ambassador
-
Events
-
Newsroom
-
Tools Dashboard
Initially, the project seemed simple, but I soon realized that the scope was much broader than expected. With so many pages being redesigned, it required significantly more time and effort than initially estimated, making the project quite demanding.
A large portion of the work went into redesigning and getting design approvals, and I often had to revisit and revise the designs multiple times based on feedback. The implementation phase was equally challenging, involving the removal of redundant code, creation of new components and pages, and updating content.
Building smaller sections that required careful UI implementation and strong frontend skills also took considerable time. The toughest part was managing both design and development simultaneously — at times, I felt that if the project had focused on just one of those aspects, it would have been much easier to handle.
Furthermore, the review and approval cycle was prolonged, as the limited availability of repository maintainers resulted in delays in receiving feedback and merging pull requests.
All pull requests were made on the website-ui branch of the AsyncAPI website to maintain visual and functional consistency.
The work will be shipped to master once it has been fully reviewed and approved.
| Work Item | Focus Area | Status / Link |
|---|---|---|
| Figma Design | Designed a modern, accessible redesign for the AsyncAPI website — defining layouts, typography, and color system for both light and dark themes. | View Design |
| PR #4424 – Dark Mode & Homepage Implementation | Implemented dark mode, redesigned homepage and navbar, updated Docs layout and icons for consistency. | View PR (Merged) |
| PR #4485 – Docs Layout & Navbar Enhancements | Added interactive “Sneak Peek” section, improved events display, responsive design, and dark mode styling across UI. | View PR (Merged) |
| PR #4553 – New Pages Implementation | Added Case Studies, Blogs, TSC, Roadmap, Events, and Ambassadors pages with full dark mode support and modern layouts. | View PR (Open,under review) |
- Implemented dark mode configuration across the website with accessible contrast ratios.
- Refined homepage layout and sections, ensuring responsiveness and alignment with the new Figma design.
- Redesigned Navbar for both themes, improving visual hierarchy and interaction design.
- Fixed Docs page icon color issues and ensured consistency across all navigation components.
- Developed an interactive “Sneak Peek” showcase displaying AsyncAPI samples and code generation examples.
- Added conference and events section with improved information structure.
- Enhanced responsive design and dark mode styling throughout Docs.
- Refined button and text hierarchy for better accessibility and mobile experience.
- Case Studies: Created card-based layouts with responsive grid and smooth dark mode transitions.
- Blogs: Built reusable blog card components, pagination, and category filters; implemented dark mode.
- Technical Steering Committee (TSC): Added member profile cards with pagination and filtering.
- Roadmap: Redesigned page with a minimal, mobile-responsive timeline layout.
- Events & Updates: Combined Newsroom and Events pages into a single, cohesive section with new design and content structure.
- Ambassadors: Rebuilt from scratch with improved card components, pagination, and responsive grid.
- Tools Dashboard: Enhanced card layouts for better readability and balance.
- Community Page: Refactored code for cleaner implementation and design consistency.
- Fix sponsor logos to ensure proper visibility and contrast in dark mode.
- Dark mode integration to cli page under tools navbar is left.
- Icon reviews through out the website.
- Board members page: Dark mode is implemented but since this page was integrated later, the design needs to be updated according to the new website theme.
- Apply new final design tweaks and refinements based on mentor and reviewer feedback.
- Conduct one more design and accessibility review to ensure visual consistency across all pages before merging to master.
I will be working on this post GSoC period till 30th Nov, 2025.
- Gained hands-on experience in collaborative open-source development, working with mentors and maintainers across time zones.
- Enhanced UI/UX design and frontend development skills through large-scale redesign and implementation.
- Learned to apply design feedback effectively and iterate quickly while maintaining consistency across pages.
- Applied my ongoing knowledge and learnings from this project to secure my current job position