green change
ui design and animation
case study
This project was based on the UN's sustainable development goals and the objective was to create an app that would aid in achieving one of them. The one I selected was goal 12, responsible consumption and production, target 12.6, "encourage companies, especially large and transnational companies, to adopt sustainable practices and to integrate sustainability information into their reporting cycle". The concept was to create an app that would make it easier for the average consumer to find the ethics information they need on a company all in one place. Therefore, through the power of supply and demand, putting pressure on corporations to improve their transparency and practices. As someone who is very passionate about the environmental crisis and human rights, this project was very exciting to me. The first step after I'd solidified my concept was to create some personas and work through what I thought would be important for the users of this app. The personas I chose to explore were a low-income but high-passion example in Lilly, someone who cares about the details and is willing to put in the time but doesn't necessarily have the money for more expensive brands, and a high-income but low-time example in Marcus. Someone who has the resources to make a change but not the time to take advantage of them effectively.
The next step was, of course, sketching and lots of it. I sketched out each flow of the app from the home screen, including changes in the UI depending on which page the user was interacting with and which way in which they were choosing to search. I wanted to include a separate search option for products and brands as I felt it was important for the user. I thought it was important that the user be able to search a specific brand they were interested in and be able to find both quick and detailed statistics on that, and also important to be able to search a product they were in the market for and get multiple good options to choose from. I also included an article page for easy access to other sustainability resources, the option to save brands for later, and a tutorial mode incase all these options were getting a little confusing.
After the paper prototypes were complete I had my peers examine them and interact with them, documenting any of their thoughts and action in charts like the one shown below. Based on this feedback I made adjustments, received more feedback, made more adjustments, and eventually moved on to creating a high fidelity interactive prototype.
The final prototype was created in Adobe XD and linked to be fully interactive. With this high fidelity mockup, I did my last rounds of user testing, collecting feedback, and made my final adjustments. Lastly, to help display the launch animation I'd imagined in XD I brought my files in to Adobe After Effects and created a brief UI animation for the application. Blow I've included screenshots of the XD file artboards, and their links, as well as the layers of my After Effects file.
.png)
enjoyed this case study?
there's more where that came from, check out another.
