Skip to content
View tayv's full-sized avatar

Block or report tayv

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
tayv/README.md

Hello πŸ‘‹

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.

πŸ”§ Things I'm working on:

Past projects:

πŸš— Parkadoo

See it in action at parkadoo.com or parkadoo.netlify.app

What is parkadoo?

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

Philosophy

Design

  • 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.

Code

  • 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

UI examples

Light and dark mode

Checking bylaws

  • Make it easier to check bylaws by using providing a list, summarizing in plain language, and linking to official bylaw.

Creating an appeal letter

parkadoo_appeal1.mov
parkadoo_appeal2.mov

Appeal letter (city)

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

Scrolling

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

How to set up

  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

Other notes

  • 3D UFO graphic designed by me using Spline

🏁 MK1 Leaderboard

View the public repo or see it in action at https://mk1racing.netlify.app/

What is MK1?

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.

Philosophy

Design

  • 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

Code

  • 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.

Examples

MK1_overview.mov

Desktop

Desktop - MK1 Final Season Standings Desktop - MK1 All-Time Championship Rank

Mobile

MK1 Mobile View

Pinned Loading

  1. parkadoo parkadoo Public

    JavaScript