My role in this project and brief description of the project.
Role: researcher, UX/UI designer, user testing
Durations: 12 weeks
Tools & Software: pen, paper, google form, figma, zoom
Stakeholders: 17 team members
Background: Sông2Sea (S2S) is an organizing collective of people with ancestral roots in Việt Nam. Their philosophy is that “even though gourds and squash are different species, they ought to love one another because they grow together.” They want to support the most marginalized members of our community; those whose needs often go ignored. This organization was established back in 2021 and is still growing in the community. They need an official platform where they can showcase their work.
Goal: To create a responsive website for S2S that showcases their philosophy through the work that they put out into the community. The website should have resources for community members to have access to, show mutual aid information, and any events or fundraisers that are currently running.
Quick rundown of the research process. I started my research by asking the S2S's graphic designer for references and review their creative brief together.
Objectives:
- Establish a web presence outside of Instagram to communicate and boost their credibility
- To provide quick information about their organization
- To create more visibility for collaboration with community partners and fundraising opportunities
- To enrich community knowledge and power
Methodology
1. Group discussion with the S2S team
Doing a first meeting with their graphic designer and then meeting the rest of the team after. We discuss expectations of each other and different concepts of the website. Also went over what is a priority for the design and timeline.
2. Competitor Analysis
Their graphic designer showed me a different organization's website to reference what type of content that they aim for on their website. I critiqued the overall design and aesthetic.
Cầu Kiều Collective
The highlights of this organization's website:
1. Hero Section: shows their latest news and blog
2. Tiếng Việt Section: articles that they write or translate into Vietnamese
3. Newsletter: Keeps the audience connected to come back
Click on the right image to view a full screenshot of the website.
Persona
Here we have Jennie Huynh who I have created based on my research. We want to have a persona that is in S2S's target audience. Jennie was born and raised in Washington in their late 20s. They want to be more involved in their community but because they are not familiar with outreach, it can be difficult to find a starting point. S2S will be accessible for everyone to learn about the Vietnamese diaspora and many more.
Click on the left image to enlarge it.
Mapping out the layout of the website and what contents goes where.
Based on the team discussion and competitive analysis, I created a sitemap. The Cầu Kiều Collective has a total of 6 categories in their navigation and I figured that S2S should have around the same amount. The website shouldn't be too complicated as it should provide resources and community news.
With the sitemap completed, I started to create sketches of the screens that I later created a prototype. The idea here was to sketch the pages that the user and task flow will need.
Creating the flow of the application for a user and a single task.
User Flow Goal: Users are exploring the website to view content that they are interested in.
Task Flow Goal: Users should be engaged with S2S’s content and get the resources they are looking for whether it is to participate in their next projects or get community resources such as homeless shelters or food banks.
Making sketches into digital.
Based on the S2S team's input and Cầu Kiều Collective's website, the wireframes cater to what is important to showcase at the launch of the website.
The homepage has a hero page to highlight the organization and right below that showcase current news and events happening. The rest of the pages are specific needs that the S2S team needed. They wanted to have sections to write and share upcoming organization projects and/or events.
The brand logo, style, and UI kit.
S2S's graphic designer gave me their color palette and so I built of from that theme. The keywords from their creative brief were "Tasteful Maximalism", "Vibrant", and "Retro". This UI kit was my interpretation of their brief. I was given full control over the overall design and layout of the website.
Showing the prototype of the S2S team to receive feedback and then making revisions based on it.
Updated UI kit & homepage. Click on the images to enlarge.
Working with a real client made me learn to have patience and keep a realistic timeline. I learned to ask for detailed feedback so that I can create a product that the client is truly satisfied with. I enjoyed working with the S2S team and I look forward to continuing working with them after this project.
Priority Revision
Based on the team feedback, the next revision should be replacing some of the placements photos with more river influence so the theme blends in more. Continue working through the other pages with the same concept. Within the next few weeks we will kick off the next phase of work.
Next steps for this project:
Continue working through the other pages of the website and receive feedback one by one.
