I'm a Product/UX Designer with experience making SAAS and enterprise security products easier to use. This is the place to view some of my coding projects. Professional design portfolio available upon request.
- Project Bubblegum. A design system and project template built with Nextjs (App Router), Typescript, and Tailwind CSS. Focused on simple and usable form components and UI patterns.
🚗 Parkadoo
See it in action at parkadoo.com or parkadoo.netlify.app
This was an experimental project to help people understand Edmonton parking laws better and create a letter that can help with the appeal process. There are three letter types plus the ability to proactively avoid parking tickets:
- Public parking ticket appeal
- Private parking lot appeal
- Neighbour complaint/warning
- Quickly check list of city bylaws to see if you're likely to get a ticket
- Many form-based wizards are inflexible and frustrating to use, particularly on mobile devices. This project sought to explore a more fluid user experience by mimicking native messaging apps.
- Key experimental design pattern:
- Allowing the step-by-step wizard to update active section via buttons but also on scroll. See example section below for video.
- For context this project began in 2019 when scroll based interaction patterns were more unusual, especially for forms. Nowadays it's fairly common to see form/survey products utilizing some variation of scroll-based interactions.
- Goal was to reduce external dependencies as much as possible. Uses vanilla JS, CSS, HTML
- Use es6 modules instead of Node.js require
- Privacy and offline first. User data is not collected and user answers are saved to user's device and clears after their browsing session ends
- Make it easier to check bylaws by using providing a list, summarizing in plain language, and linking to official bylaw.
parkadoo_appeal1.mov
parkadoo_appeal2.mov
- Appeal letter page gives links to next steps, common letter actions, and a letter preview
parkadoo_letter.mov
- Goal was to mimic the fluidity of a native messaging by having current step update as user scrolls up/down
parkadoo_scrolling.mov
- Clone repo
- Navigate to project folder and run
npm run installto install dependencies - Open terminal and run
npm run startto start a local server - View on localhost address shown in terminal
- 3D UFO graphic designed by me using Spline
🏁 MK1 Leaderboard
View the public repo or see it in action at https://mk1racing.netlify.app/
MK1 is a Mario Kart race league started during the Covid-19 pandemic. This project was a way for me to learn React by creating a visual leaderboard that could be used by the league to better track race results.
- Design is not polished. This was primarily a coding project with minimal time spent refining visual design or interaction patterns.
- Goal: Follow standard race league leaderboards while also allowing users the ability to quickly see rankings by season as well as all-time results.
- Logo designed by Steve A.
- If I ever have time the Avatars will be updated to pixel art.
- Pixel art background created by me using Figma
- Uses React for the UI and Google Sheets API to host/update data.
- There's a known async rendering issue with season results on initial page load. Can be fixed by triggering a re-render using the season dropdown.
MK1_overview.mov
