Joe Vessell Profile

Joe Vessell

Designer, Developer, and User Experience Researcher

I am a designer and developer with over 18 years of experience handling user interface design, design systems, React development, web animation, user experience research, and branding.

Resume

Work

cover

Cover

slide 1

Orginial Logos

slide 2

Product Suite Examples

slide 3

Shape Based

slide 4

Icon Usage

slide 5

Product Branding

slide 6

Representation

slide 7

Customer Value

slide 8

Usage Moblie Application

slide 9

Usage Desktop Application

Next Steps

Next Project
next steps

Next Steps

Matrix Design Group Product Branding

Type: Product Suite Branding
Roles: Designer
Year: 2024 - Current

Product branding based on the Matrix Design Group parent brand. Developed a cohesive suite of products that align visually and conceptually with the parent brand while maintaining individual identities tailored to their respective customer bases.
Details: Conducted in-depth research into Matrix Design Group’s digital and physical products. Designed a product brand icon that reflects the parent brand’s appearance and core meaning. Presented the branding concepts to management teams for feedback and approval.

Schoolwio

Type: Desktop and Mobile Application
Roles: Designer, Developer, and User Experience Researcher
Year: 2022 - 2024

Application and brand created for teachers in kindergarten through 8th grade who need a solution to track student behaviors.
Details: I conducted user interviews to determine product market fit. Brand developed and refined from customer feedback. Marketing site and application built using React, Storybook, and Firebase. The application is currently in private beta testing.

Case Study
Marketing Site

cover

Cover

pattern libraries for applications

Pattern Libraries for Applications

colors

Colors

login page

Login Page

combination bar and line chart

Bar and Line Chart with Chartjs code

id card wizard page flow

ID Card Wizard Adobe XD Page Flow

id card wizard final animation

ID Card Wizard Final Animation

Next Steps

Case Study
Next Project
next steps

Next Steps

PBIS Rewards Application Pattern Libraries

Type: Pattern Libraries Desktop and Mobile Applications
Roles: Creator and Maintainer
Year: 2018 - 2024

Create and maintain pattern libraries for all applications: two web-based desktop applications and three mobile applications.
Details: Pattern libraries use Atomic Design methodologies. I built them using vanilla HTML, CSS, and javascript. The pattern libraries also serve as coded examples of functionality in the application for developers.

Case Study
cover

Cover

homepage

Home Page

search results

Search Result

all topics

All Topics

mobile views

Mobile Views

custom Gutenberg components

Custom Gutenberg Components

topic page controls

Advance Custom Fields Wordpress Topic Page

topic page controls

Site Content Structure

Next Steps

Support Site
Next Small Projects
next steps

Next Steps

PBIS Rewards Support Site

Type: Wordpress 6 Gutenberg
Roles: Designer, Developer, and Trainer
Year: 2021

A fully editable WordPress 6 site with Gutenberg and Advance Custom Forms (AFC).
Responsibilities: discovery, content organization, information architecture, wire framing, design, front and back end development and trained content creators on Gutenberg.

PBIS Rewards Support Site

Small Projects

cover

Marketing Site

application main page

Application - Main

application progress bar settings page

Application - Progress Bar Settings

application completed goals page

Application - Completed Goals

application progress overlay animation

Application - Progress Overlay

Great Goals

Type: React and Firebase
Roles: Founder, UX Researcher, Designer, and Developer
Year: 2020 - present

A social goal-tracking application used with friends during monthly physical challenges.

opening

Cover

opening animation

Opening SVG Animation

game

Game Screenshot

Play Discount Dungeon

Type: Three.js
Roles: Designer, Developer, and Dungeon Master
Year: 2021

A project at work to experiment using Three.js to introduce a game element into the application.

cover

Cover

application screenshot

Completed burpee amount and goal for the month of December

Entering burpee amount and emotion afterwards

Entering burpee amount and emotion after each set

List of every entry

List of every entry

How many times I felt a emotion after doing a set

How many times I felt after doing a set

React Tracker

Type: MySQL, PHP and Chart.js
Roles: Designer and Developer
Year: 2019

Experimenting with MySQL, PHP, and Chart.js and learning about behaviors, habits, and emotions while completing 3150 burpees in the month of December in 2019.