greenlife_portfolio_home04.png
 
 

GreenLife

I designed an app with the purpose of helping people live a more sustainable lifestyle. The focus was to create a unique user experience using wire frames, user testing, competitive analysis and more. As I progressed, I carefully documented each stage during the developmental process to ensure the success of the deliverables.

FALL QUARTER 2020
 

problem statement

The lack of knowledge is the main barrier preventing people from drastically reducing the size of their waste footprint and living a more sustainable lifestyle. An easy solution is to educate them. Now that the internet has become more accessible worldwide, almost anyone can download an app or go online to immediately connect with friends and share or consume information.

Scope & Objectives

To design an app that helps people live a more sustainable lifestyle, I took multiple steps to ensure a usable app and enjoyable experience. First, I conducted in-depth research using interviews, focus groups, and contextual inquiries to get a better understanding of my target users' behaviors, needs and motivations. After the foundational research, I developed a persona, empathy map and workflow to anticipate their specific situational needs. This enabled me to begin designing the app using wireframes and interactive mockups and after a few iterations, deliver an accessible prototype.

Work breakdown structure

WBS.png

Gantt chart

Screen Shot 2020-12-03 at 6.12.16 PM.png
Screen Shot 2020-12-03 at 6.17.23 PM.png
 

empathy map

The purpose of my empathy map was to get a better understanding of a specific target user. This process establishes a common ground to help communicate the user’s needs.

Effort/impact matrix

I used this method in the beginning of my design process, after brainstorming and before choosing an idea to work with and/or commit to.

 
Screen Shot 2020-12-03 at 6.22.08 PM.png
 

Persona

Screen Shot 2020-12-03 at 6.19.19 PM.png
 

Task Flow

 
Screen Shot 2020-12-03 at 6.22.08 PM.png
 

Competitor analysis

Screen Shot 2020-12-03 at 6.23.28 PM.png

Contextual inquiry

This is a research method to obtain information about the users habits and practices in their own environments. After giving the user a standard set of tasks and questions, the user is observed following a discussion to clarify any corrections that need to be made.

 
Screen Shot 2021-04-21 at 4.01.35 PM.png

Wireframes

 
Screen Shot 2020-11-24 at 11.10.48 AM.png
 
 

play in challenges

Connect with friends, start challenges & join an inspiring community. As you participate in challenges you can track your progress and encourage friends to join by sending it to them directly or sharing to a public page.

greenlife_portfolio_profile05.png
 
 
mockup_rank.png
 

compare your results

Set goals, earn achievement badges & celebrate milestones. Statistics and leaderboards help you track your progress and compare yourself with others. The leaderboard features the total impact made by you versus other users, across all challenges. As you check out the competition you can view and follow others participating.

 
 
 

connect with others

Making it easier than ever to collect, manage and monitor environmental information and compare with others. On your profile you will be able to manage your settings like any other social media app but also view the personal goals and impact you have made for yourself. This is a portal where you can access all current and past challenges and learn more about relevant information that might interest you.

greenlife_portfolio_profile05.png
 

case study

 

The lack of knowledge and motivation is the main barrier preventing people from recycling and living a more sustainable lifestyle. I want to give users a platform to collaborate and learn with each other. I believe this app is something that can make a big impact and can accelerate the spread of knowledge about sustainability and eliminate the stigma that surrounds it. Providing an app on your phone to help educate users and identify recyclable materials should be accessible to everyone. The challenging aspect would not only be to include this information, but to motivate users to take action want to do their part. To encourage use of the app, I designed features like creating a profile with the ability to follow/track other users, challenge others and share strategies.

 

The process

While designing this app, I wanted approach the issue by prioritizing the users needs. In order to get a better understanding of my users, I used an empathy map to gain the knowledge I needed. I knew that if I wanted to implement a user-centric design, I had to follow that process with a contextual inquiry to observe them interacting with the problem in their own environment. After discussing the topics that needed to be explored, I was able to make the fundamental correction to my design that I found necessary. This included adding features and pages that made the app more immersive and usable.

the conclusion

From my research, I found that this app becomes most beneficial to users when a social feature is implemented into the design. Along with a providing the user with the knowledge to recycle, they become more motivated to participate when they observe other peers cooperating as well. After conducting interviews, I found that I got a greater response with users who did it together and were able to ask questions with each other. This app design will satisfy my users needs and allow them to continue to stay connected and live a sustainable lifestyle together.

 

Branding

guide.png
 

Design principles analysis

Here is a sample set of the design principles I considered:

Consistency

To improve the usability of the interface, a consistent set of fonts, colors, and buttons are used across the layout. When creating a new challenge, each submenu used for customization has a similar appearance. Buttons whose actions take you to a new page are rounded, and menus with selection options are rectangular and the selected option becomes darker.

Mental Model

A common mental model for mobile application includes a small gear to represent the settings page and a small house button to go to the home page, as well as navigation bars that are accessible throughout the interface. To adhere to a new user’s mental model of mobile applications, I included those standard home and settings buttons in a navigation bar located at the bottom of nearly every screen.

Performance load

In order to minimize the performance load, my app minimized the total number of screens and actions needed to accomplish the user’s goal. By understanding the users context I was able to limit the amount of text and elements on each page to reduce the time it takes to complete the set up and begin participating in challenges.

 

Similarity

Related elements within my interface were designed to look the same or similar in order to improve the perception of their relation. For example, the four sections of customization when creating a new challenge are all identical buttons, but they are a different style of button than the “Create New” and “Share” buttons.

Fitt’s Law

I made the size of my targets as large as possible to improve usability. For example, I made interactive buttons like the back buttons larger. I also made the “Share” button fairly large and close to the other buttons so that it would be easy to click once settings are finalized.

Feedback

Selection option colors becomes darkened after the user selects an item, as if they were pushing a button, to give user feedback. The interactions are placed on each page to allow the user to feel engaged for a moment while selecting an option. This enhances the users experience within the app and improves the communication between the interface and the user.

 

Accessibility

It’s important to make things accessible to everyone. To optimize the accessibility of my interface, I considered physical and cognitive disabilities, along with environmental factors, to provide optional features that change text, fonts, colors and sound to ensure a high-quality experience is delivered to all users. By default, the layout uses a legible sans-serif font and includes increased contrast ratios and text size.

Aesthetic-usability effect

Utilizing an aesthetically pleasing layout, I designed an interface that results in the user perceiving the app as simple and usable. The users are more tolerant of minor issues encountered, maintaining a positive emotional response. This increases the users likelihood to be engaged with the product long-term.

Iconic representation

Apple’s human interface guidelines for iOS were used in my design to improve recognition and recall. Along with these benefits, following the guidelines aligns with the users’ mental model. This allows first time users to easily navigate the app, despite having never used it. The “Home” and “Settings” buttons are examples of resemblance and symbolic icons, respectively. Apple’s symbols are known worldwide and share a common visual motif for peak usability.