Overview
During a three-week UX design bootcamp project, we collaborated with the Hmong Cultural Center in Saint Paul, Minnesota—a pivotal community hub offering diverse programs from traditional embroidery to citizenship courses. Our mission was to redesign their website, enhancing its digital presence to better serve the community. We aimed to revitalize the center’s branding, streamline information architecture, and create a compelling visual identity. Ultimately, our goal was to improve user accessibility to resources, foster community engagement, and strengthen connections with the Hmong Cultural Center.
My Role
I served as the sole prototyper while also leading user research, interviews, testing, finalizing design screens, and developing the visual identity.
Tools
Figma and Figjam, Miro, Trello, Otto.ai, Adobe Creative Suite (Photoshop, Illustrator), Zoom
Scope
1. Discovery Phase:
• Conduct stakeholder interviews
• Perform user surveys and interviews
• Analyze similar cultural center websites
• Review existing website content
2. Strategy Phase:
• Develop updated branding guidelines
• Create a new site map and navigation structure
• Develop user personas
• Map out user journeys
3. Design Phase:
• Develop low-fidelity wireframes
• Create high-fidelity prototypes
• Conduct usability tests
• Ensure responsive design
Design Process
My team used the Double Diamond design thinking framework which broke the project into four key phases:
1. Discover: I begin by exploring the problem space, conducting research to understand user needs and uncover insights.
2. Define: I then synthesize findings to clearly articulate the problem, establishing a focused design brief.
3. Develop: In this phase, I brainstorm and prototype potential solutions, iterating based on user feedback.
4. Deliver: Finally, I refine and implement the solution, ensuring it meets user needs and business objectives.
By following these steps, I can navigate the complexities of design challenges and deliver impactful, user-centered solutions.
1. Discover
What’s already there?
The initial phase involved reviewing the current HCC website and conducting a Heuristic Analysis to evaluate its functionality, aesthetics, and accessibility. Unlike typical site redesigns that include competitor analysis, the HCC, being unique to the area in its offerings, led us to analyze sites targeting similar markets and goals. You can find the detailed analysis report here.
What’s already there?
Next in our Empathize step was to create and distribute a survey aimed at users who may approach either any 501c3 non-profit site, or users who might seek community engagement from others of their own culture. Along with this, we also had users view the original HCC site and respond to various interview questions. From both of these user-centered sessions, we were able to begin forming a skeletal version of what would truly beget success in the experience of a new user.
2. Define
User Persona
Meet Mai Yer Xiong
The initial phase involved reviewing the current HCC website and conducting a Heuristic Analysis to evaluate its functionality, aesthetics, and accessibility. Unlike typical site redesigns that include competitor analysis, the HCC, being unique to the area in its offerings, led us to analyze sites targeting similar markets and goals. You can find the detailed analysis report here.
Empathy Map
What are points that we as designers need to empathize with to make a website for our user persona?
Based on the user persona for Mai Yer Xiong, a 29-year-old first-generation immigrant from Laos in Saint Paul, MN, it’s clear she faces several challenges. She struggles with limited English proficiency and a desire to connect with her Hmong community while integrating into broader society. Mai Yer experiences frustration navigating websites with dense text and seeks clear pathways to citizenship and English classes. She often relies on her children for translation and feels isolated despite living in a diverse city like Saint Paul. To address her needs effectively, the website should prominently feature easy-to-find links for citizenship and English classes, showcase community resources, and offer a user-friendly interface with minimal text. Hyperlinks strategically placed throughout can guide Mai Yer through an intuitive customer journey, facilitating her path to greater confidence, job opportunities, and social integration.
Problem Statement
Guiding Questions
3. Develop
Information Architecture
Information Overload!
The old site map presented one of the largest problems for Mai Yer and our other primary users: too much information! Many links were redundant, confusing, or just plain unnecessary. And some of the most important and useful parts of the site were buried several clicks deep — a very frustrating user journey for English language learners.
User Flow
Updated and streamlined access to classes
This user flow was made to describe the journey that Mai Yer Xiong or another user would take to complete different tasks in the website.
It was time to hit the drawing board…
Paper Wireframes
Next, I sketched paper prototypes and then moved on to developed mid-fidelity prototypes after we conducted user testing, concentrating on streamlining the design and enhancing accessibility for English language learners.
Our primary question, posed by Mai Yer Xiong, was: How do I sign up for language classes?
In these excerpts, you’ll see that our main focus in the user journey plans was to map out this path quickly and easily, with minimal visual noise.
Mid – Fidelity Wireframes
Modular Design
During the mid-fidelity wire framing phase, we faced a tight deadline and had to rush the process to complete it in just 1 day. Given the time constraints, I prioritized interaction design and implemented modular design patterns to ensure consistency and efficiency. My focus was on keeping the design visually centered and intuitive, enabling a seamless user experience despite the rapid turnaround.
UI Design Kit
Vibrant Clarity
We developed a vibrant color palette featuring fluorescent greens, pinks, and blacks for striking contrast, inspired by traditional color schemes. For our logo, we chose the elephant’s foot, a symbol of community and family. We used the Outfit font for its clean, uniform, and bold appearance, ensuring a modern and cohesive look
4. Deliver
Final Design
From Mid-Fidelity to High-Fidelity in Three Days:
In just three days, I translated the mid-fidelity mobile wireframes into high-fidelity mobile and desktop mockups. This rapid transformation involved refining the initial designs to create polished, pixel-perfect prototypes ready for development. The high-fidelity mockups maintain the simplicity and user-friendliness of the mid-fidelity wireframes while incorporating the detailed visual elements that bring the Hmong Cultural Center’s vision to life. The efficient design process ensured that the final product was both functional and visually appealing, meeting the needs of the center and its users.
High-Fidelity Figma Prototype
Below are the high-fidelity prototypes embedded from Figma, showcasing both mobile and desktop versions of the design.
How does our MVP effectively address user needs?
Hero Image for ESL and Citizenship Programs
Streamlined Access to ESL and Citizenship Programs
This feature was integral to our MVP as it facilitated immediate access for users with limited English proficiency to find and enroll in ESL and citizenship courses. By prominently featuring a centralized hero image, users were directed straight to the signup process, eliminating the need for navigation through menus and streamlining their journey effectively.
Enhanced Navigation Menu
Simplified and Color-Coordinated Menu System
I created a cohesive menu design system for both mobile and desktop platforms. This new design simplifies the user journey by organizing items more intuitively, ensuring ease of navigation while retaining all the unique features that make the site special. Additionally, I incorporated a variety of colors for each page to enhance coordination and tie in the brand colors, creating a visually cohesive and engaging user experience.
This system allows our user persona to easily find relevant sections of the website, particularly the English classes. The navigation is more central and brightly highlighted, making it significantly easier to locate and access important information.
Focus and Branded Headers
Highlighted Header Banners
I designed header banners that highlight section headings, incorporating the branding color palette and a triangular frame. This design choice draws the user’s focus directly to the corresponding content, enhancing readability and engagement. The banners help users quickly identify and navigate to the sections that are most relevant to them, creating a more intuitive and visually appealing experience.
Other Screens
All screens for both mobile and desktop maintain consistent branding and design elements, ensuring a cohesive user experience throughout the platform. This approach not only enhances usability but also reinforces the site’s identity, making navigation intuitive and content consumption seamless across different devices.
Future Developments
The journey continues 🙂
Our team was so pleased with the work we were able to achieve in 3 weeks, from user research to ideation to prototyping. At the same time, there are so many more features we envisioned for this project. If there’s another chance, these are some of the future developments and designs that I considered for the app:
Takeaways
🎨 Strong Design Systems = Success
Developing the Hmong Cultural Center redesign underscored the importance of a robust design system. By establishing consistent visual elements, including color palettes, typography, and layout principles, I ensured that the website was cohesive and user-friendly. This approach facilitated easier navigation for English language learners, emphasized key offerings like ESL and citizenship classes, and integrated Hmong cultural elements into the visual identity seamlessly.
⏰ Sprint to Success
Managing a comprehensive redesign within a short timeframe highlighted the necessity of efficient workload management. By prioritizing tasks, setting achievable milestones, and employing agile project management techniques, I successfully navigated the tight deadline. Multiple planning sessions with team members allowed for collaborative brainstorming, decision-making, and alignment on project goals. Clear communication and strategic decision-making enabled me to focus on essential design iterations and deliver a high-fidelity prototype for both mobile and desktop interfaces, meeting project goals effectively.