Montana Pistell

Web + Mobile Application Development Diploma

I’m someone who loves to challenge myself and solve problems in innovative ways. As a creative developer with a background in design and marketing, I’m happiest when I can put my development skills to use while applying my creative lens to create an exceptional product. I thrive when I feel connected to a team or a shared purpose, and when I can make a positive impact on the lives of others.

Connect with Montana on LinkedIn.

Capstone project

Plant Parents

This Design System is a collection of web elements and components to be used for the future development and launch of Plant Parents.

Plant parents design system
Plant Parents Design System

Plant Parents is a houseplant enthusiast’s online resource for being the best plant owner they can be. As a web app and a mobile app, Plant Parents helps users learn about their houseplants’ specific needs and allows them to create a digital catalog of their plant family, complete with customizable care reminders.

This design system will ensure that Plant Parents is accessible, mobile-friendly, consistent, and supports the big-picture mission of making people’s lives easier.

View the Plant Parents Design System live.


My goal for this project was to focus on something I was personally interested in and could positively impact others. As a self-proclaimed “plant mom”, the idea of a product that could make life a bit simpler for houseplant owners felt like the perfect fit.

I chose to develop a design system to be used for the future development of the product. As I had never built a design system before, I was eager for new challenges and learning opportunities.

An inspiration for this project’s mission was Helen Greiner, Chairwoman and Co-Founder of iRobot. In 1990 Helen sought to reduce housework and give individuals more time to spend on the things that matter. In doing so, she invented the Roomba.

After identifying pain points and need statements, I conducted a competitive analysis. While other websites offered a wealth of information about houseplants, Plant Parents would provide unique value by prioritizing simplicity and a personalized experience.

Branding & Design

When developing the branding of Plant Parents, my priority was to create a system with a clean, cohesive, and positive user experience. My mood board was inspired by the colours of the Pacific Northwest, and I wanted to evoke feelings of simplicity and comfort.

Montana Pistell Mood Board

Next, I put together the brand colours and logo. Throughout the project, the logo and brand colours changed in response to user feedback, and to allow for improved colour contrast.

Once the branding and vision for the system were complete, I put together an overview sitemap and a detailed sitemap. The overview sitemap outlined the navigation structure and purpose for each page, while the detailed sitemap listed the specific content that would be found on each page.

I then created low-fidelity wireframes to plan the layout of the design system on both desktop and mobile devices.

Montana Pistell Low Fidelity Wireframe
Low Fidelity Wireframes


I built the design system using HTML, CSS, and JavaScript. I started by building the HTML structure of the entire site, then used CSS and JavaScript to add style and functionality, including mobile responsiveness.

Next, I started working on the elements of the design system. I created a Codepen Library to house the elements, then populated a page for each element, which included a link to the corresponding Codepen, a short description, and an in-page example of the element in context. I later added quick summary sections to the top of each element page so that developers in a hurry could quickly and easily pull the information they were looking for.

Montana Pistell Colours Page with Codepen
Colours Page with CodePen

After completing the design system, I built a one-page Demo site to display the elements in action.

Montana Pistell Demo Mock-Ups
Demo Site

In the final stages of the project, I conducted accessibility and quality assurance testing, making adjustments as needed. I modified my code to pass validation tests, modified alt text for images, and improved colour contrast. I also optimized the site performance by reducing image sizes to improve page speed.

Interested in hiring one of our graduates?
Get in touch and we’ll connect you.

Check out other student projects from the same year: