DISCLAIMER: THIS IS A SCHOOL PROJECT. ALL MATERIALS, INCLUDING FINAL PRODUCT MOCKUPS ARE FICTIONAL.
UI/UX, Mobile App Design, Marketing
Sep–Dec 2019 first iteration, second update Oct 2020
A high-fidelity app prototype, live on XD.
The United Nations created 17 Sustainable Development Goals (SDG) as part of its ongoing agenda to call for participation to improve the future of the planet. I was inspired to create a high-fidelity app prototype in response to Goal 15: Life on Land. My idea is to create a productivity app where users can obtain coins to purchase rewards, and with a certain amount spent, real trees will be planted.
The first iteration was excellent and the research conducted was precise and informational; however, I was not too satisfied with the design choices, and I could push it further with my new design skills. So, I decided to revisit and perform a total design overhaul to boost its appeal and thus interactivity. Scroll down to see how the new design progresses over time.
About the UN & SDGs
The UN has defined a set of 17 different goals, each target an interconnected problem from one another, that participated nations should follow in order to achieve global peace and prosperity by 2030.
SDG 15: Life on Land
As the name implied, the main focus of goal 15 is sustainability regarding terrestrial ecosystem and natural resources. Specifically deforestation, followed by loss of biodiversity due to agricultural expansion. Thus, the top priorities of this SDG are the restoration of forest coverage and the promotion of sustainable agriculture.
Below is the previous design that I completed over a year ago. I thought this app could use some updates to bring out more personality and better display content. I wanted to establish a stronger visual hierarchy through the use of typography as well as utilize shapes to group/divide content in a more logical and visually-pleasing manner. Likewise, the colour scheme could use some minor adjustments to bring out more contrast as well.
Research, Planning & Sketches
The very first step was to perform market research and competitive analysis. Combined the results with insights gained from previous findings of the SDGs and understandings of key points SDG 15 addresses, I began to conceptualize different approaches to making an app prototype that directly responds to the target goals.
I concluded that the category of the app I’m making will be productivity and that the app will track user’s productive apps and social media use to help them become more focused.
Target Audience & Personas
I discovered that the characteristics of the target audience are:
- middle-to-upper-class students & young professionals age 16–35 who
- have a fair understanding of technology and
- have at least some awareness of environmental issues.
With these characteristics, I have compiled the results and made these two persona cards for quick target audience reference. Morgan is a high-income business owner looking for eco-friendly alternatives to her daily products, while Alex is a sophomore university student who is inspired to raise public awareness regarding global issues.
Lyfe™ helps users to become productive by tracking their device usage and reward them based on how much time they spend on productivity apps, as well as how much time they don’t use social media. Lyfe™ users are able to set their daily goals for each mentioned productive tracker, and they will be rewarded coins accordingly. Coins can then be used to purchase rewards, often comes in the form of coupons.
Lyfe™ commits to helping the Earth and contribute to the process of reforestation by planting a real tree every time a user spends 100 coins. This form of interaction encourages users to be more productive, thus being rewarded for and, in the process, betters the planet.
After establishing the solidifying the concept, I began doing rough sketches of the information architecture to build the lo-fi app screens on. This stage is where my visions for each screens started to develop, which lead me to sketch out the lo-fi version of each screen the final prototype will have.
Style & Colours
When tackling subjects regarding global issues as well as productivity and focus, I had a clear vision of the general design direction I wanted to apply to the prototype. I wanted the overall look and feel of the app to be fun, friendly and informational; the UI should be simple enough to take on the diverse target audience and at the same time work strategically with data and information to report and display it as transparent as possible. That includes how the company promotes and fulfills SDG 15.
Settling with these guidelines, I decided that design-wise, the UI of Lyfe™ will use flat, rounded shapes paired with clear, concise & accessible text. The colour scheme will be majority green, with shades of blue and orange, each represents a major productivity category: orange for productive app use and blue for social-media free time.
Lyfe™ uses two sans-serif fonts that were used in combination with a typographic scale. Lato is chosen to be the body typeface for its modernity and friendliness that directly connects Lyfe™ to its target audience. Gibson, on the other hand, adds some fun to the headings which, when used on all-cap text, also greatly complements Lato.
Lyfe™: The App
Task flows can be performed easily through bottom navigation bar or buttons on each screen. With flows where users are about to spend their coins, a microinteraction occurs to give users a pause in case of re-decision.
This page, which can be accessed through the Home screen, displays information about how Lyfe™ can help to improve global reforestation. Lyfe™ states that for every 100 coins a user spends, they will plant a real tree in the world. This strategy helps encourage users to use Lyfe™ to stay focused, and their behaviour is rewarding to themselves as well as to the planet.
A highly enjoyable part of this project, aside from bringing an idea to live to help solve world issues, is to see personal improvements and how my style evolved over the years. I am glad I chose to redo this project; redesigning Lyfe™ has taught me equally as many things as working on it the first time. I also learned not to be afraid to show previous design choices as long as there is something gained from it, and, more often, the journey is more exciting than the final destination.
Thank you for viewing my project!
If you're interested in more case studies, click below, or check out my personal works!