The Problem.

Playful Plants Project is a research-based group focused on exploring how to effectively integrate more nature into children's lives, as engagement in outdoor play has been linked to healthy development of children. The objective was to develop a resource that provides information on which plants are best suited to create naturalized play spaces and hands-on engagement for children.

My Solution.

I created website for the Playful Plants Project, backed by server-side rendering and a database in SQLite. The site displays a catalog that people can browse through in order to find out which plants best suit their needs, also allowing them to filter or sort their results based on properties such as plant classification type and hardiness zone. The site also allows administrators, members of the Playful Plants Project, to log in and access the administrator view page, which lets them add, edit, and delete, and plant entries.
‍
Playful Plants Site Screen

Two Users Groups

The criteria for our Playful Plants website was to be designed with two distinct user groups in mind:

1. Consumers

  • Parents/families who are interested in providing high quality nature-rich places on a smaller scale around their homes and communities
  • Want to find information about plants to help engage their children in outdoor play and gardening projects

2. Admins

  • Researchers at Cornell University who are members of the Playful Plants Project
  • Can access more site functions and manage the site content by inserting, editing, and deleting catalog entries

Personas

I used the GenderMag Method to help develop user personas that focus not only on usability of the site, but also on gender inclusivity when problem-solving while using the site. Referring to the cognitive style facets—Motivations to use software, Information Processing Styles, Computer Self-Efficacy, Attitudes toward Risk, and Learning Styles of new technologies—I created two personas for the consume and the admin.
Persona for consumer users: Abi
Persona for Administrator users: Pat

User Goals

Consumers

1. Catalog with visual accompaniments
Images accompanying each plant catalog item will be helpful for Abi when shopping for plants and deciding whether she wants to incorporate them into her children's nature projects
2. Ability to easily filter and sort plants
Consumer users like Abi would want to quicken their search through filtering and sorting, and be able to receive immediate feedback once they apply filters
3. View detailed information about each plant
Consumer users like Abi would want to see more specific, comprehensive information about each plant to determine whether she can use it for her children's nature play

Admins

1. Quick access and view of full plant database list
Admin users like Pat will want to efficiently access and identify all the current plants in the Playful Plants database
2. Management and control functionality
Admins users like Pat would want to have more site functions like adding, updating, or deleting plant information to ensure that all information on the site is accurate and up to date
3. Security of site information and control functionalities
Admin users like Pat would want the site's information to be secure. A login feature would ensure that only members of the Playful Plants research project can sign in and access the control features of the site

Ideation

Keeping my users Abi and Pat in mind, I began iterating through sketches of an interface that would best suit each of their different goals and needs.

Consumer Screens

Consumer - Home
consumer home screen sketch
This is the landing page for both admin and consumer users. Each catalog item has the main information about the plant accompanied by an image. Users like Abi can browse through all the plants and quickly filter or sort through depending on her preferences.
Consumer - Detailed View‍
consumer detailed view sketch
A consumer user like Abi can click into a plant catalog item to see more detailed information about a plant to see if it suits her needs. She can find more of the specifics like hardiness zone, growing characteristics, care tips, etc.
‍

Admin Screens

Admin - Login
admin login sketch
If an admin user like Pat wants to access more site features that are private to research members of the Playful Plants project, he can log in to see the Admin view of the page. A log in feature ensures that site features for Playful Plants research members are secure.
Admin - Admin Only View
admin home screen sketch
Admin users like Pat are directed to this page once they've logged in. This page allows any admin to efficiently view all plants in a table format and see information like the plant ID, play types it supports, etc. This page also supports adding, editing, and deleting plant information, and it is restricted to admin users.
Admin - Edit
admin edit sketch
If an admin user like Pat clicks on an Edit button next to a plant, they will be taken to this page where they can edit the information to ensure that all information on the site is accurate and updated. This page is also restricted to admin users.

Design Implementation

Consumer Home:
Plant Catalog

Playful Plants site - landing page

Filter and Sort

Login

Playful Plants site - Admin View

Admin View

Add Plant Entry

Edit Plant Entry

Reflection

Final Result

I created a fully-functional server-side website backed by a database using HTML, PHP, CSS, and SQLite. This site is made to address the goals of both consumers and administrators of the Playful Plants Project.

Self Reflection

Through this project, I learned how to use PHP and SQLite, developing a better understanding of how to build server-side websites and work with databases and queries.

I've also gained a deeper understanding of designing a site with users in mind. By using the GenderMag method to create my user personas, I realized that as a designer, I need to consider multiple factors of a user's experience, such as their different cognitive styles.

Looking back on this project, I'm not completely satisfied with many design elements of my site. While I tried my best to create a usable site and follow best design practices when working on this project, I want to be more cognizant and thoughtful when it comes to designing the layout and visual elements of a site or product.

Feel free to check out my other projects and works!

Thanks for stopping by!👋
Reach out to me at gx44@cornell.edu for any questions or
just an interesting conversation—I'm always happy to chat.

InstagramLINKEDINGMAIL
BUILT WITH ☕ AND 💖 BY GRACIA XU