WORK

ABOUT

RESUME

WORK

ABOUT

RESUME

WORK

ABOUT

RESUME

Timeline

Sep. 2022 - Jun. 2023

Role

Sole Product Designer

Team

Esther Lee, Alvaro Ortiz, Akshay Thakur, Emily Sunaryo, David Qing

Esther Lee, Alvaro Ortiz,
Akshay Thakur,
Emily Sunaryo, David Qing

Esther Lee, Alvaro Ortiz,
Akshay Thakur,
Emily Sunaryo, David Qing

Cultural Survival

Creating an audio mobile streaming app for indigenous communities

Overview

Overview: In the Fall of 2022 to Spring of 2023, I was the sole designer among a team of 5 developers and 1 project manager tasked with creating a mobile audio streaming app for the non-profit Cultural Survival, who requested a mobile accessible version of their radio streaming platform.

BACKGROUND INFORMATION

What's
Cultural Survival?

Cultural Survival is an indigenous led NGO and registered non-profit founded in 1972 and dedicated to supporting indigenous communities’ self determination, cultures, and political resilience. They utilize advocacy, media, public education, and other resources in order to provide platforms that amplify indigenous voices. One of Cultural Survival’s most popular platforms is their Indigenous Right’s Radio Project, which has over 1200 radio stations in 55 countries.

THE PROBLEM

Currently, Cultural Survival’s Indigenous Rights Radio does not exist in mobile streaming form.

Cultural Survival’s Indigenous Radio broadcasts to over 10 million indigenous people annually ... But although the organization has existed since the 1970s, they still lack a centralized way to distribute their radio shows.

The Indigenous Rights Radio

The Indigenous Rights Radio is, as self-described by Cultural Survival, "uses the power of community radio to inform Indigenous communities of their rights. [They] envision a world in which Indigenous communities, equipped with the knowledge of their rights, are empowered to protect their lands, languages, and cultures."

Above is a map that hosts the number of countries that Cultural Survival's Indigenous radio is present in, as well as their presence in varying countries.

MY TASK

An end-to-end mobile design

As the lead product designer for this app, my responsibilities ranged from interface and branding design to hosting usability workshops and testing. Before starting, I tasked myself with design goals (both emphasized by the NGO and my team of developers) in order to create specific feature pages. There were unique struggles within this mobile app's user group that needed to be considered and I kept them in mind with the following goals.

Creating intuitive, clean filtering for users to sort through thousands of radio shows by categories such as language, country, radio series, and others.

Making sure to prioritize both on-line and off-screen flows equally, as downloading information for this user group may be a common use case.

Hosting Cultural Survival’s financial grant information within the app as a way for users to access accurate information about their resources more readily.

Creating good systems for categorization and organization, especially because of the breadth of categories hosted within the app.

MY TASK

An end-to-end mobile design

As the lead product designer for this app, my responsibilities ranged from interface and branding design to hosting usability workshops and testing. Before starting, I tasked myself with design goals (both emphasized by the NGO and my team of developers) in order to create specific feature pages. There were unique struggles within this mobile app's user group that needed to be considered and I kept them in mind with the following goals.

Creating intuitive, clean filtering for users to sort through thousands of radio shows by categories such as language, country, radio series, and others.

Making sure to prioritize both on-line and off-screen flows equally, as downloading information for this user group may be a common use case.

Hosting Cultural Survival’s financial grant information within the app as a way for users to access accurate information about their resources more readily.

Creating good systems for categorization and organization, especially because of the breadth of categories hosted within the app.

MY TASK

An end-to-end mobile design

As the lead product designer for this app, my responsibilities ranged from interface and branding design to hosting usability workshops and testing. Before starting, I tasked myself with design goals (both emphasized by the NGO and my team of developers) in order to create specific feature pages. There were unique struggles within this mobile app's user group that needed to be considered and I kept them in mind with the following goals.

Creating intuitive, clean filtering for users to sort through thousands of radio shows by categories such as language, country, radio series, and others.

Making sure to prioritize both on-line and off-screen flows equally, as downloading information for this user group may be a common use case.

Hosting Cultural Survival’s financial grant information within the app as a way for users to access accurate information about their resources more readily.

Creating good systems for categorization and organization, especially because of the breadth of categories hosted within the app.

SNEAK PEEK

Accessible, familiar designs

As the lead product designer for this app, my responsibilities ranged from interface and branding design to hosting usability workshops and testing. Before starting, I tasked myself with design goals (both emphasized by the NGO and my team of developers) in order to create specific feature pages. There were unique struggles within this mobile app's user group that needed to be considered and I kept them in mind with the following goals.

Functional
Filtering

Creating intuitive, clean filtering for users to sort through thousands of radio shows by categories such as language, country, radio series, and others.

Creating intuitive, clean filtering for users to sort through thousands of radio shows by categories such as language, country, radio series, and others.

Creating intuitive, clean filtering for users to sort through thousands of radio shows by categories such as language, country, radio series, and others.

Organized
Grant
Database

A centralized database of financial grant information so that users can easier access Cultural Survival’s resources and grant application materials.

A centralized database of financial grant information so that users can easier access Cultural Survival’s resources and grant application materials.

A centralized database of financial grant information so that users can easier access Cultural Survival’s resources and grant application materials.

Offline
Functionality

Creating the ability for users to save and
download content for online AND offline functionality.

Creating the ability for users to save and
download content for online AND offline functionality.

Creating the ability for users to save and
download content for online AND offline functionality.

CREATING DESIGN SOLUTIONS

Low Fidelity

The “search” process for this app and the main screens were modeled after other popular music audio streaming apps, namely Spotify and Apple Music. However, since Cultural Survival’s audio content consists of radio shows as opposed to songs or albums, there’s a much simpler value proposition. I designed the home page with Cultural Survival’s categories in mind rather than utilizing the home page as an “Explore page”, but kept existing design frameworks visible.

Play Flow

Filter Flow

The “Filter” process entailed a little more thought and consideration — I researched other popular platforms’ filtering user flows, again drawing inspiration from music platforms such as Spotify and Soundcloud. Unlike Spotify or Soundcloud’s seamless filtering systems, which allow filtering by type with one tap, Cultural Survival’s categories demanded something more complex, with the option to choose from multiple languages, countries, and other categories.

CREATING DESIGN SOLUTIONS

Low Fidelity

The “search” process for this app and the main screens were modeled after other popular music audio streaming apps, namely Spotify and Apple Music. However, since Cultural Survival’s audio content consists of radio shows as opposed to songs or albums, there’s a much simpler value proposition. I designed the home page with Cultural Survival’s categories in mind rather than utilizing the home page as an “Explore page”, but kept existing design frameworks visible.

Play Flow

Filter Flow

The “Filter” process entailed a little more thought and consideration — I researched other popular platforms’ filtering user flows, again drawing inspiration from music platforms such as Spotify and Soundcloud. Unlike Spotify or Soundcloud’s seamless filtering systems, which allow filtering by type with one tap, Cultural Survival’s categories demanded something more complex, with the option to choose from multiple languages, countries, and other categories.

CREATING DESIGN SOLUTIONS

Low Fidelity

The “search” process for this app and the main screens were modeled after other popular music audio streaming apps, namely Spotify and Apple Music. However, since Cultural Survival’s audio content consists of radio shows as opposed to songs or albums, there’s a much simpler value proposition. I designed the home page with Cultural Survival’s categories in mind rather than utilizing the home page as an “Explore page”, but kept existing design frameworks visible.

Play Flow

Filter Flow

The “Filter” process entailed a little more thought and consideration — I researched other popular platforms’ filtering user flows, again drawing inspiration from music platforms such as Spotify and Soundcloud. Unlike Spotify or Soundcloud’s seamless filtering systems, which allow filtering by type with one tap, Cultural Survival’s categories demanded something more complex, with the option to choose from multiple languages, countries, and other categories.

DESIGN DECISIONS

Integrating identity & usability

I improved upon my low-fidelity version with many rounds of user-testing by my lovely team and the rest of Blueprint, in which I used Figma Mobile to allow for physical interaction with the prototype. After receiving user testing, I received a few main comments, including the following:

  • Improving the Home page and adhering to Brand Identity — including sticking to a vertical scroll and making the colors + branding match Cultural Survival’s NGO palette.

  • Improving the way filtering is implemented — in a way that is intuitive for the user regardless of their technological background and follows pre-existing design patterns.

  • Making the grants page more visually informative and logical and reducing text density.

Ultimately, I considered these comments and my original design goals in mind as I made design decisions and finalized and refined my hi-fidelity prototypes and user flows.

DESIGN DECISIONS

Integrating identity & usability

I improved upon my low-fidelity version with many rounds of user-testing by my lovely team and the rest of Blueprint, in which I used Figma Mobile to allow for physical interaction with the prototype. After receiving user testing, I received a few main comments, including the following:

  • Improving the Home page and adhering to Brand Identity — including sticking to a vertical scroll and making the colors + branding match Cultural Survival’s NGO palette.

  • Improving the way filtering is implemented — in a way that is intuitive for the user regardless of their technological background and follows pre-existing design patterns.

  • Making the grants page more visually informative and logical and reducing text density.

Ultimately, I considered these comments and my original design goals in mind as I made design decisions and finalized and refined my hi-fidelity prototypes and user flows.

DESIGN DECISIONS

Integrating identity & usability

I improved upon my low-fidelity version with many rounds of user-testing by my lovely team and the rest of Blueprint, in which I used Figma Mobile to allow for physical interaction with the prototype. After receiving user testing, I received a few main comments, including the following:

  • Improving the Home page and adhering to Brand Identity — including sticking to a vertical scroll and making the colors + branding match Cultural Survival’s NGO palette.

  • Improving the way filtering is implemented — in a way that is intuitive for the user regardless of their technological background and follows pre-existing design patterns.

  • Making the grants page more visually informative and logical and reducing text density.

Ultimately, I considered these comments and my original design goals in mind as I made design decisions and finalized and refined my hi-fidelity prototypes and user flows.

CREATING DESIGN SOLUTIONS

Wrapping up

At the end of the Spring semester, I emerged with a design file full of multiple iterations and a scalable "design system" of icons, components, and screens ready to ship. Throughout the process, I user-tested the app with multiple other developers and noted some popular insights that I would like to consider for future iterations or collaborative work with the NGO.

Filtering

Key Observations: “I like that the filtering options are front-and-center - however you might want to flesh out the difference between “searching” and filtering here. Will the filter functionality still show up the same way it does in the actual search page?”

Home Page

Key Observations: “I like that the home page is more interactive now, and that the horizontal scroll is utilized to store more suggestions."

Playing a podcast

Key Observations: “I like that the card allows you to save a podcast, but I'd suggest a "faster" or "slower" button since radio shows are usually lengthier than songs."

Grants

Key Observations: “I enjoy the changes on the home and grants page a lot! I think the new spacing allows for more separation between cards and the pictures are more personable."

Filtering

Key Observations: “I like that the filtering options are front-and-center - however you might want to flesh out the difference between “searching” and filtering here. Will the filter functionality still show up the same way it does in the actual search page?”

Playing a podcast

Key Observations: “I like that the home page is more interactive now, and that the horizontal scroll is utilized to store more suggestions."

Playing a podcast

Key Observations: “I like that the card allows you to save a podcast, but I'd suggest a "faster" or "slower" button since radio shows are usually lengthier than songs."

Grants

Key Observations: “I enjoy the changes on the home and grants page a lot! I think the new spacing allows for more separation between cards and the pictures are more personable."

IDEATING + CONCEPTUALIZING

Making shopping playful.

My team and I were interested in implementing our research by creating design solutions that would drive interest and motivate young shoppers to explore Shop's diverse e-commerce space. We used the crazy-8's method to ideate 15+ ideas, then focused on 3.

REFLECTIONS & THANKS

Special thanks to Cal Blueprint ↗

If you made it this far — thanks for reading! Thank you again to my lovely team at Cal Blueprint. Here's what I learned during this project.

Reflection 01:
Good documentation is key to working with developers, especially for eventual project-handoffs. This was my first design project in which I collaborated with developers, and I realized establishing a good design system and establishing a clear vision was so important.

Reflection 02:
Working with developers means developing a clearer sense of technical constraints. Because my team varied in programming experience, I had to be cautious and realistic about what we could achieve. An algorithm suggesting new shows to users, for example, was not buildable.

Reflection 03:
I learned to ask lots of questions. Navigating tech jargon is intimidating, but I was lucky to have a really lovely and patient team. Ultimately, this was one of the most valuable learning experiences I’ve had the opportunity to receive in my time at UC Berkeley and I’m very thankful.

REFLECTIONS & THANKS

Special thanks to Cal Blueprint ↗

If you made it this far — thanks for reading! Thank you again to my lovely team at Cal Blueprint. Here's what I learned during this project.

Reflection 01:
Good documentation is key to working with developers, especially for eventual project-handoffs. This was my first design project in which I collaborated with developers, and I realized establishing a good design system and establishing a clear vision was so important.

Reflection 02:
Working with developers means developing a clearer sense of technical constraints. Because my team varied in programming experience, I had to be cautious and realistic about what we could achieve. An algorithm suggesting new shows to users, for example, was not buildable.

Reflection 03:
I learned to ask lots of questions. Navigating tech jargon is intimidating, but I was lucky to have a really lovely and patient team. Ultimately, this was one of the most valuable learning experiences I’ve had the opportunity to receive in my time at UC Berkeley and I’m very thankful.

REFLECTIONS & THANKS

Special thanks to Cal Blueprint ↗

If you made it this far — thanks for reading! Thank you again to my lovely team at Cal Blueprint. Here's what I learned during this project.

Reflection 01:
Good documentation is key to working with developers, especially for eventual project-handoffs. This was my first design project in which I collaborated with developers, and I realized establishing a good design system and establishing a clear vision was so important.

Reflection 02:
Working with developers means developing a clearer sense of technical constraints. Because my team varied in programming experience, I had to be cautious and realistic about what we could achieve. An algorithm suggesting new shows to users, for example, was not buildable.

Reflection 03:
I learned to ask lots of questions. Navigating tech jargon is intimidating, but I was lucky to have a really lovely and patient team. Ultimately, this was one of the most valuable learning experiences I’ve had the opportunity to receive in my time at UC Berkeley and I’m very thankful.

NEXT PROJECT

Shop

A re-imagining of the Shop by Shopify app by Gen-Z.
Making the future of shopping social.

NEXT PROJECT

Shop

A re-imagining of the Shop by Shopify app by Gen-Z.
Making the future of shopping social.

let's create
something
together⊹˚

Linkedin ↗
resume ↗
estherlee@berkeley.edu ↗

let's create
something
together⊹˚

Linkedin ↗
resume ↗
estherlee@berkeley.edu ↗

let's create
something
together⊹˚

Linkedin ↗
resume ↗
estherlee@berkeley.edu ↗