Founded in 2020, Earth Love United (ELU) is an international non-profit organization based in Nigeria devoted to driving awareness of climate-related issues. They believe an informed public is essential to bring positive environmental impact. While advocating for climate solutions, they firmly believe online presence will significantly support accomplishing their goal. To do so, they invested in solutions through social media campaigns, podcasts, newsletters, and their founder's book, The Green Energy Boom. The Earth Love United team has asked us, UX/UI Designers at the Guac Group, to join them in this project.
Earth Love United is particularly interested in getting young people involved in the fight for climate justice. Because of that, they want to connect people who share similar values. To do so, they started to work on a mobile app that combines characteristics of other social media platforms such as Facebook and Instagram and dating apps such as Tinder and Bumble to build their app.
1. Research and analysis of the existing platform, using Jakob Nielsen's 10 usability heuristics internet usage rules and discovering micro-interactions.
2. Start with iteration, using as a baseline the previous team's design work, and our team's new proposal. Next designing high-fidelity Mock-ups for the client's approval.
3. Testing with their target audience, Gen-Z( Up to 24 years of age), to gather feedback.
4. Final Hand-Off with modifications that were done with feedback gathered.
They had previous work done by a group of designers and needed additional help expanding their project. My team and I were responsible for making a current analysis of their social media mobile app and preparing a Minimum Viable Product (MVP) with the appropriate changes for development.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.png)
We started with a discussion session among one of the previous designers who worked on this project and the client to get all the feedback and information required to plan the next steps and brainstorm. Finally, we came up with the main points that would improve the user experience.
The Main features missing were:
-Stories.
-Post and comment section with sharing option.
-Short videos like TikTok and YouTube.
-Chat section like any other social platform.
-A search area (People and topics).
-Potentially utilizing glassmorrphism.
The application contains five main red-routes ( home, connect, post, inbox, and profile), each serving a specific purpose that will ultimately resemble other social media platforms, thus engaging the user. By doing an overall audit, we got a decent picture of how users will interact with the application and the high-value content displayed.
Micro-interactions are essential for an app's functionality, provide instant and relevant feedback about a completed action, and help users direct their attention to where it needs to be. With that in mind, based on the previous design, we were able to explore the possible micro-interactions that were not created and how they should behave once implemented.
The Heuristic evaluation is an essential part of designing a great product that users can easily interact with and find value. My team and I were able to find different points and inconsistencies throughout the app. In addition to that, we provided recommendations depending on the severity of each case.
.png)
We then created a table that would serve us as a give to work on the pain pointsfound by classifying them by severity, the heuristic rule that it was infringing with, and recommendations.
Our iteration process started by using discoveries during the research phase. Our primary focus was making sure text and icons contrasted according to accessibility standards. In addition, consistent UI elements throughout the app convey professionalism and trust to users. Finally, by comparing the old and new versions, we can have a clear perspective of the improvement.
Although the color contrast on the buttons passed accessibility, we switched to a modern and aesthetic look.
Following current design trends, we added a glassmorphism interface every time a text input field was displayed.
Under Log In screen, we changed the display of social media icons and added an underline under Sign Up Button to put extra emphasis on it.
We added a different card selection option for the subsequent two screens and a box for the “not now” button to match the button above it for a sleeker look.
1. Added stories option as requested by the client.
2. Changed the icon's color on the navigation bar at the top from green to white for better contrast.
3. Changed green verified check account from green to blue to match other social media platforms and for contrast purposes.
1. Remove Icons for dislike, super like, and like and instead add a follow button, with the option for the user to swipe left and right.
2. Added glassmorphism interface under the name for accessibility purposes.
1. Change the message icon with another one that contrasts with the dark background.
2. Instead of using filling buttons for “personal” and “group” options, we used an underline and changed the color of the words to green to match brand colors.
3. The navigation bar icon at the bottom was changed to be filled once users are on that screen.
1. Under profile, we stretched the picture across the screen for a better layout.
2. Also added glassmorphism interface under the name for better readability.
3. Changed color of “following,” “followers,” and “saved post” to pass contrast and added a dedicated section for them.
Based on the list of micro-interactions we compiled during the previous stages of the project, we created a design similar to Instagram. By doing so, users would already be familiar with each step and possible outcome once they interact. This would give us the baseline we needed to develop high-fidelity screens.
The micro-interaction wireframes served as a baseline for the development of high-fidelity screens. By matching the existing with the new proposals, we delivered a much in-depth product that speaks the user's language.
.png)
Now that we had a fully designed application, it was time to test with participants who would meet our criteria. We choose Gen Z (age 18-24) people interested in learning about the climate crisis and connecting with like-minded people. In addition, they needed to be familiar with the most popular social media platforms. First, we conducted a moderated test to examine users' reactions.
-Uncover any possible usability issues
-Identify any confusion with wording and icons
-Make sure screens are intuitive, and users can complete desired tasks.
-Are users able to look for a specific topic or person?
-How do users interact with the Connect feature?
-What is the user’s overall experience using the application?
After each team member was able to complete this step, we compiled a list of notes containing insights from the interviews.
All notes were shared, and we started to notice patterns among interviewees and what they experienced during the activity. We used affinity mapping to find the most common feedback we received and pain points that needed to be addressed.
Once the affinity map was completed, we could organize each issue found into categories that would enable us to focus on implementing them back into the design. We split them into four categories: Critical, Major, Minor, and Normal. Three of them, in particular, drew our attention that needed to be addressed.
Connect feature function is restricting and not clear.
Summary:
-The X button was overlooked, users were unsure how to move forward.
-Users who want to view a previous profile sometimes accidentally hit X.
-Not sure if the following went through, need confirmation.
Recommendations:
-Replace the X button with left/right arrows to move between profiles.
-Add confirmation page/status when the message and follow button is clicked.
Can’t tell the difference between new and seen messages
Summary:
-Users expressed differences between new and seen messages are too subtle.
Recommendations:
-Bold text of the new message to stand out more.
The saved post gallery icon is confusing.
Summary:
-Users are not sure what each icon means.
Recommendations:
-Replace icons with labels.
Once we gathered and compiled all the feedback from our participants, we moved to unmoderated testing to get additional insights but quicker and more unbiased. One out of three participants did point out that the application looks a lot like Instagram and Tinder, which in our client's eyes was precisely what he was looking for, thus accomplishing that goal. Additionally, this session validated our previous discoveries: the application is easy to use, straight to the point, and resembles other prominent social media platforms.
.PNG)
.PNG)
Based on the issues that were found, we were able to quickly implement changes back into the design that would improve the overall usage of the application and engagement of the user. This would be the final step of our design work which was prepared for the developer handoff.
To further aid communication between my team and the developers, we created specific documentation with annotations to help them develop the product. By doing so, we will ultimately help developers understand the application's functionality and how it should behave once it is launched. The style guide was also included as a reference, should any questions arise.
.png)
Detaching from my own bias opinion is key to providing an exceptional user experience. Therefore, it is crucial to analyze user research data objectively to formulate a strong rationale for decisions.
The design process is constantly changing, and iteration is fundamental. However, we don’t need to re-invent the wheel. Instead, simply breaking down existing design patterns and implementing them in our design work can benefit us.
Earl Love United share similar goals as many popular social media platforms. Connect, engage, teach, and bring awareness among young people about our responsibility for caring for environmental issues are at its core.
