View

Programming and UX/UI portfolio

Here is all of my programming and design work, showcasing my technical skills and focus on user experience. I developed games using C++ and SFML in my first year of IDAD and another game in JavaScript during my second year. I’ve also worked on websites both inside and outside SETU, using HTML, CSS, and JavaScript. Throughout these projects, I combined coding with UX research and UI design to create user-friendly, accessible interfaces that enhance usability.

Blooming Flower Clock

pixel art flower

Blooming Flower Clock

SETU Carlow year 3

Clock represented by blooming flowers telling the season and time of day growth and movement of the flower implies the time have some trivia about the flower blooming in this month able to scroll through other months past months have wilted flowers and ones in the future are just seeds. Responsive mobile and desktop design.
first mock up done in photoshop then I made a sprite sheet in aseprite with each of flower and their stage of growths.

see whats in bloom today.

first wireframe of redesign

Description: SETU Y3, Unconventional clock, based on flowers
Tools: HTML, CSS, JS, Aseprite and Adobe Photoshop
Click/Tap image to find out more!

VLE (Virtual Learning Enviornment)

VLE login page

VLE (Virtual Learning Enviornment)

SETU Carlow - UX Measurement

To see my entire report of my process and the steps involved in my process please view download the below PDF

VLE Design Report.pdf

link to Figma Project:

view of modules

Description: SETU Y3, High fidelity Wireframes, work process for VLE UI design and UX Measurement
Tools: Figma, MS Forms and OBS(for user testing/recordings)
Click/Tap image to find out more! *Has Extend Description*

Introduction

The VLE user interface I designed is intended for college/university-level education, for both lecturers and students. It is a place for lecturers to make assignment, upload notes and give feedback. My goal while designing was to streamline these aspects of the interface make it intuitive and quickly navigable for any lecturer. For students it is a place to get assignment information, see important dates, find lecture notes, find useful course specific tools and get feedback/grading on their work.

To achieve a great design, it was first important to research existing VLE and their users. I decided to base my research on Blackboard the VLE that we use in SETU Carlow.

Research

I first carried out surveys on the existing VLE (blackboard) that students and teachers are using. Focused on asking users about the existing tools and features, and also about any features they would like to see. I did this so I could greatly simplify the user experience, cutting unnecessary or underused tools/features.

I gave teachers unique questions that apply more towards their experience of uploading, editing and tracking assignments, and giving feedback to students. This was done so I can find the weakness and strengths in the steps to making and marking an assignment. The most useful data to me was the text response where users can go into detail, and I can learn about the specific things they like and dislike.

Journey Maps and Personas

To get a better understanding of the user base and of their needs I made user personas for different types of teachers and also create a journey map outlining some tasks that a user might need to complete.

Students need an intuitive interface; they need to see announcements and upcoming due dates. A place to see their previous submissions and their overall grades. A place to find information about their modules and course work.

Teachers want to easily mark student work and give feedback, they need to quickly upload and download work, must be able to make announcements and notify students when assignments change and when new work is uploaded. The site must be easy to use even by less technical teachers.

journey map

Dr. Liam Singh wants to make sure students are seeing their work and getting the feedback they need and that his assignments are thought provoking

Full Process

To see if a full report on this project you can view this pdf, where I go over my wireframing process, desision infered from survey data, user testing, data visulisation and revisions



Retrograde Website

retrograde website

Retrograde Website

Commission

Website I designed and developed for Retrograde an Indie Soul-pop band based in Dublin. I used penpot to make a basic wireframe and then with feedback I made changes where need while increasing the fidelity. I add a spotify preview along with link to their relevent socials and a place to book tickets for their upcoming gig.

retrograde music preview website

Description: Commission, Website for a band in Dublin
Tools: Penpot(wireframing), HTML, CSS and JS
Click/Tap image to find out more!

Intern Manager

Intern Manager login page

Intern Manager

SETU Carlow

Intern managment App to find Interns from colleges, made in Flutterflow protoytpes in Figma. The app is connect to a firebase database to store user data.

first wireframe of redesign first wireframe of redesign first wireframe of redesign

Description: SETU Y3, App for managing college/university interns
Tools: Figma, FlutterFlow and Firebase
Click/Tap image to find out more!

DNOreilly's Fuels Website

website for dnoreillysfuels LTD selling fuels

DNoreillyFuels

Commission

This is a website I made for D&N O'Reilly Solidfuels & Timber, a local company here in carlow That sells solid fuels and gas. I made this website with the help of shopify I used presets and then add my html and css on top to get right look. Most of my was spent making layouts and choosing colour schemes.

Description: Commision, D&N O'Reilly Solidfuels & Timber web design & development.
Tools: Inkscape(wireframing), Shopify ,CSS
Click/Tap image to find out more! *Has Extend Description*

Research & Planing

The project began with extensive market research, focusing on fuel websites in Ireland. Initially, I examined major brands like Top Oil to gather insights. After presenting my findings to my employer, I inquired whether he wanted a similar website style. While he appreciated certain aspects, he expressed a desire to avoid a corporate, soulless look. This feedback prompted me to pivot my research towards smaller, local family businesses, such as Kenny’s Fuels and perrys fuels.

Through this exploration, I identified elements that instill trust and convey care in a family-run business. I discovered the importance of showcasing the people behind the business and using language that resonates with the local community. After compiling new images and text that captured this essence, my employer was excited, and we began brainstorming ideas for displaying employees and determining the necessary visuals.

Design Phase

TThe initial phase of the project revealed that DNoreilly Fuels lacked a logo, so I prioritized its creation. Developing a cohesive design and color scheme would establish a foundation for the rest of the website. Crafting a logo that embodied the brand’s personality was challenging, especially as I was not highly experienced in logo design. Nevertheless, I pushed forward with my concepts and began wireframing to determine the best layout.

Selecting the color scheme was also difficult. Initially, my employer favored red and blue, similar to Kenny’s Fuels and the trucks he owned. While the red was certainly eye-catching, it felt too serious and did not align with the desired brand image. We needed a more friendly and approachable palette. During this process, my employer noticed a sweet wrapper with a green and yellow color scheme. Though I was initially skeptical, it ultimately proved to be a perfect fit, lending the website a welcoming aesthetic.

In terms of typography, I experimented with various typeface combinations to achieve a modern and friendly look.

Further into development my employer decide to get a logo done by a professonal logo designer, this helped me really center the design and look of the whole brand.

fuel page

Development

After thorough consideration, research, and discussions with my lecturer, I concluded that it would be best to utilise a tool for handling the e-commerce section of the website. Given my tight timeline and at the time limited web development experience, ensuring secure payment processing was paramount.

I chose Shopify for its integrated e-commerce system. I began with a template that closely matched my wireframes, making necessary adjustments along the way.

Throughout the development process, we held weekly meetings to review my progress and gather feedback. I actively sought additional information and specifics, such as the text my employer wanted for each section.

After numerous iterations and continuous building, we launched the site, purchased the domain, and orders started to pour in.

fuel page

Reflection

This project was a significant opportunity that allowed me to design and develop a commercial product, providing me with invaluable insights into the business landscape and enhancing my design skills. Engaging with my employer and collaborating on the vision for DNoreilly Fuels highlighted the importance of understanding client needs and user perspectives.

I learned the value of conducting thorough market research and how it informs design decisions. By exploring both large brands and local family businesses, I discovered the nuances of building trust and community connection through design. This experience reinforced my belief in the power of empathy in design and the necessity of crafting user-centered experiences.

Throughout the project, I encountered challenges that required creative problem-solving, particularly in logo design and color selection. These experiences taught me the importance of being open to feedback and iterating on ideas. I also recognized the need for flexibility, as collaborating with professionals like logo designers can greatly enhance the quality of the final product.

If I were to undertake this project again, I would focus on integrating more advanced design tools and techniques earlier in the process. Exploring AI-assisted design methods could streamline workflows and inspire innovative solutions. Overall, this project has been instrumental in shaping my approach to design, emphasizing continuous learning, collaboration, and the significance of crafting meaningful user experiences.

Portfolio Website

portflio home page mobile

Description: SETU Y2-Y3, Portfolio website showing of my work in and out of SETU
Tools: HTML, CSS, JS, Pepot, Inkscape and Adobe Photoshop
Click/Tap image to find out more!

USAP Redesign Wireframe

medium fidelity redesign of usap website

USAP Redesign Wireframe

SETU Carlow

This is a meduim fidelity website redesign I designed for UI testing in 2nd year. I was tasked with redesigning a website with a bad or outdate design. USAP is a us website about Antartica, it has loads of information and programs but I found that it looked very outdated compared to other US gov websites so I tried to give it modern refresh

Below is the original website:

Here are some of the iterations I went through to get to the final design:

first wireframe of redesign first wireframe of redesign

Description: SETU Y2, Conduct user testing and redesign website
Tools: Inkscape(wireframing)
Click/Tap image to find out more!

Riverside Take Away Website

website for a take away

Riverside Take Away Website

SETU Carlow

This is a website I built in IDAD year 3 in the first semester.The website is primarily for showing off the Riverside take away menu, showing opening times, having contact info and also the ability to sell spice bags.I used WooCommerce and a theme I found on WordPress, made a custom header Image in photoshop and changed the colour scheme to match with Riversides branding, I also had to make some changes to the themes code because it wasn't working how I wanted like hiding the side nav and changing the positioning of the background image. I mostly used generative AI to write the contents of the website.

The SQL database for the website was setup through plesk, this is where all of the themes, plugins and web elements are stored.

basket preview for website

Description: SETU Y3, Website for local Cantonese take away
Tools: Wordpress, sql and Adobe Photoshop
Click/Tap image to find out more!

Escape from Time

website game puzzle exploration

Escape from Time

SETU Carlow

This is a website I built in IDAD year 2 in the first semester. This was my first time using javascript extensivly. Our theme was Time so I decide to make a game where you have to solve a puzzle using time portals to your advatage. There is one portal that take you to the future and one to the past, in the past there is more enemy as the building is not abandoned yet but in the past is also where all the tech still works well. Using these portals you must find a way to escape I didn't have enough time to add an ending so once you beat it it just goes on to the next leveland repeats.

I used a js canvas to render the sprites, the game is both desktop and mobile compatiable and can be downloaded as a PWA it also saves user data in local storage so you play from where you left off. I also used a song I composed in FL and add walking and running sound effects I found online.

Future screen options screen

Description: SETU Y2, Puzzle action game about time travel
Tools: HTML, CSS, JS and Aseprite
Click/Tap image to find out more!

Band Promotion Website

website for setu to promote a band

Band Promotion Website

SETU Carlow

This is a website I built in IDAD year 2 where I tested more complex html, css and javascript. It is a responsive of website and is well layout in both mobile and desktop it makes use of jquery for smooth animations. My website also has a form that save user information to local storage

alien Landscape

Description: SETU Y2, HTML Practicals
Tools: HTML, CSS and JS
Click/Tap image to find out more!

Golden-Duel

game about fliying around and hitting targets

Golden-Duel

SETU Carlow

2 player battle game each player gets a weapon they can attack with the weapon by pressing the button. Players are rewarded with more damage if they can time the press or release of a button to a visual indicator. Weapons have different properties depending on their size and how they would be utilised in life. Weapons get changed randomly every few seconds, so players need to learn the best strategy for every weapon if they want to win.

I designed the weapons on photoshop along with the protoype screens, then I used figma to design an interactive preview of the game.

View protoype below:

fuel page

Description: SETU Y3, Game Concept about dueling with weapons using only one button
Tools: Figma and Adobe Photoshop
Click/Tap image to find out more!

An Phiast's Destruction

website game puzzle exploration
end screen for cat game player sprites

An Phiast's Destruction

SETU Carlow / Dingle

Group project built in godot for Animation Dingle and for part of a course module. The game is based on Vampire Survivors (a 2022 roguelike shoot 'em up video) you play as Phiast who is the mascot for Animation Dingle, the aim is to destroy buildings/enemies this gives you exp allowing you to upgrade your slash attack and use many new attacks. The game is loosely set in Dingle Kerry the home town of An Phiast.

I mainly worked on the music for the game I also sourced all the SFX and programmed some attacks.

Github repo below:

You can download the game from the google drive below!

Description: SETU Y3, Game about surviving waves of enemies and general destruction
Tools: Godot and FL Studio
Click/Tap image to find out more!

Quest of An Phiast

fishing game
end screen for cat game player sprites

Quest of An Phiast

SETU Carlow / Dingle

This game was a sting / demo made for dingle animations. Group Project. In the game, players find themselves at Loch Corraillí, a mystical lake home to the legendary creature, An Phiast. The player casts their fishing line into the water, waiting patiently for a bite. Once they get a nibble, they must click quickly to hook the fish. Players use the scroll wheel to carefully reel in their catch, making sure they don’t reel too fast or slow.

An Phiast, the guardian of the lake, always demands a tribute. After reeling in a fish, the player offers it to An Phiast, who devours the catch in exchange for rewards. These rewards range from enchanted lures to stronger fishing lines, which help the player capture rarer and more valuable fish hiding deep within the loch. Over time, players get the best gear where then they have a chance to catch the rarest fish in Loch Corraillí’s waters completing the game.

I programmed the game in JavaScript using a js canvas, I made the assets and spritesheets in photoshop my partner also help with making concept art for some of the assets

Github repo and link for game below:


Description: SETU Y3, Game about fishing for a monster
Tools: HTML, CSS, JS and Adobe Photoshop
Click/Tap image to find out more!

Cardochism

roulette themed bullet hell game
home screen home screen

Cardochism

SETU Carlow

Cardochism was the end of year group project for IDAD in first year. The game is a bullet hell and involves the player dodging and killing enemies and once the time runs out the player has the chance to buy from the shop to get more lives or attack cards. The main game mechanic is is the ability to speed up and slow down the games playing at faster speeds means better reward but can be to difficult all the Time so you can also slow time to dodge easier.

I mainly worked on art I made all the backgrounds the player animations and the bullets all using photoshop. I also worked on some of the code I added the bullet shooting functions and the some of the animations using C++. I also added the main game music which I made using Fl studio.

Description: SETU Y1, Group project, bullet hell with slow time mechanic
Tools: C++, SFML, Adobe Photoshop and Fl Studio
Click/Tap image to find out more!

Escape from time

website game puzzle exploration

Escape from Time

SETU Carlow

This is a website I built in IDAD year 2 in the first semester. This was my first time using javascript extensivly. Our theme was Time so I decide to make a game where you have to solve a puzzle using time portals to your advatage. There is one portal that take you to the future and one to the past, in the past there is more enemy as the building is not abandoned yet but in the past is also where all the tech still works well. Using these portals you must find a way to escape I didn't have enough time to add an ending so once you beat it it just goes on to the next leveland repeats.

I used a js canvas to render the sprites, the game is both desktop and mobile compatiable and can be downloaded as a PWA it also saves user data in local storage so you play from where you left off. I also used a song I composed in FL and add walking and running sound effects I found online.

Future screen options screen

Description: SETU Y2, Game about time travel made using JS.
Tools: HTML, CSS, JS and Aseprite
Click/Tap image to find out more!

Cat and Rat

website game puzzle exploration
end screen for cat game player sprites

Cat and Rat

SETU Carlow

My end of year project for first year Cat and Rat, this game is about shooting rats and mice before they get to the cheese. All of the art assets were made in aseprite and I coded the game in cpp using sfml library, object oriented programming.

The enemies descend from the top of the screen while moving randomly left and right then when they are closes to the cheese they head in a direct line towards it. The player can shoot bouncing bullets to try to stop the enemy one hit will kill the mice but two will be need for the rats. Outside of college I added a milk power up the gives the player more speed.

Github repo below:

Description: SETU Y1, Game about protecting cheese from rodents
Tools: C++, SFML and Aseprite
Click/Tap image to find out more!

Heli-Shooter

game about fliying around and hitting targets

Heli-Shooter

SETU Carlow

Heli-Shooter is the first game I made in 1st year The aim of the game is to shoot targets that spawn randomly on the screen when the player hits one they get points and a new target spwans. The shooting is very buggy as it is the first game I made but it does function and is playable.

The assests were made in aseprite accept for the gameplay background which I got online. I coded the game in cpp using sfml library.

fuel page

Description: SETU Y1, Game about shooting targets that spawn randomly
Tools: C++, SFML and Aseprite
Click/Tap image to find out more!

Fish Grow

website game puzzle exploration

Fish Grow

Personal

This is a game I made in my spare time over the summer, the aim of the game is to collect food and gorw as big as possible. yellow pellets spawn randomly around to screen eating them increase player size once the player is big enough they can choose to evolve with the number keys. I only did coding for this porject again I used c++ with sfml libs

Github repo below:

Description: Personal, Game about growing a fish big.
Tools: C++, SFML and Aseprite
Click/Tap image to find out more!

Data Self Portrait

website game puzzle exploration

Data Self Portrait

SETU

In this project we are task with creating an visualisation of data from our lives, I decide to base it off data from my electronic piano.

  • Record full midi sessions of my playing for 22 days
  • Use midi data to create visual representation of my playing
  • Insight into how my playing visually changes when I am improvising, doing finger exercise and performing or practicing songs

Process footnotes

  • Looked at other people's projects
  • Researched midi in Processing
  • Got basic playback working
  • Struggled to read java documentation
  • Used ai to rework my code and get midi messages
  • Coded all the bouncing notes, track selection and tried to fix file bugs

Github repo below:

fuel page

Description: SETU Y3, audio visuliser
Tools: Processing(java) and Adobe photoshop
Click/Tap image to find out more!

To-Do App Wireframe

retrograde website

To-Do App Wirefram

SETU Y2

A productivity-focused to-do app with customizable views and smart organization features. Users can switch between Week/Month Views for upcoming tasks, an Eisenhower Matrix for priority-based sorting, and colour-coded task groups that learn user preferences. The app supports file attachments, importance tags, and group sorting for better task management. Custom notifications ensure timely reminders, while personalized navigation allows users to enable or disable different views, including Kanban boards.

Below is a pdf of all my high fidelity Wireframes (issue with export caused some to not render corectly):

retrograde music preview website

Description: SETU Y2, wireframes for todo list app
Tools: Penpot(wireframing)
Click/Tap image to find out more!

Feel free to reach out if you'd like to learn more about my work or discuss potential collaborations. I'm always open to new opportunities and connections!