Plant Propagation

an instructional website on gardening

My Role
UI Design
Visual Design
UX Architect
Alliyah Franklin
Adobe XD
Adobe Illustrator
Timeline: September - December 2020 (3 months)

Project Overview

For my user interface design class, we were tasked with creating an instructional website using the user interface design principles we learned throughout the semester. By implementing these principles we learned how to develop and organize screens that are user-friendly.

The one requirement we had when picking a website topic, was it must be educational and teach people how to do something. I chose to do it on a gardening technique I had recently learned called plant propagation. Plant propagation is when you take a stem or a leaf from a plant and grow it into a new one.


1. Create a design that is user-friendly

2. Implement all UI design principles into prototype

Implementing the Principles

Multimedia Principle

Throughout the semester we were taught 19 psychological theories on how to properly organize screens. Below are few of these theories and how I incorporated them into my prototype of my instructional website.

Multimedia Principle states that people learn more effectively with words and pictures together. So, I paired every step in my instructions with corresponding pictures that users can use for further direction. Pairing visuals with the written instructions can help users better understand,therefore encouraging germane cognitive load.

Spatial Contiguity Principle

Spatial Contiguity Principle states that people learn better when corresponding words and pictures are presented closer to each other rather than farther. I made the picture captions and descriptors relatively close to there,relating part of each one's image.

Serial Position Effect

Serial Position Effect states that users tend best to remember the first and last items in a series. To implement this principle, I featured the most important steps at the beginning and end of the instructions. This was the “Choose your plant” and “Now we wait” steps. These are important because choosing the right plant to propagate can hugely affect the task, and waiting for the roots to grow long enough before transferring it into the soil is important to your plant’s life.

Zeigarnik Effect

Zeigarnik Effect states that users tend to remember uncompleted or interrupted tasks better than completed tasks. Keeping this in mind, I created a feature that the previous step on the progress bar will turn green to indicate completion when the user moves on to another step. In comparison, the remaining steps are grey to indicate uncompleted tasks.

Von Restorff Effect

Von Restorff Effect declares that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.This helps highlight important aspects that you want your users to remember. This is represented in my prototype by bolded words, varied font size, and different colors.

Coherence Principle

Coherence Principle is when users learn better when extraneous material is omitted. Keeping this in mind, I simplified my steps and only included the important details that would be detrimental to the task if excluded. I also deleted the home button since users can click the logo and be returned to the home screen.

Final Design & Takeaways

This project was a great way to learn how to effectively develop and organize screens by having proven theories that drove design decisions. Although, it was a bit more difficult to produce, the design solutions that I developed came out well and far better than if I designed strictly off of aesthetics. By focusing on attempting to provide users with the most optimal usability, I was able to think out of the box and make design choices with the user in mind. These principle are something that i now use frequently when developing interfaces.