UX Design Portfolio Joel Heaton

Transactional Flow 1

This is a very involved transactional flow. I like to work big and look at the entire section of a site when I collaborate with my dev teams. It allows us to see it all.


This is a first draft of a section of a site I am working on. Its is and angular framework with bootstrap styling based on a Style Guide.

Document Storage

This is a section which calls up documents. This Angular page with bootstrap styling calls up historical documents for the user.

Style Guide

These are alert messaging styles that have been implemented in the site. I developed an online site that houses all the bootstrap styles that are implemented on this clients site. The developer can easily bring up the styles, icons, tootips, colors, typography, buttons, modals and other elements and components to maintain consistency site wide. It also helps for creating prototypes easily for mock purposes.

UX Process Flow

A process flow indicates the steps or process in large iteration development. This one was based on a Jira/Agile team I have assisted for the last year.


Storyboards can be helpful when developing for UX. It can be considered a timeline for the project and aids in the scope of the project. Whenever I animate I create the images or scenes at a simple sketch level. Certain scenes morph from there. I use these in UX as well.


Personas are important in many UX Design scenarios. A persona is a ficticious character based on real clients or users of a given site or application. Although they can be based on real people they usually mimic standard categories of clients or users. They help in the UX Design process to understand that all users do not interact the same way nor do they have the same needs as other users. In the early stages of UX Design it is helpful understand the personas and integrate their needs and processes into the application. Many times discoveries can be made by analyzing personas.

User Pathways

User pathways are important to understand and help creating clarity with how a user will interact with a given site. This one is connected to the personas so that each user has a specific reason and need for interacting with the application. It is integral to understand these pathways so that flaws and glitches are not present in the experience.


Wireframes such as these are helpful when overseeing details, user needs and representing the different features or screens a user may click through. This balsamiq wireframe was for work I did with a client. I was asked to flush out the user pathway in the profile section of the website. In this case it was used in a discussion with the client. I mostly use Adobe InDesign, Photoshop and Illustrator but have also played with Omnigraffle, Visio, Axure and Balsamiq.

User Pathway

Sometimes a user pathway such as this one can be used to comprehend the applications use and experience in a different way. This could also be used in for marketing purposes, a manual or technical guide. I created the illustration to compliment other guidance documents to clarify the product and its use.

Api Diagram

This diagram details the api needs in a particular app. It clearly integrates the user and all the facets of the api data that can be used.

Layered .psd

A .psd file open in Photoshop showing how I like to organize my layers and folders for my developers. Once a .psd file is ready it is passed along to a programmer who "slices" the file up within Photoshop and codes the site out. Every element is adressed in terms of file size, placement and the guidelines the designer has specified. The designer and programmer work as a team to test the site on different devices, browsers and emulators to make sure it works in all platforms needed.

Notes to Programmer

This file is compiled from a few layered psd files. It is compiled in InDesign showing the desktop, mobile(portrait and landscape) views which are some of the important views and layouts for the website. In this situation I made a home page for the desktop, mobile and tablet and then really defined them to my programmer. Since the site can change drastically going from desktop to mobile it is important to design around this from the beiginning. Most mobile and many tablet sites are simplified versions of the desktop site. With this project my programmer nailed it on the head and the end result was very close to what I had envisioned. There is always a need to take notes and create documents for UX design guidance. Even if as a designer you are the only one who sees the information.

Features and Functionality

Creating a list of features and functionality and how all aspects will be programmed is an important piece in a UX support document. I also like to add in a development timeline which aids in clarifying for the team which aspects and programming are more challenging or keeping on task to add certain functionality into the application down the road in subsequent versions.


This file demonstrates the prototype screens within an application and what a user will see from screen to screen. They are helpful when pitching an idea to a client. They are probably closer to programming at this stage because they are so well developed well beyond that of wireframes.