The Product

For All, A Beautiful Earth (Fabe) provides a library of sustainable everyday actions, and users choose actions to take and log them on the app. Users will have their own profile, called a “Journey page,” where they can view their progress and share it with the world. In the future, a social media space will be created around this. This application is the brainchild of Steven Feuerstein and Vincent Morneau.

Completion Date: April 2019 - Current. Fabe is a work in progress and there are still many more iterations and testing to go.

My Role

My role has thus far been designing screens and flows for action cards, the action details page, the journey page, the homepage, and the onboarding/personalization process. In order to do this, I have had to advocate for the user by creating user archetypes, task flows, and conducting comparative/competitive analyses.

I am working with them and a team of 20 developers from around the world in an agile environment using sprints to bring Fabe to life.

1. The Active Action Taker

• Target user starting at Fabe’s early development stages.

• Early Fabe will only be a means to accessing and logging different actions for personal use.

• The user who is attracted to this is likely already taking action, and wants to track themselves and learn more.

2. The Climate Change Sympathizer

• Target user starting at Fabe’s next level of development.

• Next level is when social media features are introduced.

• This user will require motivation to use Fabe, which will come from sharing accomplishments on social media.

3. The Disconnected User

• Target user that Fabe hopes to reach and “convert” during final stages of development.

• Final Stage is when the product gains friction and becomes a fun, popular addictive app.

• In these late stages, Fabe will also offer even more motivation to take action (hopefully reaching this Disconnected User) by teaming up with green companies to offer monetary promotions.

I ran an analysis of 10 different products, evaluating the use of 12 different features. You can see the full analysis here.

I found that while many products suggest green actions people can take, very few create a game-like or addictive feeling around it. I also found that almost all successful progress tracking apps are in the exercise space, and focus on data visualizations and social sharing.

I realized I must combine these successful elements in my design: making Fabe informative, addictive, and visual.

First Image: During this sketching session I had included too much design for social media (future iterations), and had to cut this down for my next round of ideas

Second Image: In this iteration, I cut down the features to only include browsing of Actions in the Fabe Library. I utilized a horizontal scroll, getting inspiration from addictive and fun products like Netflix and Yelp

Third Image: In this sketch I had the Journey Page include two sections: a dashboard for stats visualization and an Activity Feed. The Activity Feed allows for an easy transition to a newsfeed when the app becomes social. For now, it only shows a personal chronological view of actions taken.

• Actions take form in clickable cards, that will open up to the Action Details page when pressed into. Or, the user can use some of the shortcuts for “sharing, adding to Action Plan, liking, or taking the action (fabe birdhand symbol as the button)”

• Bottom navigation remains consistent, including buttons for Homepage, Rescuteers page, Adding and action, Notifications, and Profile (aka Journey Page)

• Homepage features a Netflix-like horizontal scroll view of different actions which the user can take, like, or add into their Action Plan

• Journey Page Dashboard allows users to see some visualizations of their progress

• Action Feed allows a user to see in a chronological view all of the actions they have taken. In future iterations, this will be a social feed to be shared with other users

• I chose to use the teal green from the fabe logo, as well as a brighter version of the green. I have also incorporated an orange color for active states and important information

Later on, I was asked to design a Notifications screen, as Fabe social features were coming to life.

The team expressed we needed notifications for things like:

• Take an action

• Log an action

• Update Profile

• New Action Added

• Missions

• Earned a badge

• Social Media

  • Likes

  • Comments

  • Shares

I separated this out into four categories:

Social Media Notifications (profile image icon)

Actions Notifications (Fabe Birdhand logo icon)

Internal Notifications (cog icon)

Missions Notifications (Leaf icon)

The second Option shows a time-lapse bar at the top so users know how many questions are left.

The third option shows responses as tappable images instead of plain text.

Final Design Choice:

• Shows time-lapse bar at top so user knows how many questions they have left.

• Shows multiple choice options clearly defined by “choose all that apply.”

• Shows responses as clear text to reduce user’s time and energy spent on page.

• Previews next question underneath.

• Button to allow user to submit after they are finished making choices, and button to go back so answers may be changed.

After the user enters their basic information to sign up, they are quickly brought to this home screen.

• A quicker signup decreases user burnout and increases user retention

• The initial homepage features two empty states, which encourage user interaction

• Hot spots lead a new user in the right direction

• I have created an empty state for two sections: my action plans and my favorite actions. “My action plans” is illuminated with a glowing hotspot

• After the user presses into “my action plans,” they are guided through a few questions, which awards them with their first personalized action plan

• Once the user has their action plan, they are guided with more hotspots and tooltips to teach them how to use Fabe and its icons