The Portfolio of
Jonathon David Barth

Web Designer and Front-end Developer Extraordinaire

ComTrac Application Screen — ComTrac

https://fusionalliance.com/comtrac

Hide Details

ComTrac

ComTrac

Click for Details

June 2023

A multi-year project to evaluate and rebrand an existing B2B application. I reviewed each screen and user flow throughout the application with the business team, identifying concerns and areas for improvement. I then created an updated navigational blueprint, rebranded component library, screen templates, and multi-layered user workflows within high-fidelity mock-ups.

The Finer Details

Web Design, Rebrand, Information Architecture, Navigation Blueprint, User Worflows, Layout, Responsive, Custom Icons, Component Library, Photoshop, Illustrator, XD

Live URL

https://fusionalliance.com/comtrac

Tactic Builder Application Screen — Tactic Builder

Confidential Client

Hide Details

Tactic Builder

Confidential Client

Click for Details

April 2023

This application was designed to consume client-owned digital assets, both visual and textual components, to create fully coded dynamic marketing campaigns. I worked with the business team to define the necessary user flows, a navigational blueprint, wireframes, and high-fidelity mockups. I then consulted with the development teams, providing necessary assets and direction throughout its development.

The Finer Details

Application Design, Information Architecture, Navigation Blueprint, User Worflows, Responsive, Layout, Wireframes, Illustrator, Sketch

Live URL

Confidential Client

Adobe Experience Manager Assessment Page — Adobe Experience Manager Assessment

Confidential Client

Hide Details

AEM Assessment

Confidential Client

Click for Details

February 2023

I provided an expert evaluation for an on-premise implementation of Adobe Experience Manager where concerns and opportunities were identified and given a severity grade along with actionable recommendations for each. This report was then presented to and received positive responses from the internal business and Adobe development teams.

The Finer Details

Heuristic Evaluation, WCAG, Analysis, Adobe Experience Manager, PowerPoint

Live URL

Confidential Client

The Hub (tentative) Application Screen — The Hub (tentative)

https://www.kineticadvantage.com/

Hide Details

The Hub (tentative)

Kinetic Advantage

Click for Details

February 2022

The tentatively titled "Hub" extended and refined the ideas outlined in the Communications Platform. I worked with the business team to establish multiple user flows, a navigational blueprint, and wireframes.

The Finer Details

Application Design, Information Architecture, Navigation Blueprint, User Worflows, Desktop, Responsive, Layout, XD

Live URL

https://www.kineticadvantage.com/

Mulberry Interactive Style Guide Screen — Mulberry Interactive Style Guide

https://www.kineticadvantage.com/

Hide Details

Mulberry Interactive Style Guide

Kinetic Advantage

Click for Details

February 2022

A referenceable interactive style guide created to assist in the development of the Mulberry application. This included the various presentations of all components expected to be developed within the application.

The Finer Details

Application Design, Information Architecture, Navigation Blueprint, User Worflows, Desktop, Responsive, Layout, Component Style Guide, XD

Live URL

https://www.kineticadvantage.com/

Mulberry Application Screen — Mulberry

https://www.kineticadvantage.com/

Hide Details

Mulberry

Kinetic Advantage

Click for Details

February 2022

A responsive desktop application designed to assist in the management of vehicle auction and dealer information and their vehicles. I worked with the business team to establish multiple user flows, a navigational blueprint, wireframes, high-fidelity mockups, and a referenceable interactive style guide.

The Finer Details

Application Design, Information Architecture, Navigation Blueprint, User Worflows, Desktop, Responsive, Layout, Component Style Guide, XD

Live URL

https://www.kineticadvantage.com/

Kinetic Advantage Communications Platform Screens — Kinetic Advantage Communication Platform

https://www.kineticadvantage.com/

Hide Details

Communication Platform

Kinetic Advantage

Click for Details

January 2022

A mobile-first application designed to assist in the timely communication and management of tasks associated with vehicle auctions and dealerships financing through Kinetic Advantage. I worked with the business team to establish multiple user flows, a navigational blueprint, wireframes, and high-fidelity mockups.

The Finer Details

Application Design, Information Architecture, Navigation Blueprint, User Worflows, Mobile, Layout, Component Style Guide, XD

Live URL

https://www.kineticadvantage.com/

Kinetic Advantage 360 DRM Screens — Kinetic Advantage 360 DRM

https://www.kineticadvantage.com/

Hide Details

Kinetic Advantage 360 DRM

Kinetic Advantage

Click for Details

October 2021

A mobile application allowing Dealer Relationship Managers (DRM) to access relevant information about their assigned clients and that dealer's floorplans financed through Kinetic Advantage. I worked with the business team to establish multiple user flows, a navigational blueprint, wireframes, and high-fidelity mockups. I then consulted with the development team, providing necessary assets and direction throughout multiple iteration cycles.

The Finer Details

Application Design, Information Architecture, Navigation Blueprint, User Worflows, Mobile, Responsive, Layout, Component Style Guide, XD

Live URL

https://www.kineticadvantage.com/

Kinetic Advantage 360 Screen — Kinetic Advantage 360

https://www.kineticadvantage.com/

Hide Details

Kinetic Advantage 360

Kinetic Advantage

Click for Details

April 2021

This is a B2B application that allows for vehicle auctions and dealerships to manage their floorplans financed through Kinetic Advantage. I worked with the business team to establish multiple user flows, a navigational blueprint, wireframes, and high-fidelity mockups for various viewport dimensions. I then consulted with the development team, providing necessary assets and direction throughout multiple iteration cycles.

The Finer Details

Application Design, Information Architecture, Navigation Blueprint, User Worflows, Responsive, Layout, Branding, Component Style Guide, XD, Photoshop, Illustrator, Dimension

Live URL

https://www.kineticadvantage.com/

Health B2B Application Navigational Blueprint — Health B2B Application

Confidential Client

Hide Details

Health B2B Application

Confidential Client

Click for Details

April 2016

Multi-month project to evaluate the client's existing B2B application. I provided an expert review of the existing application detailing usability and heuristic concerns. I then worked with the team to create an updated navigational blueprint, screen wireframes, high-fidelity mock-ups, and a referenceable style guide.

The Finer Details

Application Design, Responsive, Rebrand, Analysis, Information Architecture, Navigation Blueprint, Wireframe, Layout, Style Guide Documentation, Axure, Photoshop, Illustrator, PowerPoint

Live URL

Confidential Client

Fusion Alliance Data Service Direct Mail Piece Front Cover — Data Service Direct Mail Piece

https://fusionalliance.com/captaindata

Hide Details

Data Service Direct Mail Piece

Fusion Alliance

Click for Details

February 2015

Bi-fold direct mail piece detailing the growing importance of data management and Fusion Alliance's Data Service offering. I consulted throughout the initial campaign conceptualization, mocked up multiple variations, acquired and manipulated multiple stock photography assets for the final piece, prepared files for printing, and created a digital flipbook version to be shared online in conjunction with the final mailed piece.

The Finer Details

Print Design, Bi-fold, Message Conceptualization, Layout, Image Composition, Photoshop, Illustrator, InDesign

Live URL

https://fusionalliance.com/captaindata

Energems 2 — Energems (Rebrand)

http://energems.net

Hide Details

Energems (Rebrand)

Energems

Click for Details

March 2013

This second design for Energems.net was based on a multimedia rebrand. The main navigation was revised to include icons, the News & Events page was divided into separate pages, a Store page was added (though was not developed as initially designed) and a call-to-action section was added to the Home page.

The Finer Details

Web Design, Rebrand, Layout, Responsive, Photoshop, Illustrator

Live URL

http://energems.net

myLennar iPad App — myLennar iPad App

https://itunes.apple.com/us/app/mylennar/id585417006

Hide Details

myLennar iPad App

Lennar

Click for Details

December 2012

I assisted in the development of workflows and wireframes before designing all aspects of the application. I delivered structured asset files and consulted with the development team through the creation of the technical requirements.

The Finer Details

Web Design, Layout, Responsive, Photoshop, Illustrator

Live URL

https://itunes.apple.com/us/app/mylennar/id585417006

ChampionsGate by Lennar — ChampionsGate by Lennar

http://new-homes.lennar.com/championsgate/

Hide Details

ChampionsGate by Lennar

Lennar

Click for Details

December 2012

The page for ChampionsGate by Lennar was designed to function as a multiple page site, yet remain one page for the greatest SEO benefit. I utilized a tab navigation system that allowed the user to scroll horizontally through the textual content. The image slideshow was coded to dynamically load specified photos for display.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, jQuery, jQuery Tools, ASP.NET C#

Live URL

http://new-homes.lennar.com/championsgate/

Energems — Energems

See the Rebrand for More Information

Hide Details

Energems

Energems

Click for Details

October 2012

This initial design for Energems.net was based on WordPress wireframe provided by the web site’s developer. Adjustments were made to accommodate specific client requests, including a scrolling slideshow on the Home page, custom post views on the News & Events page and an overall responsive design. I regularly updated both the content and structure of this site.

The Finer Details

Web Design, Rebrand, Layout, Responsive, Photoshop, Illustrator, WordPress, Front-end Development, XHTML, CSS, YouTube

Live URL

See the Rebrand for More Information

Stoneybrook At Venice by Lennar — Stoneybrook At Venice by Lennar

http://lennarstoneybrook.com/

Hide Details

Stoneybrook At Venice by Lennar

Lennar

Click for Details

June 2012

The goal of the LennarStoneybrook.com rebrand was to portray a tranquil setting rich with amenities at an affordable price. This site has many interactive elements, some of which include: Flash presentations and video introductions, modal windows, and dynamic rollover affects. Script was implemented for specific promotion by real estate agents.

The Finer Details

Web Design, Rebrand, Layout, Photoshop, Illustrator, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, jQuery, Colorbox, ASP.NET C#, AgentShield

Live URL

http://lennarstoneybrook.com/

Treviso Bay Naples by Lennar — Treviso Bay Naples by Lennar

http://www.trevisobayvip.com/

Hide Details

Treviso Bay Naples by Lennar

Lennar

Click for Details

April 2012

TrevisoBayVIP.com was rebranded to present Treviso Bay’s array of world-class features and amenities. This site has many interactive elements, some of which include: dynamic image slideshows, section tabs, modal windows, and dynamic rollover affects. Script was also implemented for specific promotion by real estate agents.

The Finer Details

Web Design, Rebrand, Layout, Photoshop, Illustrator, Dreamweaver, Front-end Development, XHTML, CSS, JavaScript, jQuery, bgImageTween, jQuery Tools, Colorbox, ASP.NET C#, AgentShield

Live URL

http://www.trevisobayvip.com/

Lennar New Homes in Southwest Florida Facebook App — Lennar New Homes in Southwest Florida Facebook App

https://www.facebook.com/Lennar.SouthwestFlorida/app_192394540869976

Hide Details

Lennar New Homes in Southwest Florida Facebook App

Lennar

Click for Details

March 2012

This Facebook page was created to provide basic information and links to the available Lennar communities within the Southwest Florida market. The image slideshow was coded to dynamically load specified photos for display.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, ASP.NET C#

Live URL

https://www.facebook.com/Lennar.SouthwestFlorida/app_192394540869976

Fiddler’s Creek by Lennar — Fiddler’s Creek by Lennar

http://new-homes.lennar.com/fiddlerscreek/

Hide Details

Fiddler’s Creek by Lennar

Lennar

Click for Details

February 2012

The design for Fiddler’s Creek by Lennar’s page was based on existing print collateral and was developed to be responsive. The image slideshow was coded to dynamically load specified photos for display on a set interval.

The Finer Details

Web Design, Layout, Responsive, Photoshop, Dreamweaver, Front-end Development, XHTML, CSS, JavaScript, jQuery, bgImageTween, ASP.NET C#

Live URL

http://new-homes.lennar.com/fiddlerscreek/

NextGen by Lennar Market — NextGen by Lennar Market

http://lennarnextgen.com/orlando/

Hide Details

NextGen by Lennar Market

Lennar

Click for Details

January 2012

The market page expands upon the information presented on the NextGen by Lennar main page. I delivered the design assets to another team member and guided the development of the page. I then made updates to the page content and structure as requested.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Front-end Development, XHTML, CSS, JavaScript, ASP.NET C#

Live URL

http://lennarnextgen.com/orlando/

NextGen by Lennar — NextGen by Lennar

http://lennarnextgen.com/

Hide Details

NextGen by Lennar

Lennar

Click for Details

January 2012

The goal of the NextGen by Lennar page was to introduce the concept of “The Home within a Home” and provide links to markets where they are available. The image slideshow was coded to dynamically load specified photos for display on a set interval.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, ASP.NET C#

Live URL

http://lennarnextgen.com/

Project Dream Home by Lennar — Project Dream Home by Lennar

http://new-homes.lennar.com/projectdreamhome/

Hide Details

Project Dream Home by Lennar

Lennar

Click for Details

January 2012

The Project Dream Home site was designed and developed to provide first-time home buyers all the information they would need to start the process of buying a new home. These site includes interactive elements including tabbed video navigation, content refresh, and dynamic rollover affects.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, jQuery, ASP.NET C#, YouTube

Live URL

http://new-homes.lennar.com/projectdreamhome/

The Woodlands by Lennar and Village Builders — The Woodlands by Lennar and Village Builders

http://woodlandslennarvb.com/

Hide Details

The Woodlands by Lennar and Village Builders

Lennar

Click for Details

December 2011

The page for The Woodlands by Lennar and Village Builders was designed to function as a multiple page site, yet remain one page for the greatest SEO benefit. A fixed banner area with a tab navigation system allowed the user to scroll vertically through the sectioned content. The image slideshows were coded to dynamically load specified photos for display.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, jQuery, jQuery Tools, ASP.NET C#

Live URL

http://woodlandslennarvb.com/

Lennar TV — Lennar TV

http://new-homes.lennar.com/youtube/

Hide Details

Lennar TV

Lennar

Click for Details

October 2011

The goal of this project was to present all of Lennar’s YouTube videos within a page that was designed to look and function similar to Lennar.com’s framework. The videos and their information are dynamically loaded into the presentation area as the user clicks through the tabbed menu below it.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Front-end Development, XHTML, CSS, JavaScript, jQuery, JSON, jQuery Tools, YouTube, ASP.NET C#

Live URL

http://new-homes.lennar.com/youtube/

Lennar New Homes in Minnesota — Lennar New Homes in Minnesota

http://new-homes.lennar.com/mnnewcommunities/

Hide Details

Lennar New Homes in Minnesota

Lennar

Click for Details

August 2011

This page was designed for and marketed to first-time home buyers in the Twin Cities, Minnesota area. This page includes a dynamic image slideshow, expandable/collapsible registration form, and a tab navigation to display additional information for each community.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, jQuery, jQuery Tools, ASP.NET C#

Live URL

http://new-homes.lennar.com/mnnewcommunities/

Everything’s Included Homes by Lennar — Everything’s Included Homes by Lennar

http://lennarei.com/Minnesota/

Hide Details

Everything’s Included Homes by Lennar

Lennar

Click for Details

July 2011

This collection of pages (see market list in the footer of the Live URL) was designed and developed as an informative look into the offerings of Everything’s Included Homes by Lennar. These pages include multiple interactive elements including tabbed section navigation, modal windows, and dynamic content tooltips.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Front-end Development, ASP.NET C#, XHTML, CSS, JavaScript, jQuery, jQuery Tools, YouTube, AddThis

Live URL

http://lennarei.com/Minnesota/

Lennar Active Adult 2 — Lennar Active Adult 2

http://lennaractiveadult.com/

Hide Details

Lennar Active Adult 2

Lennar

Click for Details

July 2011

The rebrand of LennarActiveAdult.com brought it closer to Lennar’s Everything’s Included Homes brand. The site layout and functionality remained the same. Regular updates where made to the content and structure as requested.

The Finer Details

Web Design, Rebrand, Photoshop, Illustrator, Dreamweaver, Front-end Development, XHTML, CSS, JavaScript, jQuery, Colorbox, AddThis, zRSSFeed, ASP.NET C#

Live URL

http://lennaractiveadult.com/

Lennar Central Florida — Lennar Central Florida

http://lennarcentralflorida.com/

Hide Details

Lennar Central Florida

Lennar

Click for Details

July 2011

The goal of LennarCentralFlorida.com was to present the multiple communities of two large Florida markets on one vibrant and intuitive site. This site includes multiple interactive elements including dynamic tooltips, content rich modal windows, and dynamic rollover affects.

The Finer Details

Web Design, Layout, Photoshop, Illustrator, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, jQuery, jQuery Tools, YouTube, ASP.NET C#

Live URL

http://lennarcentralflorida.com/

Village Builders — Village Builders

http://www.villagebuilders.com/

Hide Details

Village Builders

Lennar

Click for Details

February 2011

This site was designed and developed to present information on Village Builders and its communities within their established brand. This site includes multiple interactive elements including tabbed section navigation, content rich modal windows, and dynamic rollover affects.

The Finer Details

Web Design, Layout, Photoshop, Illustrator, Dreamweaver, Front-end Development, XHTML, CSS, JavaScript, jQuery, jQuery Tools, ASP.NET C#, Google Calendar

Live URL

http://www.villagebuilders.com/

Lennar Active Adult — Lennar Active Adult

See the Rebrand for More Information

Hide Details

Lennar Active Adult

Lennar

Click for Details

September 2010

LennarActiveAdult.com was developed based on designs delivered from another designer. This site has many dynamic aspects including a custom Flash presentation, text resize option, menu accordion, and a modal window.

The Finer Details

Web Design, Photoshop, Illustrator, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, jQuery, Colorbox, AddThis, zRSSFeed, ASP.NET C#

Live URL

See the Rebrand for More Information

Greenbriar New Jersey by Lennar — Greenbriar New Jersey by Lennar

http://greenbriarnj.com/

Hide Details

Greenbriar New Jersey by Lennar

Lennar

Click for Details

May 2010

The purpose of GreenbriarNJ.com was to present the three 55+ Lennar communities under one umbrella site. This site has many dynamic aspects, some of which include: a video introduction embedded into a Flash image slideshow, text resize option, section tabs, and modal windows.

The Finer Details

Web Design, Layout, Photoshop, Dreamweaver, Flash, AS2, Front-end Development, XHTML, CSS, JavaScript, jQuery, SimpleModal, jQuery Tools, ASP.NET C#

Live URL

http://greenbriarnj.com/

Heritage Todd Creek by Lennar — Heritage Todd Creek by Lennar

http://heritagetoddcreeklifestyle.com/

Hide Details

Heritage Todd Creek by Lennar

Lennar

Click for Details

October 2009

I developed the site map, wireframe and designed the overall template and page content of this site before delivering the assets to another team member for development. I regularly updated both the content and structure of this site.

The Finer Details

Web Design, Layout, Photoshop, Illustrator, Dreamweaver, Front-end Development, XHTML, XML, CSS, Google Calendar, Google Map

Live URL

http://heritagetoddcreeklifestyle.com/