Save Iggy
Overview:
As part of the Google UX Design Certificate, I created a mobile app for social good that allows users various options to support the Iguana Sanctuary "Save Iggy"
My Role
Sole UX/UI Designer from start to finish
​
Duration
Feb 2023-April 2023
​
Tools
Adobe XD, CanvaPro, Excel, Google Slides
Watch a demo of the final product
About the Project
As part of the Google UX Design Certificate, I was tasked with creating an app for social good. I chose to design an app for an Iguana Sanctuary in Miami, FL called "Save Iggy". The stakeholders expressed that they want the app to have a way for users to sign up for volunteer opportunities and donate through the app. Throughout this project I conducted user research, usability tests, created mockups, prototypes, infographics, presentations, reports, and more!
.png)
Understanding
the User
-
Empathize and define
-
Pain Points
-
Interviews
-
Empathy Maps
-
Personas
-
Problem Statement
Problem Statement
Putting myself in the user's shoes, I developed a problem statement that would most accurately describe the pain points I would be addressing while designing the app.
.png)
User Interviews
I conducted in-person interviews and asked mostly open-ended questions to allow for the most detailed responses possible. This allowed me to clearly identify user pain points and to create personas. I also asked follow up questions to gain more clarity and further empathize with the user.
.png)
.png)
Empathizing
After the interviews, I determined that there were three main pain points that needed to be addressed. Some users want to help the iguanas but don't have time to volunteer. The users that want to volunteer need to be made aware of the sanctuary locations. Users also want to easily make one time or recurring donations on the app. After gathering this info, I was then able to create an Empathy Map to better understand the user.
.png)
.png)
Creating Personas
After carefully combing through all of the interview responses, I compiled personas that best represented our users. One persona is an homeowner who wants an option to humanely remove iguanas from his property. The other persona is a high school student who loves animals and is looking for volunteer hours. Therefore, I wanted to make sure that I cater to both personas on the app.
Ideate
-
Competitive Audit
-
Competitive Analysis Report
-
Site Map
-
Paper Wireframes
-
Digital Wireframes
.png)
.png)
Site Map
This site map focuses on the pages of app that need to be created. I like to keep site maps as streamlined as possible to avoid confusion for the user. When I started creating wireframes and mockups later on, I made some changes to the sitemap based on usability testing and design feedback.
.png)
Paper Wireframes
Now that I had a full picture of our users and competitors, I referenced the site map to create wireframes. I began with sketching paper wireframes and moved on to create digital wireframes in Adobe XD. I sketch a lot before moving to digital wireframes.
Digital Wireframes
I created Digital Wireframes in Adobe XD based on my previous sketches. I made sure users could either navigate "back" or "exit" on every page.
Low Fidelity
Prototype
-
Low Fidelity Prototype
-
UX Research Study Plan
-
Usability Study
-
Analyze and Synthesize Results
-
User Journey Map
-
Iterate on Lofi Designs
Low Fidelity
Then, I connected the digital wireframes to create a low fidelity prototype. This is often where the fun really begins for me! I truly enjoy seeing all the hard work I've put in up to this point really take shape and become more tangible.
Time to test the Low Fidelity prototype on users! At this stage, I created a research plan that included conducting an unmoderated usability study. The study's main objective was to see how easy or difficult it was for the user to begin gameplay and place an order. I took detailed notes on each user as seen below. After the test, users were asked to complete a survey I created.
.png)
Affinity Diagram
I analyzed and synthesized the results and found patterns and themes that I organized into an Affinity Diagram. This helped me see what needed to be iterated on in the prototype in order of importance.
Actionable Insights
I then discovered actionable insights. I brainstormed solutions to user problems that came up during the testing phase.
Iterations
I proceeded to eliminate a step in the checkout process, add an option to remain logged in, and build a rewards program.
High Fidelity
Prototype
-
Design kit
-
Mockups
-
Prototype
Design Kit
I used Google's Material Design Kit as a building block for my own design kit. I played around with the color scheme and typography several times until I was satisfied with the visual design. I also created a mood board for inspiration.
Mockups
Now onto my favorite part! I used all of my inspiration from my mood board and the knowledge I gained from the testing phase to create mockups. The users expressed a need to easily sign up for recurring volunteer dates as well as recurring donations.
High Fidelity Prototype
I continued on to create a high fidelity prototype in Adobe XD. It was wonderful to see what I created really come to life!
Final Thoughts
-
Next Steps
-
Takeaways
After completing the final design, I thought of more designs I can implement to the app in the future. Designs that include adding more accessibility features, conducting another usability test, and adding a rewards program.
.png)
I successfully created a way for Fight or Flight's users to play and purchase their games quickly and easily. I learned that designing sites takes constant iteration and research. And, most of all, the user comes first!
