Successful design
takes into account
more than just aesthetics ...

It's the whole
experience!

Graphic Design

I specialize in both print and digital design with a special interest in branding, website design, typography and iconography.

Coming from many years of formal education and work experience with print foundries and physical print media, I put my understanding of the now-antiquated Press Design Principals (ex: leading, kerning, registry, bleed, color-sep, etc.) to use in the digital realm.

Check out some of the work I've done on Instagram.

Web Design & Development

As a web designer, with skill both on and behind the page, I create, render and code the aesthetics and functionality of a website completely from scratch; using as few plugins, grids, boilerplates or other third-party functions as possible.

This gives me the opportunity to customize elements as I see fit without fear of copyright claims, it reduces problems understanding previous spaghetti code, promotes the use of logical naming conventions (I like to use a hybrid of BEM and a version of Tailwind). I also like to make sure I'm using W3C valid markup and SEO best practices, which helps propel SEO rankings and make screen-readers more effective.

UX Design

From research to, wireframing, to mockup, to prototype, and to the final product -- I take into account all the different users' abilities and their intentions as well as the intent(s) of the website or app.

I design intuitive, inclusive, flexible and user-friendly environments that are a pleasure to interface with by first embarking on a pre-dev discovery of the product/service in question, then running through a gamut of exercises (ex: target audience/user behavior, competitive analysis, user personas, user scenario/journey, flowcharts and system models).

Marketing & SEO

I obtain user-data and develop strategies for marketing campaigns that directly complement the website, print materials, or other marketing peripherals.

Building websites from the bottom up, allows me to enlist SEO best practices (ex: semantic and intuitively structured HTML elements, 'alt/title' tags, ARIA properties, H1-H6 hierarchy, links/backlinks, and optimized images/partials/includes).

UX

UX/UI Design

From research to, wireframing, to mockup, to prototype, to final product -- I take into account all the different users' abilities and their intentions as well as the intent(s) of the website, app or project.

I design intuitive, flexible and user-friendly environments that are a pleasure to interface with by first embarking on a pre-dev discovery of the product/service in question, then running through a gamut of exercises (ex: target audience/user behavior, competitive analysis, user personas, user scenario/journey, flowcharts and system models).

How do you know you're on the right track, if you don't ask?

4 main stages of UX Research:

  • Discovery
  • Exploration
  • Testing
  • Listening
eXs

Experience Strategy

A concrete eXs ensures that everyone on the product team is moving towards solving the right problems and helping their users reach their goals.

Everyone rowing in the right direction!

Some other major benefits are:

  • It gets executives onboard.
  • It aligns business goals, user needs, and technological capabilities.
  • It gives clear metrics of success.
  • It creates a user-first mentality.
  • It connects all touchpoints.
IA

Information Architecture

IA is the organizing and structuring of the system's content so users can easily find information and complete desired tasks/functions.

Intuitively getting from A to B to C to...and back.

A well-planned IA is sure to increase efficiency by reducing potential usability and navigation (system flow) problems.

IxD

Interaction Design

A focus on all the elements and assets the user interacts with, such as animations, buttons and typography, from an Atomic and scalable perspective.

Allows teams to reuse, repurpose, or move components as the UI dictates.

The Atomic Design Methodology:

  • Atoms - UI elements at their most basic level.
  • Molecules - simple UI components made up of Atoms.
  • Organisms - complex UI components made up of Atoms and Molecules.
  • Templates - Atoms, Molecules and Organisms laid out in the design's structure.
  • Pages - final iteration with content specific instances of Templates.

FitFare

GUI/UX App Design

project intro image

Project Overview

The main goal was to create something incredibly simple that allowed for flexibility and customization. The User inputs their personal information as well as likes, dislikes, allergies, dietary goals, and from that information, a list of meals are suggested.

There's also a supply and shipping management component -- allowing users to reuse food containers and easily schedule delivery, pick-ups and drop-offs.

Toolkit

  • Experience Design

    I create wireframes, site/app components, system design packages, webscreens, (interactive) prototypes, animations and video showcases with Adobe Experience Design.

  • Illustrator

    I create almost all system design assets, all SVG elements, and entire brand identity with Adobe Illustrator.

  • Photoshop

    I render mockups, hi-res raster graphics and presentational materials with Adobe Photoshop.

  • Visual Studio Code

    I write completely custom HTML, CSS/SASS, JS, RegEx, PHP and some dabbling in React and Angular frameworks, using Microsoft Visual Studio as my IDE.

  • Whimsical

    I share all my flows, diagrams and wireframes, with my team, stakeholders and clients over the Whimsical.com all-in-one collaboration hub.

Analyze &
Research

I define the problem(s) the app is looking to solve, based on the client's Project Brief and by conducting a series of interviews, surveys and competitive analysis/research.

I then gather up all my notes and data, and sort it into an Affinity Diagram.

Next, based on the data and the Users' needs and wants, I sketch out a basic System Model.

Interview Questions

project step2

Affinity Diagram/Cards

project step2

User Journey

I create different User Personas, ranging in likes, proficiencies and other important characteristics I use to empathize with the User.

I run through the main touchpoints of the app; spotlighting the potentential painpoints and hurdles along the journey, outlined in the User Scenarios script.

For this design, I specifically targeted the Login Screen, User Profile, Meal Selection and Checkout points.

User Personas

project step1

User Journey

UI Design

With all that information collected and sorted, I can begin designing the User Flow Diagram and overall User Interface through a series of low-fidelity Basic Wireframes.

Now that I have a high-level look at how the user interacts with our model, I can iterate through different screens/wireframes.

User Flow Chart

project step3

Wireframes

After scutinizing over the User's Journey and throwing as many variables and alternate navigation routes (not just the ideal path) at it, I'll iterate through each milestone screen, as well as, the subsequent screens and how they're interacted with.

I like to include a short and brief narrative of the user's journey and intentions, so the development team is all that much more comfortable with the functionality.

Prototype

Lastly comes the fun part!
After myself, the team, some Users and the Stakeholders have thrown in their 2-cents and approved the proposed flow of the interface, I can put my graphical touches on it and present it as hi-fidelity mockups and even a demo video to be pitched.

Interactive prototypes and static mockups are handed off to the development team and used as blue prints to bring it to life.

Hi-fi Mockups

Spotless VIP Cleaning

G/UI/UX - PWA Design

project intro image

Project Overview

The goal here was to create a process for the customer to submit a request for a residential cleaning service and have the business schedule said request with no need for further confirmation or information. It was critical that we gather all pertinent information, from the client, in order to respond with the most accurate estimate as possible.

Prior to this, the client would have to rely on phone calls, to ensure all the important information was shared before providing an accurate estimate on duration, difficulty, frequency, cost and tools required for the cleaning service.

This project had to pivot from a stand-alone application, to a web form design, due to budgetary complications.

All the information gathered during R&D was still absolutely relevant.

Toolkit

  • Experience Design

    I create wireframes, site/app components, system design packages, webscreens, (interactive) prototypes, animations and video showcases with Adobe Experience Design.

  • Illustrator

    I create almost all system design assets, all SVG elements, and entire brand identity with Adobe Illustrator.

  • Visual Studio Code

    I write completely custom HTML, CSS/SASS, JS, RegEx, PHP and some dabbling in React and Angular frameworks, using Microsoft Visual Studio as my IDE.

  • Whimsical

    I share all my flows, diagrams and wireframes, with my team, stakeholders and clients over the Whimsical.com all-in-one collaboration hub.

  • Typeform Survey

    I conduct customer and client surveys to gather crucial information that help inform the User Journey and the overall User Experience, with Typeform.com, for surveying and link-sharing

Analyze/Research

When a project involves a B2C (Business To Customer) service, I like to look at it from an "Ins n' Outs" perspective; the inputs given by the user, and the outputs required by the business.

My interview questions are posed to both sides and Affinity card sorting reflects both perspectives.

System Diagram

project step2

User Personas & Journey Card Sort

I like to go through the User's Journey and sort the cards by actions taken at all the major touchpoints througout the journey; through the eyes each of the Personas created.

I then sort the cards by:

  • Obligatory Steps (madatory actions or processes)
  • Painpoints (actions or influences causing User grief/hangups)
  • Opportunities (ideas or "nice-to-haves" not necessarily pertinent to that particular touchpoint

User Personas

project step1 project step1

User Journey

UI Design

With all that information collected and sorted, I can begin designing the User Flow Chart and general User Interface through a series of low-fidelity Basic Wireframes.

Now that I have a high-level look at how the user interacts with our model, I can iterate through different screens/wireframes.

User Flow Chart

project step3

Wireframes

After scutinizing over the User's Journey -- card sort and throwing as many variables and alternate navigation routes (not just the ideal path) at it, I'll iterate through each milestone screen, as well as, the subsequent screens and how they're interacted with.

I like to include a short and brief narrative of the user's journey and intentions, so the development team is all that much more comfortable with the functionality.

User/Customer View

project step3

Staff/Admin View

project step3

Prototype

Lastly comes the fun part!
After myself, the team, some Users and the Stakeholders have thrown in their 2-cents and approved the proposed flow of the interface, I can put my graphical touches on it and present it as hi-fidelity mockups and even a demo video to be pitched.

Interactive prototypes and static mockups are handed off to the development team and used as blue prints to bring it to life.

Hi-fi Mockups (customer)

Hi-fi Mockups (staff/admin)

OutTheBox

GUI/UX/Web Design/Branding

project intro image

Project Overview

This project had to provide the ability for clients of OTB to launch a "support ticket" and request assistance (notified via SMS), as well as, integrate React eCommerce.

Toolkit

  • Experience Design

  • Illustrator

  • Photoshop

  • React

  • Firebase

  • Visual Studio Code

Systics

GUI/UX/Web Design/Branding

View Details
project intro image

Project Overview

This client required a website that would serve as an advertisement for their business, a place to obtain information (via a blog) as well as, be the main hub and login mechanism for Systic's employees to reach their company's newsfeed and important work-related communications (via intranet).

A simple blog was created with the Storyblok API in a React project structure.
The newsfeed and communication line is essentially a link to a Bitrix intranet workspace.

Toolkit

  • Illustrator

  • Photoshop

  • Experience Design

  • React

  • Storyblok

  • Visual Studio Code

  • Whimsical

Special Forces Pension Plan

GUI/UX/Web Design

project intro image

Project Overview

Alberta Pension Services required a completely custom designed (frontend/backend) CMS for the handling of secure financial data, while presenting important information and how-tos to the public, via infographics and interface design work.

Their services branched over 4 sectors that each required its own interface. I led the design and development for Special Forces and Local Authorities.

Visit Site

Toolkit

  • Angular

  • Miro

  • Illustrator

  • Photoshop

  • Visual Studio Code

  • Git

  • Node Package Manager

Branding & Identity

Using my graphic design skills, I specialize in creating logos for brands and businesses.
I use all sorts of techniques and know-how to represent the heart and soul of the brand in a precise, printer-friendly, legible and timeless design.

Websites & GUI

I design Graphical User Interfaces for a multitude of different devices and mediums; from websites, to native applications, to web apps. Each consisting of a Style Guide, Design Tokens/Assets, User Flows/Journeys, Pattern Library and anything to help communicate the design to the rest of the team.

About

I love design! All aspects of design.

From the inception of a concept, to the development and its iterations, all the way to the final result and the satisfaction it brings.

I've worked with big global software firms, to small print shops and collaborated with many diverse interdisciplinary teams.

Along the way, I build relationships with both designers and stakeholders to ensure best design and development practices are met.

I approach my design work with a focus on people and system efficiency; empathizing with the users of the products and services I help bring to life.

My life is composed of many highly-unique experiences that allow me to appreciate all kinds of different abilities and perspectives.

I incorporate that degree of empathy and inclusiveness into all my UX/UI designs.

- Justin Ward

Contact

If you have any questions, concerns or want to contact me regarding a project or job, please do so by filling out this contact form.

Feel free to browse or contact me through any of these other online social media and sharing communities.

If you've been given the password, please download my resumė...if that sorta thing interests you.


You can also fill out my Design Form to help get started on your project.

Enter password to view/download resumé.



Design Form

Look and Feel of Design

Minimal Complex
Modern Classic
Playful Serious
Loud Subtle
Luxury Moderate