Tera
Mobile-native shopping app for iOS and Android
Make an impact. Leave no trace.
How do you make it easy to make eco-friendly decisions?
The Challenge
As the climate crisis becomes more viscerally tangible, consumers are hungry for ways to lessen their footprint on the planet and lead more sustainable lives. But as anyone who has ever made a New Year’s resolution will tell you, lifestyle changes are difficult to maintain. They require clear action items, metrics for success, and motivators. With the future of the planet at stake, it’s worth asking: what tool can help consumers build healthier shopping habits—not only for themselves, but for Earth as well?
The Solution
A mobile-native app that gives users instant insights into the environmental impacts of the products they are considering, empowers them to push the needle towards sustainability through informed purchasing, and gives them a tool to measure their own sustainable purchasing goals.
The Approach
Tera was designed to make it easy for eco-conscious shoppers to shrink their environmental footprint.
To make it as accessible as possible, Tera was designed as a mobile-native app that meets both iOS and Android guidelines.
I started with competitive research to understand what current green-shopping apps exist and to identify Tera’s unique differentiator. Then I identified key actions that support that differentiator and built them out into a holistic user flow map. Finally, I moved through low-fidelity, mid-fidelity, and high-fidelity wireframes, incorporating user testing along the way before arriving at final product mockups for both iOS and Android guidelines.
Step 1: Competitor Research and Product Differentiator
Earth Hero
Earth Hero “makes acting on climate change easy” through carbon footprint tracking, and science-based recommendations for more eco-friendly living choices.
It helps users engage with climate activism through community events and tailored action plans.
My Little Plastic Footprint
My Little Plastic Footprint “helps you reduce your plastic footprint by going on a plastic diet” by suggesting more sustainable alternatives to one-use items.
Like Earth Hero, it has a social function allowing users to share goals and successes with one another.
Tera’s Differentiator
Tera will narrow the focus of environmental activism to green shopping, making sustainable living less intimidating and more achievable.
By sharing anonymized user purchase data in an annual report, Tera will help convince corporations that there is real money in going green.
Tera’s Key Functions:
• Search or scan items to reveal sustainability scores
• View greener alternatives to products with high impacts on the environment
• View personal impact reports to measure progress against customized goals
• Share purchasing data to help pressure companies to adopt greener production policies
Step 2: User Flow
Each of Tera’s key actions was mapped in a user flow, which was joined together for a holistic user flow map in Figma.
Step 3: Low-Fidelity Wireframes
Low-fidelity wireframes were sketched in Adobe XD. At this stage, iOS and Android guidelines were not yet taken into account, as the focus was the basic architecture of each screen as described in the user flow map.
Step 4: Mid-Fidelity Wireframes and User Testing
As I moved into mid-fidelity wireframes, I began the process of creating two sets of screens: one according to iOS’s Human Interface Guidelines, and one according to Android’s Material Design guidelines. Style elements such as icons, typography, forms, and layout specifications were considered and applied. Each set of wireframes was loaded into InVision to create an interactive prototype that was tested on users to gain valuable feedback, which would be incorporated in the final high-fidelity mockups.
User Feedback:
👍 Fun illustrations
👍 Clear value proposition
👎 Scoring system is confusing
👎 Product and personal reports run together
👎 Could use a walk-through/demo screen to orient user to the scanner function
Wireframes designed according to iOS’s Human Interface Guidelines:
Wireframes designed according to Android’s Material Design guidelines:
Wireframes designed according to Android’s Material Design Guidelines:
Step 5: High-Fidelity Mockups
Changes based on user feedback were implemented in high-fidelity wireframes, including clarification of scoring breakdown, addition of instructional walk-through screens, and changes to filter terms. Final product mockups were created to showcase Tera as an easy-to-use mobile app with versions for both iOS and Android standards.
iOS Mockups:
Android Mockups:
Ꝏ The Future of Tera
As the rising demand for environmental sustainability meets the continuing demand for shopping convenience, Tera is well situated to meet the needs of a growing market base. Its mobile-native design and its focus on easily achievable actions to shrink environmental impacts will make Tera an app that consumers return to again and again to help themselves and the planet.
Next steps would include investigation of monetization methods, such as in-app purchases, and partnerships with brick-and-mortar locations to exchange sustainability points for in-store rewards.