YEW!
YEW! is a mobile application aimed to boost volunteer engagement within the surf community in SoCal to build a more tight-knit community and a stronger sense of ocean conservation.
ROLE
UI/UX Designer
TOOLS
Figma
Google Forms
TIMELINE
2022 Mar;
10 weeks;
Course Project
Skip to Prototype
INTRODUCTION
California is not as perfect as it seems.
California is known for its sunny beaches and blue skies, but in reality, it's not picture perfect as it may seem.
Living and surfing in Los Angeles, I have experienced the effects of ocean pollution first-hand. Its not rare for surfers' hands and feet to be covered in tar and trash. This is a community of people who interact with the ocean frequently and care deeply for it, thus making them the perfect crowd to tackle the problem of pollution.
PROBLEM STATEMENT
80% of pollution to the marine environment comes from land.
This project aims to target the United Nations Sustainable Development Goal 14, Life Below Water, by creating a platform to make volunteering easier and more accessible.
By compiling all relevant information related to volunteer events hosted by different organizations, users can quickly get involved in volunteer communities without feeling confused or intimidated.
COMPETITIVE ANALYSIS
What's wrong with current volunteering websites?
To understand the current products on the market targeting similar issues, I conducted a heuristic analysis on the California Surfrider Organization and the The Ocean Protection Council using Jacob Nielsen's 10 Usability Heuristics.
California Surfrider Foundation: The website is well-rounded regarding information, links, and places to donate. However, each region has a separate website which can be confusing for the user to navigate. (Eg. Los Angeles Surfrider)
Ocean Protection Council: There are multiple missing and nonfunctional links; thus, it is very hard for the user to navigate through and understand this site's purpose.
CONTEXTUAL INQUIRY
What does the Californian Local say?
I interviewed a passionate Californian surfer with experience in polluted waters, gaining valuable insights into user perspectives, such as the intimidation factor new volunteers feel when joining community events. These insights steered my project towards prioritizing user-centric functions and features over product-centric ones.
QUOTE FROM INTERVIEW
“I think the intimidation factor is very real for a lot of people. Getting involved with a new community can always be scary.”
- Ty, SoCal local
LOW FIDELITY PROTOTYPE
Testing the wire-flow functionality
Based on my conclusions from user research, I visualized the concepts into two main features as low fidelity prototype screens to test the functionality of the wire flow.
FEATURE 01
Recommend volunteering opportunities based on the user's location, interests, and time availability.
By compiling relevant volunteering information from various organizations, users can easily browse and find events.
FEATURE 02
Allow users to socialize with one another through posts, comments, likes, and shares.
To keep users engaged with one another, a dedicated social factor can encourage more activity amongst the surf community.
FEATURE 01 LO-FI FLOW
FEATURE 02 LO-FI FLOW
LOW FIDELITY USER TESTING
How well does it really flow?
After completing the first draft of the low-fidelity prototype, I asked a user to help test the two features of the application in terms of navigation, flow, and how natural it felt. The video was recorded on Zoom while screen-sharing on an iPad.
TASK
Log in and register for an event.
Notes: green arrows are moving forward with the task, red arrows allow the user to move back between screens, and yellow and purple are recommendations from the user.
USER TESTING ANNOTATIONS
RESULT
The user was able to successfully complete the task.
This low-fidelity prototype was a quick and easy way to check whether the system flowed logically.
RECCOMENDATIONS
Always have a 'next' button
The user felt lost without the 'next' button on screens 1 and 2 in feature #1. Always present a 'next' button on pages to eliminate dead ends in the design.
Use industry-standard icons to increase familiarity
The user was unsure whether the home or safari icon led to the friends feed screen vs. the event recommendations screen.
REVISED LO-FI PROTOTYPE
INTERFACE DESIGN
A modern, intuitive, and ocean-themed interface.
LAYOUT
Clean and spacious
The application offers users breathing room for comfortable viewing and reading by incorporating a slightly larger gutter that doesn't fully occupy the screen. Additionally, the layout generates appropriately sized images to attract the user's attention.
TYPOGRAPHY
Circular STD
The font Circular STD was chosen to create a modern, clean, and sleek interface for the platform. This aligns with the goal of minimizing clutter and encouraging event registration by ensuring information is easily readable and legible.
COLOR PALETTE — LIGHT MODE
The shades of the ocean
Teal is a staple color of the ocean, and to the surf-community this color intends to evoke familiarity and a feeling of freshness. It is not overwhelming but vibrant to create fun and engaging designs.
SHAPE VARIATIONS
Friendly Corners & Padding
To create a friendlier vibe, a 15px corner radius adds a soft, welcoming touch. The 'like' button is placed at the top right corner of the thumbnail to match common practices seen in platforms like Airbnb. To make navigation easily clickable, the button padding spans the entire screen width.
HIGH FIDELITY PROTOTYPE
Key features of YEW!
The focus of this prototype is to create a comprehensive representation of the YEW! application would look like if generated into a product. I designed the prototype on an iPhone 13 Pro Max while paying close attention to UI details, dead ends, and the logic of each flow.
ONBOARDING + LOGIN
Straight to the point.
Starting from the onboarding process and login, YEW! aims to provide the user with a clear linear journey to into the community of volunteering.
REGISTER FOR AN EVENT
Easily browse events by date, time, location to find the one for you.
Information is presented in a standardized and organized way to increase familiarity and decrease the learning curve. No more deep diving for information!
SOCIALIZING
Check out what events other surfers in the area have attended!
Not sure what the event will be like? Check out some photos and posts from other surfers that have attended them.
It's not intimidating we promise.
REFLECTION
Learnings and challenges
LEARNING
The importance of the user’s needs and perspective when creating products.
Throughout the process, each user research activity was able to lead me to new insights regarding the user’s needs and pain points. Intimidation was not a factor I would have imagined until I interviewed users.
CHALLENGE
Identifying why people didn't participate in volunteering events.
Designers make solutions for people targeting the problems they face, but to make an effective solution, the problem must be identified first.
MOVING FORWARD
I envision a future where I can merge my passions in life with my career in design to create a positive impact on the world.
Surfing has always been more than just a sport for me; it's a way of life that connects me with nature and instills a deep sense of responsibility to protect our environment. I firmly believe that when individuals align their careers with their passions, they become more invested, creative, and impactful in their work.