Shawn Sim

Coastal Clear

Role / Services

Product Design + Research

Role / Services

Product Design + Research

Role / Services

Product Design + Research

Timeline

June 2024 - Present

Timeline

June 2024 - Present

Timeline

June 2024 - Present

Credits

Build For Good 2024

Credits

Build For Good 2024

Credits

Build For Good 2024

Brief

Participating in this hackathon as the only designer, I was tasked with designing a user-centric tool to better guide volunteers in coastal cleanup efforts as compared to existing solutions. A ground up project meant I had a role in designing a visual system, user experiences, conducting initial user research, and conducting testing with volunteer organisations ensure the tool's effectiveness.

Participating in this hackathon as the only designer, I was tasked with designing a user-centric tool to better guide volunteers in coastal cleanup efforts as compared to existing solutions. A ground up project meant I had a role in designing a visual system, user experiences, conducting initial user research, and conducting testing with volunteer organisations ensure the tool's effectiveness.

Design Process

Research/Discovery

My group lacked sustainability experts, making us prone to making many assumptions. Fortunately, Open Government Products (OGP) has bridged this gap by involving various sustainability experts specialising in waste public hygiene and even biodiversity. Focusing on littering, we conducted interviews with 10 cleanup organisers to address their primary challenge: visibility issues.

Design

To avoid making assumptions, we only started talking about designing the solution after we know exactly what to tackle. After getting a priorities list, we chose the top 5 pain points to address. We then formed different user flows for formal and informal volunteers and organisers. After discussing over some low fidelity wireframes sketches, I quickly made high fidelity prototypes for our developers to work on since we only had 3 weeks to product a minimum viable product (MVP).

Validation

We partnered with Darryl of SG beach warriors for quick validation as he is a well experienced cleanup organiser. We also did a mass user testing with public citizens and some sustainability experts mainly to test critical failures and to gather interest and insights from other audiences. We iterated based the design on these two validation tests.

Problem

Goals

  • Fix the visibility problem with heat-map to easily find dirty hotspots

  • Create a better location cleanup booking tool for better transparency of which group is cleaning up what place at what time, preventing conflicts and to foster a community.

  • Validate cleanups to showcase how much impact each group have made to each location.

  • Fix the visibility problem with heat-map to easily find dirty hotspots

  • Create a better location cleanup booking tool for better transparency of which group is cleaning up what place at what time, preventing conflicts and to foster a community.

  • Validate cleanups to showcase how much impact each group have made to each location.

We had just a month to conduct research, design, test, develop and present our MVP. Following our mentors' advice, we waited to discuss potential solutions until we completed our interviews, ensuring we accurately identified the primary pain points of our niche target audience.

We had just a month to conduct research, design, test, develop and present our MVP. Following our mentors' advice, we waited to discuss potential solutions until we completed our interviews, ensuring we accurately identified the primary pain points of our niche target audience.

User Flows

Design System

For the brand, I aimed for a utilitarian and straightforward design. The primary color is dark navy blue, symbolizing water and clarity. I chose the Manrope typeface, a modern sans-serif font, for its versatility in both headers and body text due to its varied weights. Given the time constraints, we used library components for the design and development. I sourced components and icons from Untitled UI and Lucide Icons, customizing them to ensure a consistent look and feel aligned with our brand.

For the brand, I aimed for a utilitarian and straightforward design. The primary color is dark navy blue, symbolizing water and clarity. I chose the Manrope typeface, a modern sans-serif font, for its versatility in both headers and body text due to its varied weights. Given the time constraints, we used library components for the design and development. I sourced components and icons from Untitled UI and Lucide Icons, customizing them to ensure a consistent look and feel aligned with our brand.

Despite testing our initial prototype with over 30 users, most of whom were not our target audience of cleanup organisers, we were still able to collect valuable feedback to improve our UI and streamline the flow. We also were able to see the app from fresh eyes as we were explaining the features to the users.

Despite testing our initial prototype with over 30 users, most of whom were not our target audience of cleanup organisers, we were still able to collect valuable feedback to improve our UI and streamline the flow. We also were able to see the app from fresh eyes as we were explaining the features to the users.

Next Steps

My team was exhilarated being the 5 winners of the hackathon. However, this is only the beginning of our accelerator phase. We needed to align with NEA and PHC so that we can truly uplift the clean efforts of not only volunteers but also all cleaners. We plan to do a full pilot with partnering volunteer organisations to make this project into reality.

Do follow our Github for future and more immediate updates on CoastalClear. I am very excited to see how far this goes!

My team was exhilarated being the 5 winners of the hackathon. However, this is only the beginning of our accelerator phase. We needed to align with NEA and PHC so that we can truly uplift the clean efforts of not only volunteers but also all cleaners. We plan to do a full pilot with partnering volunteer organisations to make this project into reality.

Do follow our Github for future and more immediate updates on CoastalClear. I am very excited to see how far this goes!

Learning Points

  1. Insights Gathering: It's tempting to skip user research to spend more time designing and building. But after hours of work, the last thing you want to hear is that your target audience doesn't find your solution useful. When we're not the target audience, it's crucial to understand their needs and challenges. As tech professionals entering the sustainability space, we learned this firsthand.

  2. Validate, validate, validate: This word has become somewhat of a triggering word for my team but it's crucial to validate MVP features with our target audience. If a feature doesn't directly address their issue, we don't pursue it. This approach makes the product faster to build and easier to present.

  3. Designs with UI kits: Instead of designing every element from scratch, we opted for efficiency. By utilising robust UI kits, we ensured quick deployment in Figma and smooth integration into our codebase, optimizing our workflow for the project's short runway.

    If you would want to know more about the project or want to have a hand in it, do not hesitate to reach out! I am really excited to see how far can we scale this project with the accelerator course!

    Link to our BFG page: www.build.gov.sg/coastalclear

  1. Insights Gathering: It's tempting to skip user research to spend more time designing and building. But after hours of work, the last thing you want to hear is that your target audience doesn't find your solution useful. When we're not the target audience, it's crucial to understand their needs and challenges. As tech professionals entering the sustainability space, we learned this firsthand.

  2. Validate, validate, validate: This word has become somewhat of a triggering word for my team but it's crucial to validate MVP features with our target audience. If a feature doesn't directly address their issue, we don't pursue it. This approach makes the product faster to build and easier to present.

  3. Designs with UI kits: Instead of designing every element from scratch, we opted for efficiency. By utilising robust UI kits, we ensured quick deployment in Figma and smooth integration into our codebase, optimizing our workflow for the project's short runway.

    If you would want to know more about the project or want to have a hand in it, do not hesitate to reach out! I am really excited to see how far can we scale this project with the accelerator course!

    Link to our BFG page: www.build.gov.sg/coastalclear