350 AUSTIN

PROJECT OVERVIEW

350 Austin is a global, non-profit organization that aims to reduce carbon footprints, promote sustainable living, and educate about the threat of climate change. The consequences of these effects and the future lies in the hands of youth and their everyday actions. 350 Austin is seeking ways to connect with and retain members, particularly in the 25-40 year old age group. Building a more inclusive, active community will help to address their retention issue.

Team: Julie Nguyen, George Sosa, Lavina Rana, Michelle Kao, Naasha Dotiwala, & Shau Huang

Role: UX Researcher & Designer

Time Period: 3 Weeks

Tools: Sketch, Craft, InVision, Adobe Illustrator, Paper & Pencil

 
 

RESEARCH

SURVEYS + INTERVIEWS

We met with 350 Austin’s leadership team and analyzed their current website to get an idea of their starting methods of recruiting and retaining membership. The process starts with clicking the “Volunteer Sign-Up” button under the Navigation button labeled “Get Involved”. After clicking the button, it then takes you a Google form with over 20+ questions to answer. The form physically took users away from the main 350 Austin website, thereby confusing users, losing their attention & momentum, and just reducing overall website traction all before being able to sign-up. Attendance of 350 Austin's weekly meetings allowed for us to listen-in and discuss challenges being faced by the organization in retaining younger members. 

Ethnographic Research Survey

We found that there was a lack of understanding of the cause and a missing link between the targeted age group and leadership. To fill this gap we conducted our first primary phase of user research through online surveys and user interviews. To get a better understanding of the target users we conducted a survey to identify: main sources of environmental policy news, utilization of technology devices, and general sentiments about climate change. We had 30 respondents in total to our survey. The age range was between 23 - 40 years old. Findings are as follows: 

  • Acknowledgment of the reality of climate change and that something should be done. Uncertainty in pinpointing what the solution is or how to get started

  • No mention of environmental policy amongst concerns about climate change

  • A “sense of belonging” is the most common factor considered when choosing to join and stay in an organization. Other factors influencing retention involve a strong mission statement, legitimacy, expectations, and time commitments.

  • 60% obtain news primarily from and share through social media (with the majority using Facebook)

  • 33.3% only consume news regarding environmental policy if it is already presented to them on their current newsfeed

  • 97.7% primarily obtain news from phone usage; 76.7% from laptop

Qualitative Interviews

The second phase of our primary research comprised of 4 in-person qualitative interviews. The interviewees were asked about their involvement with environmental causes, their willingness to donate money and time, general awareness of the organization, etc. Using affinity mapping, we analyzed our findings and found 4 key insights into their issue:

  • No sense of collective belonging or community accomplishment. Demonstration of progress, successes, and member contribution recognition were nowhere to be found.

  • Lack of specification of goals and their relationship to the mission

  • Unclear expectations, roles, and guidance for members leads to questioning of time and resources they are able to put in. Website usability issues added to the deterrence. 

  • Scheduling events with no room for flexibility

 
Our Team + 350 Austin Council Members
Affinity Mapping
 

WHO IS OUR USER?

EMPATHY MAP + USER PERSONA + STORYBOARD

Empathy Map

Based on our research we created an empathy map to empathize with our users. We compiled research data into personas to further emphasize with our users, and found two types of users: Passionate and Informative Environmentalists. One user that is looking to volunteer but has limited availability- to maximize time, projects have to be worked around their current schedule. The other user is social media savvy interested in learning and sharing knowledge.

User Persona

To generate a sense of belonging, she needs clear membership expectations and able to share contents with her loved ones. We found out that our user wanted to keep up to date with the issues surrounding climate change but didn't necessarily wanted to physically contribute to the cause. I created a user persona to visually represent the insights and user pain points. During the ideation and design phases, the persona was used to ensure that any design decisions kept the user's goals, needs, and pain points in mind

Storyboard

This storyboard showcases the current frustration we encountered from our research with the sign up process. In addition, it also highlights the missed opportunity by 350 Austin where they are losing users by virtue of them not signing up even after they are on the website. To illustrate a situation in which these pain points are addressed, I created a storyboard. In this perfect world scenario, our user finds exactly what she needs on the 350 Austin website. She finds the landing page for the Fayette Power Plant campaign she wanted more information on. She easily completes the sign-up form to attend an official information session for the campaign and shares the sign-up to her social media all in a few quick steps.

 
User Persona (1)
User Persona (2)
Storyboard (1)
Storyboard (2)
Empathy Map
 

DESIGN

AFFINITY MAPPING + DECISION FLOWS + STYLE GUIDE + PROTOTYPING

Affinity Mapping

Although the data we collected was extremely useful, it was also a lot for us to process. We decided to take it to the white-board for some affinity mapping to filter our users frustrations, needs and goals. This ultimately helped us create our decision flow diagram.

Decision Wireflow Diagram

Once we understood our user's needs and goals, my group members and I finalized a user flow that was seamless and effective. The goal was to make the sign up process simple and and not waste the user's time.

Low Fidelity Prototyping

After deciding the user flow, it was time to start sketching out potential sign up screens. This enabled us to perform rapid user testing, which inevitably lead to iteration and redesign for hi-fi prototypes. Our goal was to keep the number of screens and text as minimal as possible.

Based on insights gained from the research, the main design implications were to:

  • Add an actual landing page for the Fayette Power Plant campaign to keep information organized and easy to find.

  • Keep the campaign sign-up form simple and quick to fill out to help increase conversion.

  • Add an option to share the sign-up to social media to promote a greater sense of community and help close the loop of younger members finding information for environmental news from social media newsfeeds.

  • Design for mobile since a staggering 96.7% of users interviewed obtained news from their mobile device.

UI Style Guide

Our aim was to give the 350 Austin’s style guide a pick-me-up but also maintain familiarity when using the website. We wanted a clean, modern aesthetic that communicates credibility, trust, and warmth and meets high standards of visual accessibility. Sans-serif fonts were chosen for the headings and paragraph text. Although they are both sans-serif, they differ in weight and style and are both legible on screen.

350 Austin already has an overarching style guide in place that I decided to use so that the redesigns could be easily understood by and integrated into the organization . The full style guide can be found on their site at "https://350.org/visuals/".

High Fidelity Prototyping

After finalizing the UI style guide and layout of the screens with my group members, I created 9 screens to bring our solution to life using Sketch and InVision.

After testing the low fidelity prototype, I moved on to the high fidelity prototype, and applied the style guide. 100% of the users that tested the high fidelity prototype in Invision were able to quickly find and sign up for the Fayette Power Plant campaign and share the sign-up to social media without confusion.

https://projects.invisionapp.com/share/WUO4F5ERPSE

 
Style Guide (1)
Style Guide (2)
Style Guide (3)
Affinity Mapping (1)
Affinity Mapping (2)
Affinity Mapping (3)
Ideation (1)
Ideation (2)
Notes
 

REFLECTIONS

FUTURE DEVELOPMENTS + ACKNOWLEDGEMENTS

What We've Learned

The biggest challenge in this project is to address both business goals and current users. Ensuring that our solution satisfied both stakeholders.

What's Next?

Based off user feedback and our research, our future ideas include:

  • An option to share to your social media newsfeed once you've signed up.  

  • Adding the current CO2 level indicator on the homepage.

  • Adding a toggle button to change the app's background to a darker background (energy saving).

Naturally the next step would be user testing the prototype with 350 Austin members. We only conducted user research with young environmentalists due to project timeline, so it is important to make sure that this product is usable to everyone.


Our Thanks

We are grateful for the opportunity to work with such a passionate and caring community. 350 Austin was open and engaged throughout this project.

 
Dana Group Shot_3x-min.png