A dynamic website that supports consumers wanting to start well-informed gardening practices and administrators managing an informational plant database.
Coming Soon!
This project isn't available right now. Something cool is in the works!
A dynamic website that supports consumers wanting to start well-informed gardening practices and administrators managing an informational plant database.
Individual
8 weeks
The Playful Plants Project is a group at Cornell University seeking to inform designers, planners, and facility managers of the benefits plants and natural features can bring to their spaces. A lot of these benefits apply to children, as exposure to certain types of plants can support children play and learning as well as promote playful nature engagement. My objective was to develop a resource to inform people about plants and how they could include them in the design of nature play spaces and gardens.
I planned, designed, and programmed a fully-functioning website. The website, designed for the Playful Plants Project, allows users to browse plants and filter/sort results based on properties such as sun requirement and tag. Additionally, administrators of Playful Plants can log in and access the Admin page, which lets them edit, delete, and add plant entries.
As mentioned before, the Playful Plants website was to be designed with two distinct user groups in mind: consumers (consumes information by viewing, shopping, and browsing) & administrators (admins; manage site by editing and deleting entries among other administrative tasks). The goals for each group were as follows:
Using what I knew about consumers and admins of the Playful Plants project, I developed user personas using the GenderMag Method and cognitive style facets. Focusing on not only usability but also on gender biases regarding use of and problem solving in software, I developed one persona for each of the consumer and admin.
Full-time Mother
37 years old
Researcher at Cornell University
26 years old
From the needs of Abi and Tim both based on their roles in the Playful Plants project and as individuals with different dispositions, I outlined sets of goals for each of them that I would focus on meeting through my design.
Since consumers like Abi want to pick plants to interest their children or kindle their interest in gardening projects, information to make these decisions should be clearly visible in the design
Consumers like Abi should know the visual components of plants when shopping for them or trying to decide to include them in their project
Consumers like Abi should be made aware of actions they should take or do not have access to
Admins like Tim should be able to use features like filter & sort to quicken their search for specific information
Admins like Tim should have features available to them through the site design that allow them to perform functions such as editing, adding, deleting, & printing plant items/lists
Since admins like Tim want to find plants with properties pertaining to their project, they should be able to do so without sacrificing traversal of the site
Using the user needs and goals I identified, I began sketching out user interfaces that would require based on their tasks and desires.
.png)
This is the first screen that any user — consumer or admin — sees when they go onto the site. Admins like Tim can login to see administrative features for managing the plant data, whereas consumers like Abi can use the catalog to browse for plants and filter results.
.png)
After clicking on a plant result from the catalog, more specific information pertaining to the selected plant are displayed, including its hardiness (growing period), whether it is annual or perennial, its requirements of sun or shade, and the tags applicable to it.
.png)
Admins like Tim can access this screen once they have logged in. It features filtering & sorting for displaying results as well as adding & deleting functions for managing the plant data.
.png)
At the bottom of the Admin Home is a form to add plant entries to the database. Admins like Tim can upload photos, enter text, and specify the information they wish to include in the new entry.
.png)
To increase accessibility and user experience of the site for consumers like Abi, a mobile version of the catalog allows for cross-platform usability and availability of the site.
.png)
Admins like Tim can use login credentials to access administrative-only features, ensuring that all users see content appropriate for their needs.
After gathering an idea of how I wanted to design the site, I moved on to design and implementation.
Throughout completion of the site, I followed a 2-phase development pattern:
I implemented all the screens I had planned based on the sketches shown earlier, so these became the high-fidelity fully-functioning features of the site and its design.
To access the admin page, use these credentials:
Additionally, if you notice any bugs or would like to suggest improvements, please contact me!
Status:
The site is hosted on Heroku here. Unfortunately, the credentials have expired and the site is no longer live. 😖
I will repost the credentials here when the site becomes live again!
Once the site was complete, I followed through with a cognitive walkthrough, or expert-led interface evaluation. Thinking about the Abi (consumer) and Tim (admin) personas I had developed, as well as their respective needs and competencies with technology, I critiqued my design based on how they may use or interpret the usability of my design.
This technique was practiced to try a new style of usability evaluation, as well as adhere to the project timeline.
At the end of the project, I completed a fully-functional server-side website backed by a database.
Languages: PHP, HTML, CSS, Javascript, SQLite
When it comes to programming, I would like to implement asynchronous requests for forms and component rendering. In other words, I would like to have content automatically re-render to reflect user preferences and inputs.
When it comes to designing, I would like to follow more UX best practices and visual styles. While I got to have a free hand with trying out designs that matched my ability to program them, I would like to see if I can program designs that I most resonate with or find to be the best in terms of usability and appearance.
