The design component library effectively streamlined collaboration between design and engineering teams and facilitated updates to the website.The new website was successfully launched on schedule, aiding the event hosts in smoothly running an event attended by over 2,000 people.
Based in Silicon Valley, ZaiGeZaiGu (ZGZG for short) is a reputable Chinese cultural nonprofit organization that originated from Google. Run and maintained completely by volunteers, ZGZG organizes events focused on culture, career, and networking. Through annual offline events, ZGZG creates a supportive space for Chinese-speaking immigrants that fosters a sense of belonging.
As the organization continues to grow, the old website needs a new design to meet the increasing demands for functions.
We initiated the process with UX auditing to find out specific issues lie in the current website, which furthermore helped us to define the scope of work.
During meetings with developers, we recognized that since the website relies heavily on volunteer maintenance, new volunteers often face guesswork and inconsistency. This realization also prompted us to consider the human element: who are the users and individuals involved with the new website?
We gathered feedback and insights from volunteers who had closely collaborated with the existing website team or members of them. To gain insights of the event attendees' experiences, we collected their comments from various social media platforms where they are most active in leaving feedback. Ultimately, we identified three key personas who would benefit from an enhanced website experience.
Based on the insights we derived from the UX audit and main user personas, we identified and prioritized areas that are important and urgent to address:
The first task I took on was to address the issue of disorganized sponsor information on every event page. The new design aims to solve several issues that will significantly improve the overall experience for event volunteers and potential future sponsors:
The marketing team primarily uses WeChat official account to post notices about seeking sponsors, sponsors’ benefits, and various sponsorship levels.
While sharing information on mobile devices via WeChat is convenient, this approach overlooks the potential to attract sponsors through Google searches and the broader internet.
Additionally, business owners who are not WeChat users can’t easily access this information online.
After a discussion with the product manager, we agreed that dedicating a standalone page to sponsor information was the best solution.
Once sponsors confirm their support for an event, their introductions will be published on the website. I created a list item, integrating feedback from the marketing team about the final content to be displayed on the site.
Going through if there are section that design logics are unclear, if any component can be replaced by designed ones to maintain consistency, or current design need adjustments.
Each page has a hero. Based on the identified scenarios, I designed different text format.
Each page contains various content categories that can be organized using tabs.
I observed that certain card contents required buttons, while others did not. Accordingly, I redesigned the cards to suit these varying scenarios.
To create a comfortable browsing experience for the audience, I collaborated with peer designers to create a color palette that is still aligned with the original branding but accessible. We selected Noto Sans as the font, which is compatible in both English and Chinese. After learning more about suggested design practices for website typography, we implemented it with optimal line heights and sizes.
Headers and buttons are critical components that appear on nearly every web page. When designing these elements, my team and I carefully considered the various states users would encounter during interaction, such as hover, active, and disabled states. We appropriately documented in the design system, accounting for different device types to create a responsive experience. This comprehensive approach allowed us to maintain consistency and accessibility across the platform, empowering designers to create cohesive designs while providing engineers with clear references for implementation.
In the process, I found that as designers we tend to create various design solutions for edge cases, which is unavoidable. However, do we really need to design something different for every edge case we consider? A clear design philosophy and well-defined rules will make engineers' life easier when it comes to implementation, especially when the timeline is pressing. Designers will also get fewer questioning on the design decisions.