Hello Procreate!

Hello Procreate!

Welcome!

I have curated a selection of projects I have been working on in my spare time that relates to the product design position while highlighting my multi-disciplinary approach to design and development. The notes app and the habit tracker are exercises in creating an intuitive and fun app layout. The coffee website was designed as with development in the forefront with the intention to take it into the development phase. I enjoy creating interactive components such as animated loading bars and cursor effects so I thought I would compile a few I have created using react. Finally, the Filaprint is a website that I have developed from the ground up, going from design to development.

Quick links to jump around this page incase you are looking for something specific.

Application and Web Design

Development

Thank you so much for taking the time to look over my portfolio!

Habit Tracker

This modern habit tracker app features a clean, mobile-first interface. Custom picked habit colours bring a sense of fun and approachability to daily routines. The card-based layout and thoughtful UI design create a clear visual hierarchy, making habit tracking intuitive, engaging, and enjoyable.

The Colour palette was chosen to be soft and pastel like.The fonts was kept simple using different weights of that same font creating a cohesive look.

Project
Habit Tracker

Tools

procreate - sketching and initial ideation

Figma - final prototype

Note Taking App

The design aims to combine a playful colour-coded system with clean, structured UI elements to make organising and navigating the app intuitive and visually engaging. Strong visual hierarchy, consistent navigation, and tactile interactions ensure a smooth, mobile first user experience that feels both functional and fun.

I chose the background colour to be almost paper like, a slightly warm tint. I wanted vibrant highlight colors that jump off the screen. I wanted the typography to feel organic and handwritten without giving up readability,

Project
A colourful note taking app

Tools

procreate - sketching and initial ideation

Balsamiq - Wire framing

Figma - Final Prototype

fox & hound Coffee Roasters

A sleek e-commerce experience for a fictional coffee brand, focused minimal aesthetics with earthy tones and a focus on intuitive UX. The site highlights a warm brand identity through soft rounded corners and flowing shapes, animated overlays, and seamless navigation across the pages.

Project
Modern web experience for a coffee roaster.

Tools

Pen and Paper - sketching and initial ideation

Figma - Wireframes and Final Prototype

React Elements

I have created a small site of interactive elements made in react with Motion. The full site is listed with all of the demos, I have selected a few recordings here.,

FilaPrint

(Not currently live)

A custom 3d printer filament tracker

I needed a way to keep track of all the spools of filament and which types i have tried for when it comes to reorder. It scrapes the Bambu product pages for the list of colours for the user to select.

Frontend Tools

React with Typescript, tailwind

Backend Tools

Node.js, PostgreSQL, Firebase Authentication

Project Gallery

The mockups look nice but sometimes can be hard to see details, I have included high quality images of each of the apps and sites on the page.