Practice Fusion home page screenshot

Practice Fusion home page

Working closely with a visual designer, in early 2016 I coded the fully responsive Practice Fusion home page. The page features seven animated tiles that open to reveal hidden content. Each tile is a child of a master Tile object each with individual properties and shared methods. The tiles expand using a combination jQuery animation and CSS 2D transforms. (See my Case Studies page to view HTML, CSS and Javascript of how the tiles were coded and animated.)

Role: Developer

Tags: HTML, CSS, Javascript, jQuery, CSS Animation, Responsive, WordPress

Practice Fusion Ember component library screenshot

Practice Fusion Ember component library

While at Practice Fusion, one of my primary responsibilities was to code a shared library of Ember components and custom styles that were used by other developers in their development efforts. Working closely with the design team, I would translate UX patterns and styles into reusable components such as button groups, content modals, date and time pickers and others. I also designed and coded an internal application that would allow developers and designers to browse the available components with working examples of each. Every component also had an annotated list of settable properties plus example code.

Role: Developer, Designer

Tags: Ember, Components, HTML, CSS, Javascript, UX Design, Style Guide

Practice Fusion Ember component library

While at Practice Fusion, one of my primary responsibilities was to code a shared library of Ember components and custom styles that were used by other developers in their development efforts. Working closely with the design team, I would translate UX patterns and styles into reusable components such as button groups, content modals, date and time pickers and others. I also designed and coded an internal application that would allow developers and designers to browse the available components with working examples of each. Every component also had an annotated list of settable properties plus example code.

Role: Developer, UX Designer

Tags: Ember, Components, HTML, CSS, Javascript, UX Design, Style Guide

Practice Fusion Ember component library screenshot

Practice Fusion custom icon font

Early in the Practice Fusion redesign process I realized that the many icons we were starting to employ would be more easily managed and accessible if they were aggregated into an icon font (similar to FontAwsome.) In my role as lead in of the UI Foundations Team, I developed a process to generate the icon font and make it easily utilized by developers. Designers would provide the icons to me as Adobe Illustrator files, I would edit the files to make them translate correctly into font format and finally would generate the font using FontCustom. The font was also included in the internal style guide I designed and maintained so that developers could readily find and implement the icon they needed.

Role: Developer, UX and Visual Designer

Tags: Icon, Font, Vector, Style Guide, Adobe Illustrator, FontCustom

Practice Fusion Doc Web screenshot

Patient Fusion DocWeb

One of my initial tasks at Practice Fusion was coding “DocWeb” for the Patient Fusion site. The online application written in .NET, allowed patients to search for nearby doctors who are members of the Practice Fusion network. The results page would allow patients to view the doctor’s photo (if available), search for an available appointment and enter a review of the doctor.

Role: Developer

Tags: .Net, Ruby on Rails, Bootstrap, HTML, CSS, Javascript

Patient Fusion DocWeb

One of my initial tasks at Practice Fusion was coding “DocWeb” for the Patient Fusion site. The online application written in .NET, allowed patients to search for nearby doctors who are members of the Practice Fusion network. The results page would allow patients to view the doctor’s photo (if available), search for an available appointment and enter a review of the doctor.

Role: Developer

Tags: .Net, Ruby on Rails, Bootstrap, HTML, CSS, Javascript

Practice Fusion Doc Web screenshot
Akash Systems home page screenshot

Akash Systems, Inc.

Design and development of WordPress site for satellite technology company Akash Systems including modeling and rendering of custom 3D model of product. View the 3D model of the Akash chip on Sketchfab.

Role: WordPress Developer, UX and Visual Designer

Tags:  WordPress, HTML, CSS, Javascript, MySQL, Linux server, Google Cloud, DNS, 3D, Blender

Zenmove screenshot

Zenmove

For consumer moving company Zenmove, I designed and developed the UI/UX for the site. The site features a unique and innovative “rotating card” function as the user progresses through the input form. The visual design of the site reflects this moving wave metaphor that delights as well as informs. The Zenmove site is frequently updated based on analysis of A/B testing performed through Google Analytics and UX monitoring via Hotjar. In addition to design and development, I am also the webmaster for the site which is served through Amazon AWS from an Ubuntu server.

Role: Front-end Developer, UX and Visual Designer

Tags: Design, Full-stack, WordPress, HTML, Animated CSS, SVG, Javascript, MySQL, Linux server, AWS Cloud, DNS

Zenmove

For consumer moving company Zenmove, I designed and developed the UI/UX for the site. The site features a unique and innovative “rotating card” function as the user progresses through the input form. The visual design of the site reflects this moving wave metaphor that delights as well as informs. The Zenmove site is frequently updated based on analysis of A/B testing performed through Google Analytics and UX monitoring via Hotjar. In addition to design and development, I am also the webmaster for the site which is served through Amazon AWS from an Ubuntu server.

Role: WordPress Developer, UX and Visual Designer

Tags: WordPress, HTML, Animated CSS, SVG, Javascript, MySQL, Linux server, AWS Cloud, DNS

Zenmove screenshot
100Plus mobile health app screenshots

100Plus Mobile Health App

While employed at 100Plus, I was responsible for the UX and visual design of the 100Plus health app. The app recommended activities that would improve the user’s odds of living a long, healthy life. 100Plus app would note your location and find healthy, easy-to-do activities (walking to a park, meditating, finding a healthy restaurant) and would keep track of those activities. Then using advanced data modeling, the app would calculate the anticipated age that the user could expect to live. A custom version of the app (shown here) was also developed for Kaiser Permanente.

Role: UX, UI and Visual Designer

Tags: iPhone, iOS, Android, UX Design, Photoshop, D3, SVG, Animated CSS, Health

Hopp2IT dashboard for Kaiser Permanente screenshot

Hopp2IT dashboard for Kaiser Permanente

A requirement for the Kaiser Permanente Hopp2IT app was a dashboard for those employees with neither an iPhone nor an Android phone. The dashboard would allow these employees to enter hopp results from desktop or laptop computers. Additionally, the dashboard featured a leaderboard that would show all employees the leading participants in the program. I designed as well as coded the dashboard using Backbone, jQuery and custom scripts.

Role: UI Developer, UX and Visual Designer

Tags: Design, HTML, CSS, Javascript, Backbone, jQuery, Dashboard

Hopp2IT dashboard for Kaiser Permanente

A requirement for the Kaiser Permanente Hopp2IT app was a dashboard for those employees with neither an iPhone nor an Android phone. The dashboard would allow these employees to enter hopp results from desktop or laptop computers. Additionally, the dashboard featured a leaderboard that would show all employees the leading participants in the program. I designed as well as coded the dashboard using Backbone, jQuery and custom scripts.

Role:  UI Developer, UX and Visual Designer

Tags: Design, HTML, CSS, Javascript, Backbone, jQuery, Dashboard

Hopp2IT dashboard for Kaiser Permanente screenshot
100Plus mobile app for SXSW screenshots

100Plus mobile app for SXSW

For the SXSW Conference in Austin, Texas, 100Plus launched a mobile web app that allowed conference participants to track alcohol consumption at the conference. Users were queried (anonymously) about their drinking during the conference and through data analysis to see how they compared with other attendees. The app was a huge success with over 7000 participants and was received favorable press coverage by TechCrunch. I was the co-designer and front-end developer for the app’s interface. The app was conceived, created and deployed in a little over three weeks.

Role: UI Developer, UX and Visual Designer

Tags: Design, iPhone, iOS, Android, Web Development, Animated CSS, jQuery Mobile, SXSW, Data Science

100Plus Outside app for iOS screenshots

100Plus Outside app for iOS

In the process of designing the 100Plus app, we designed a limited activity recommendation and tracking app that would suggest 32 healthy activities to the user, track completion, allow the user to share their completion on social media, photograph the activity to share, and to follow other users through the app. Completion scores were tallied and users were able to track friends’ progress through an in-app leaderboard. My role was as designer and primary web developer for the app which was developed using Adobe’s Cordova technology.

Role: UI Developer, UX and Visual Designer

Tags: Design, HTML, Animated CSS, Javascript, Photoshop, Cordova

100Plus Outside app for iOS

In the process of designing the 100Plus app, we designed a limited activity recommendation and tracking app that would suggest 32 healthy activities to the user, track completion, allow the user to share their completion on social media, photograph the activity to share, and to follow other users through the app. Completion scores were tallied and users were able to track friends’ progress through an in-app leaderboard. My role was as designer and primary web developer for the app which was developed using Adobe’s Cordova technology.

Role: UI Developer, UX and Visual Designer

Tags: Design, HTML, Animated CSS, Javascript, Photoshop, Cordova

100Plus Outside app for iOS screenshots
Adobe Photoshop Elements screenshot

Adobe Photoshop Elements Extras

Working closely with an Adobe designer, in 2009 and 2010 I coded the Adobe Photoshop Elements Extras and Adobe Premiere Elements Extras landing pages. The pages were updated bi-monthly and included tips and tricks for using Photoshop and Premiere Elements. To keep the page compact and tidy, I used jQuery UI accordion elements and fade transitions to reveal the tips for each issue.

Role: UI Developer

Tags: HTML, CSS, Javascript, jQuery UI, Animation

Site redesign for IGN.com screenshot

Site Redesign for IGN.com

IGN is the world’s leading website for video game and entertainment news. In my role as a Product Manager and UX Designer, I was responsible for redesigning the layout and user experience for the entire IGN site. This required collaborating closely with editorial and engineering stakeholders to set requirements and timelines. As part of the redesign, I created wireframes for every section on IGN’s site using Photoshop.

Role: UX and Interaction Designer

Tags: Product management, UX design, workflows, wireframes, Photoshop

Site Redesign for IGN.com

IGN is the world’s leading website for video game and entertainment news. In my role as a Product Manager and UX Designer, I was responsible for redesigning the layout and user experience for the entire IGN site. This required collaborating closely with editorial and engineering stakeholders to set requirements and timelines. As part of the redesign, I created wireframes for every section on IGN’s site using Photoshop.

Role: UX and Interaction Designer

Tags: Product management, UX design, workflows, wireframes, Photoshop

Site redesign for IGN.com screenshot

IGN.com UX and Interaction Design

In my role as Product Manager and UX/Interaction Designer at IGN.com, I generated many design documents for new and upgraded sections on IGN’s site. I developed a Microsoft Visio template that I normally employed that would be the working document for the change. The document would be approved by editorial and engineering stakeholders before being passed to front-end engineers and visual designers for production. I’ve converted several of the Visio documents to PDF which can be viewed by clicking the following links:

 

Role: UX and Interaction Designer

Tags: Product Management, UX Design, IA Design, Visio, wireframes, workflows, documentation