The Purdue University Extension Master Gardener Program provides a learning framework for participants to increase their horticultural knowledge on a wide variety of subjects.
Master Gardener members are asked to track their volunteer and educational hours throughout the year. This data is used by the organization to write grant proposals as well plan future projects.
By designing this app we are hoping to give members a faster, simpler way to enter their volunteer and educational hours.
Master Gardener Design
The Challenge
Currently, members of the Purdue University Extension Master Gardener program are asked to track their volunteer and educational hours on a website. They are asked to input their information in a timely manner, but as life gets in the way...that data goes unentered. Program administrators are stuck with a data backlog as the yearly deadline approaches.
The goal of this application is to allow members a way to input their volunteer and educational hours in a more timely manner. Doing so would help lessen the backlog of entries and help organizers have more current volunteer data that could be used for potential grant proposals and future project planning.
The Process
Discovery
The first step of my discovery process was to interview three Master Gardener members to find out how they interacted with the existing system. These interviews consisted of questions such as:
Can you walk me through the process you use to enter your hours?
How do you currently find volunteering opportunities?
How often do they log on to the website to enter hours?
Which features do they use the most on the website?
Are there features on apps they find difficult to use?
I took the information from those interviews and used it to diagram the user wants/needs and create a user persona. Spending the time to identify who this product is really designed for was an important point to revisit throughout the design process.
Can you walk me through the process you use to enter your hours?
How do you currently find volunteering opportunities?
How often do they log on to the website to enter hours?
Which features do they use the most on the website?
Are there features on apps they find difficult to use?
I took the information from those interviews and used it to diagram the user wants/needs and create a user persona. Spending the time to identify who this product is really designed for was an important point to revisit throughout the design process.
Ideate
I started by identifying key frames in the user flow chart and then drawing some initial sketches, ideating on at least three versions per frame. By creating an array of options I was able to identify elements that helped the user complete tasks as easily as possible. These sketches were then used to create low fidelity wireframes in a program called Whimsical. After several rounds of iteration I was able to bring those wireframes to the members I had interviewed for a round of user testing.
Section of the User Flow
Initial sketches for the sign in screen. Since this is a
companion app to the website, users won’t go
through the onboarding process on the app.
companion app to the website, users won’t go
through the onboarding process on the app.
Initial sketches for the Home Screen.
Initial sketches for entering Volunteer Hours.
I started by sketching three different versions for each screen, choosing different design elements and layouts to see how they helped complete the task on each screen.
I knew the screen for entering volunteer would pose a challenge because there was a lot of information that needed to fit on the screen and also make sense to the user. I was worried that the smaller font size might be an issue for an older user group.
I knew the screen for entering volunteer would pose a challenge because there was a lot of information that needed to fit on the screen and also make sense to the user. I was worried that the smaller font size might be an issue for an older user group.
Test
Users were asked to log their volunteer hours on the app and give their feedback on the overall usability. The user feedback that led to design changes:
A visual representation of their current lifetime volunteer hours and how many more they need to advance to the next level. (This would be reflected on the profile page).
Figure out a different way to display their lifetime hours instead of the circle that was on the lo-fi wireframes.
A proposed change that would require additional research to implement: A way for users to add information from the calendar to their smartphone calendars.
A visual representation of their current lifetime volunteer hours and how many more they need to advance to the next level. (This would be reflected on the profile page).
Figure out a different way to display their lifetime hours instead of the circle that was on the lo-fi wireframes.
A proposed change that would require additional research to implement: A way for users to add information from the calendar to their smartphone calendars.
Prototype
Using the user tested wireframes I began building a high fidelity interactive prototype in Figma. I chose a color scheme from the Purdue Extension Master Gardener logo that was light and airy and tried to keep the screens clean and easy to navigate.
Interactive Prototype
Reflection
This project reminded me that an app doesn’t need a bunch of features
to solve a user need. The Master Gardener members that I interviewed expressed their frustration with the way they currently track their hours. By giving them the ability to enter their hours through an app, organizers would have current data, the approval process would be more streamlined, members would be able to see their current hours and know exactly how many more hours they need to be elevated to the next Master Gardener level.
I don’t want to give the impression that there weren’t any bumps in the road of this design. I learned that aiming for a simplistic design can sometimes feel more stressful than a design that has a lot of features. There is a lot of data that needs to be entered to log hours and I struggled to find the simplest layout I could to hold all of the information. Bigger data fields cut down on the amount of white space and made it feel congested. Through user testing I was able to find a size of box and text that worked best and didn’t feel too claustrophobic.
to solve a user need. The Master Gardener members that I interviewed expressed their frustration with the way they currently track their hours. By giving them the ability to enter their hours through an app, organizers would have current data, the approval process would be more streamlined, members would be able to see their current hours and know exactly how many more hours they need to be elevated to the next Master Gardener level.
I don’t want to give the impression that there weren’t any bumps in the road of this design. I learned that aiming for a simplistic design can sometimes feel more stressful than a design that has a lot of features. There is a lot of data that needs to be entered to log hours and I struggled to find the simplest layout I could to hold all of the information. Bigger data fields cut down on the amount of white space and made it feel congested. Through user testing I was able to find a size of box and text that worked best and didn’t feel too claustrophobic.
Back to Top
I was responsible for all aspects of this project from start to finish.