VIETQ WEB DESIGN
Designing a LGTBQ+ Representation Platform
✱ UX/UI ✱ Web Design
Context
VietQ, a Vietnamese nonprofit organization based in Seattle, is dedicated to promoting queer representation within their local community.
Our affiliation with VietQ came through our membership in Web Impact, a student organization dedicated to to using web development and design for social impact.
MORE ABOUT VIETQ ↗ & WEB IMPACT ↗
TIMELINE
Jan - Jun 2023
TOOLS
Figma, Google Drive, Pen and paper
DESIGN ROLE
UX/UI Web Design , User Interview
TEAM
Peter Corroon, Pim Jitnavasathien, Derek Lee, Megan Tran
Problem
VietQ encountered significant challenges in maintaining an online presence and effectively fostering engagement within their community on digital platforms.
These hurdles hindered their ability to raise awareness, connect with their audience, and advance their mission effectively.
Solution
Designing a website from scratch
A well-designed website that aims to increase engagement and involvement from the community
User Research
Understanding our client’s needs
We took the initiative to assess our stakeholders, which was crucial for understanding their specific requirements and goals. This, in turn, would guide the design of our website. Our approach involved conducting interviews with the organization's founders and team members. This interactive process allowed us to gain insights and a deeper understanding of our stakeholders' perspectives.
Client’s Goal
What does VietQ want to accomplish with this website?
Our discussions with stakeholders have yielded valuable insights into their website preferences and user interaction expectations.
Promoting Engagement
Actively participating in the LGBTQ Vietnamese community, partnering with various organizations, and promoting collaboration across diverse cultures
Empowering the Community
Creating an inclusive and empowering environment for LGBTQ Vietnamese individuals in the Pacific Northwest.
Embracing Inclusivity and Celebration
Integrating and celebrating Vietnamese culture within the LGBTQ community to cultivate a stronger sense of identity and belonging.
Insights + Analysis
We outlined the design requirements resulting from these conversations and how we aim to assist VietQ in achieving their objectives.
Blogs and Story Sharing: Create a space for sharing personal stories, blogs, and community experiences.
Newsletter Signup and Contact Forms: Implement mechanisms for visitors to stay updated and easily contact VietQ.
Event Promotion and Calendar: Develop a calendar system to showcase upcoming events, workshops, and gatherings.
Resource Sharing: Provide a repository of resources and information related to the LGBTQ Vietnamese experience.
Ideation
Sketch, Sketch, Sketch
After setting our design prerequisites, we generated individual design concepts.
Prototype
First of many iterations
Along with my team, I then engaged in a collaborative feedback sprint to collectively assess everyone's input. We fine-tuned and merged the most promising ideas, leading to the creation of a low-fidelity prototype.
This prototype not only showcased a strong user flow but also seamlessly incorporated elements that resonated with the client's preferences and objectives.
Style Guide
Color & Typography
We drew inspiration from VietQ's Instagram page, which showcases vibrant and bold colors. These bold colors were chosen to mirror the confidence and vibrancy of the LGBTQ community.
Graphics
Our goal with graphics was to strike a balance between modernity and Vietnamese culture. To achieve this, we focused on crafting simple and minimalistic visuals while thoughtfully integrating widely recognized symbolism related to Vietnamese culture.
High Fidelity Prototype
Our refined design
Client Feedback
Gathering client input and feedback
Stakeholder expressed concerns
Although we had complete creative autonomy, our presentation of the high-fidelity prototype to the stakeholder resulted in their dissatisfaction with our website's design approach. Their main point of contention revolved around the incorporation of vibrant tiles and icons on the Home and About pages, as they believed these elements diverged from their envisioned aesthetic.
Graphics deviated from their vision
The stakeholder expressed a desire for a design that integrates components from their logo, with a specific emphasis on the wheat grains, where each grain symbolizes a color in the pride flag. They also indicated their preference for removing all existing graphics from the design entirely.
Redesign
With the stakeholder's feedback arriving just before the final design handover to the coding team, we faced the challenging task of quickly devising a redesign strategy that would align with their preferences.
We determined that the most efficient approach would involve simultaneous efforts by both the coding and design teams, minimizing the potential for delays. The design team will lead the redesign, maintaining ongoing and seamless communication with the coding team to ensure timely updates for each page. Concurrently, the coding team will start the development of these pages.
Final Prototype
Modern design meets cultural heritage
2. Resource and Story Sharing
Space for VietQ team to share resources and for community members to share their personal stories and experiences. We also implemented a user-friendly tag system, enabling VietQ to efficiently organize and archive their content.
3. Staying in touch with VietQ
We integrated a user-friendly contact form, allowing visitors to reach out to VietQ for inquiries and interests. We also included a newsletter subscription form, ensuring that community members can easily stay informed and connected with VietQ's latest updates.
1. Customizable calendar system
Since VietQ typically hosts only 2-3 events per month., we wanted to better highlight each event. We opted for a design approach that involves creating distinct cards for each event.
Responsive for web and mobile
The completed website represents a blend of contemporary aesthetics and Vietnamese heritage. Our design seamlessly integrates modern elements with wheat-shaped patterns, serving as an homage to Vietnam's rich cultural heritage.
Conclusion
Key Takeways
3. Embrace the Unexpected
Our design team's ability to adapt to unexpected challenges taught us the importance of staying flexible and open-minded. Being willing to explore different design ideas, rather than sticking to one rigid concept, helped us better handle these challenges.
1. Effective Communication Drives Success
Establishing clear expectations and keeping stakeholders well-informed throughout the process emerged as a critical element of our success. Furthermore, effective communication between teams played an integral role, particularly during the rapid redesign phase.
2. Including Other Stakeholders
While we had VietQ as our client and involved them in the design process, it is equally important to engage the community members who will be using the platform. In hindsight, including them in our user testing process would have been valuable.
Up Next: Alpha Theta Delta - graphic design ↗