Naomi Hatch | Design Portfolio
Sprout Circle Sustainability App
Introduction to Interaction Design
The goal of this semester-long project was to find a problem, and through research, user testing and prototyping come up with an innovative UX solution. This culminated in creating a high-fidelity prototype of a suitability gardening app called SproutCircle.
Background
Starting my Masters of Science in Information with a focus on UX and HCI, I completed the course Introduction to Interaction Design at the University of Michigan. This honed my skills in interaction design. The project lasted for just over three months and was done in a group of four. Team members included: myself, Siqi Zhai, Chenxin Zheng and Angelica Wang
"How might we help users to connect with their local gardening initiatives and combat climate change without becoming overwhelmed and losing motivation before they can even begin?"
Problem Statement and Background Research
The first step was to create a problem statement and conduct background research in the form of a competitive analysis. This allowed the team to better understand the problem space and ensure we were on the same page as a team.
Personas and Scenarios
The next step was to understand our users better, we achieved this through creating detailed personas and scenarios based on the personas. The scenarios helped us better understand what activities we wanted in the app to help users achieve the goals stated in our problem statement.
User Flow
Before jumping into prototyping, we worked as a team to make a User Flow Diagram. This allowed us to pinpoint pages, interactions and goals for the protypes to come.
Paper Prototype and User Testing
Creating a paper prototype allowed us to quickly and easily test interactions for our design. Each team member worked on several pages of the paper prototype. I created the volunteer, welcome and sign-up pages.
​
Once our prototype was completed, we held several user tests to better understand how someone unfamiliar with the project would interact with our app. User testing with our paper prototype showed us some serious flaws in the design, including the usability of the navigation bar and functionality of buttons throughout the design. Pages also had confusing names which were never defined for the user. This showed us the way the navigation bar was done needed to change. We decided to add words and use more appropriate images for each page they applied to. The volunteer page confused users as there were not clickable buttons in list view. This led to us to add a button for each volunteer activity during Low-Fidelity prototyping.
Volunteer Page Prototype
Welcome and Sign-Up Page Prototype
Volunteer Page Ideas
Low-Fidelity Wire Framing and Usability Testing
Once the paper prototype and subsequent user testing was completed, it was time to turn our attention to low-fidelity prototyping. We each worked on specific pages, but spent much more time comparing our look and feel. I focused on the Log In process as well as the Volunteer Sign-Up flow. We designed our low fidelity prototype in Figma and made the buttons have some interaction in order to conduct more user testing and create usability reports. This testing allowed us to understand where we were still falling short and what was working in our design. The main takeaways from usability testing on my pages was the need for a more in-depth sign-up process. Additionally, there was too much on the details page. We decided to make the sign up form a pop up and then show users through visual cues that the sign up had been successful.
_Page_1.png)
Log In Pages
_Page_2.png)
_Page_3.png)
Volunteer Activity Sign-Up Flow
High-Fidelity Prototype
Taking the data collected from our usability testing and reports we turned our focus to creating a high-fidelity prototype. From our testing we saw the need to combine the Garden Finding feature Angelica had been working on the Volunteer Sign-Up pages. Due to this change, Angelica and I worked in tandem to create the Activity Search and Sign-Up flows that now included both Community Gardens and Volunteer Activities. Additionally, we worked on the Profile Pages and the Log In flow. This process taught us how to work together and showed the power of combining strengths and ideas.
Log In Page
User Profile
Volunteer Activity Sign-Up Flow
Takeaways
This project allowed me to go through the full design process from idea creation all the way to high-fidelity prototyping and it taught me how to do this successfully while working in a diverse team environment. I learned how to better communicate my ideas and better understand my team members ideas, goals and motivations. I also learned how to effectively prototype, user testing and interview skills, how to use Figma to create a high-fidelity prototype and most of all how to manage these tasks, team expectations and my own personal goals.
Overall my takeaways are the skills listed above and also the softer skills of teamwork, collaboration and the importance of iterative and inclusive design.