See it live at taylorv.com or the repo

A single page Astro app to highlight past design work.

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:

1. Public parking ticket appeal
2. Private parking lot appeal
3. Neighbour complaint/warning
4. 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.

• Appeal letter page gives links to next steps, common letter actions, and a letter preview

• Goal was to mimic the fluidity of a native messaging by having current step update as user scrolls up/down

1. Clone repo
2. Navigate to project folder and run npm run install to install dependencies
3. Open terminal and run npm run start to start a local server
4. View on localhost address shown in terminal

• 3D UFO graphic designed by me using Spline

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.