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.