How2Green
May 2021 - January 2022
Overview
How2Green is a project still in production, with the broad aim of uniting people in the fight against climate change. Due to the stage of its creation, some aspects of the project remain confidential, and cannot be posted here, but feel free to reach out with any questions.
Client
Team
1 UX Designer/Researcher
2 Developers
2 Environmentalists
1 Project Manager
Description
How2Green Features a few key interfaces, namely, the profile page, main feed, and group page. These pages are meant to facilitate communication between users, and help amplify small action against climate change.
Ideation and Sketching
In the first step of the process, after deciding on the content, I begin to develop possible outlines for the main pages. First, I created a few sketches of the profile page. We wanted the user to be able to access their groups from this page, so I experimented with how that would look, ensuring that groups would be a part of the profile interface. After that, I also sketched out various navigation pages for groups, allowing there to be multiple ways to view all group buttons at once. In this step, I also imagined how users would switch between profiles, and what that would look like. The last series of sketches featured here appears in the group feed. The group feed, accessible from the profile page as well as the main feed, shows individual posts in a scrollable feed. These sketches founded the original vision for How2Green, and began my path throughout the remainder of the development.
In addition to the screen sketches, I also did a rough sketch of the iconography, in order to best imagine our app’s features.
Mid Fidelity Prototyping
From the original sketches through the first set of prototypes, a few elements were altered. While I chose to continue using the sidebar for group navigation, I decided it would also be useful to use a tool bar for navigation. This decision stemmed from a need for multiple different pages, and the desire for clear options. Otherwise, the design decisions remained largely similar to that of the sketches. All iconography shown is original work, done by myself.
High Fidelity Prototyping
Still Frames
Prototyping In Motion
Producing the hi-fi prototype called for the specific branding needs. I presented multiple color schemes and logos for this stage, and we decided on the shades of bright green and yellow, with a leaf logo. The colors and logo were meant to reflect the name of our application, as well as our mission. Changes from the mid-fi prototype include the removal of some navigation bar buttons and the removal of the private and public account switch. I decided, after testing the design, to relocate the settings page to the profile page, where it can be located via the button in the upper right corner. This way, the primary buttons would only be “home,” “post,” and “profile.” This works well, because it draws all the attention to the most important aspects of our app. The private/public switch was also removed from all pages as we decided not to implement that feature in this iteration.
Design Practices
How2Green’s app design draws upon a lot of design practices, and is meant to enhance user engagement and ease in use. The final iconography reflects standardization practices across the industry. The three buttons on the navigation bar are all represented similarly across other applications. The “Home,” button, depicted as a home is standard practice, as is the “+” for post and a person for “profile.” Additionally, outside of the main bar, the settings button is also made to look like the settings feature on your phone and other applications. In addition to standardization, a lot of design decisions were based on natural mapping, and in particular, spatial relationships. Many buttons were grouped together by size and shape including the group buttons, which were made to look similar to each other no matter what page they are on, to indicate overall similarity. In addition to these aspects, visibility also served an important role in this design, as when buttons were interacted with, such as a navigation button, reactions, and the “join” button, the color of the button either darkened or changed color. This also allowed for easy error recovery, as the user knows that they have no longer clicked the button when the color reverts to normal. Overall, the design decisions made here create an easy-to-use, impactful design for the user.
Key Takeaways
Appeal to the User
Making sure How2Green was understandable to our users was a huge part of our challenge. Practicing standardization to allow users to easily adapt to our app and including micro-animations to increase joy in users to inspire change are all little ways in which we tried to appeal to our target audience.
Ideation is Crucial
Starting from scratch can be difficult but exciting. Using sketching and the iterative design process I was able to get useful feedback throughout the design process in order to create the best possible product.
Leading the Team
As the lead UI/UX designer on the team, often times I had to collaborate with our developers and other team members in order to ensure there was a universal understanding of our app amongst our team members.