Project Overview
Team: Lavina Rana, Julie Nguyen, Michelle Kao, Naasha Dotiwala, George Sosa & Shau Huang
Role: UI/UX Designer
Time: Period: 4 weeks
Tools: Sketch, Craft, InVision, Adobe Illustrator, Visual Studio, Github, Sourcetree
Problem Statement: Climate change is a real threat and our future lies in the youth to take action. 350 Austin is finding it difficult to connect with and retain members in the 20-40 year old age group.
Who are 350 Austin?
350 Austin is a local climate change grassroots organization. The number 350 stands for the safe amount of CO2 concentration level (in parts per million) to preserve a livable planet. As of 2018, the level is at 410 parts per million.
Research
To find out more about 350 Austin, my group members and I took a look at their current sign up process on the website. The process starts with clicking the Volunteer Sign Up button under the Navigation button Get Involved. After clicking the button, it then takes you a Google form, to answer over 20 questions. The form was taking users away from the 350 Austin website thereby confusing users and reducing website traction. As part of our research, we also attended 350 Austin's weekly meetings to listen-in and discuss challenges being faced by the organization in retaining younger members.
Based on our primary research, our hypothesis was that we could improve connectivity and user retention by improving the sign up process. A seamless, quick and user friendly sign up page could also increase user trust and website browse time.
Interviews and Ethnographic Research
To get a better understanding of the different sources that could lead our target users to the sign up page, we conducted a survey to identify news sources for our target market.
The first phase of primary research included a quantitative online survey. We had 30 respondents in total to our survey. The age range was between 23 - 40 years. Some key respondent demographics are shown below:
The graphs below show two key results from our survey.
- Primary news source for our target consumer is social media (25% respondents)
- Primary device used for news is cellphone (40% respondents)
Main device used to obtain news.
Main news source.
The second phase of our primary research comprised of 4 in-person qualitative interviews. The interviewees was asked about their involvement with environmental causes, their willingness to donate money and time, general awareness etc.
Key findings from our surveys and interviews:
- Participants were deterred from organizations because of time wastage, unclear roles and expectations and allocation of resources and usability issues with the website.
- Participants wanted organizations to demonstrate progress of on-going projects, show past successes, recognition of members' contributions.
- Participants wanted to be part of organizations/causes that did not require a large time commitment but made tangible progress.
Empathy Map & User Persona
Based on our research we created an empathy map to empathize with our users. 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.
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.
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
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.
Decision Wireflow Diagram
Lo-Fi 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.
Lo Fi Prototype
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.
High Fidelity Prototype
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.
Future Developments
Based of 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).