Michael Kopala: Web Designer

Hello, my name’s Mike - Thank you for visiting my portfolio! I’m a Designer in the Chicagoland area with a combined 10 years experience in Web and UI/UX Design.

Please take a look at some of my work in UI/UX Design and Web Design, and my resume.

Download Resume PDF
That's me

Resume (Sketch, 2017)

A brief one page resume created using Sketch for mac. For a more detailed look at my background, please scroll down to the Resume section of this site

Michael Kopala UX Resume

Business Credit Application Form (Sketch, 2017)

This is a brief one page form to be either filled in as a pdf, or printed out and completed in pen

Business Credit Application Form

UI/UX Design

Work Order Tablet App (Balsamiq, 2016)

This work order app was designed to show an employee the sequences of steps necessary to produce the required products after a work order number has been scanned. This version of the app would run on a tablet and coincide with a manager desktop app that provided the ability to edit the sequence steps and leave notes for the employee tasked with fulfilling the order. The core of the app is essentially two checklists, one of the various sequences of steps, and another of the steps themselves within the sequence. The steps section is where the employee would see notes left by a manager as well as post their own, open PDF documents with instructions, and see if a step has been already completed by another employee.

During the design process this app went through several iterations before going into development. Below are the final and first versions of the design. One of the biggest changes throughout this process was working out who could add notes, and how they would be viewed or added.

(1/6) Scan Work Order Number

Knit-Rite 1 of 6

(2/6) Enter Work Station

Knit-Rite 2 of 6

(3/6) Squence Steps

Knit-Rite 3 of 6

(4/6) Enter a New Note

Knit-Rite 4 of 6

(5/6) Added Note by Employee

Knit-Rite 5 of 6

(6/6) Open PDF Instructions

Knit-Rite 6 of 6

(1/7) Scan Work Order Number

Knit-Rite 1 of 7

(2/7) Sequence Steps

Knit-Rite 2 of 7

(3/7) Open PDF Instructions

Knit-Rite 3 of 7

(4/7) Step Notes Modal

Knit-Rite 4 of 7

(5/7) Edit Existing Step Note

Knit-Rite 5 of 7

(6/7) Add New Step Note

Knit-Rite 6 of 7

(7/7) Step Notes Updated

Knit-Rite 7 of 7

Inventory Mobile App (Balsamiq, 2016)

This app was designed for a lumber company as part of a larger project. The requirements were for a manager to be able to review up-to-date inventories and production across several mills on a mobile device. These wireframes depict the app being launched from within the Valence Portal, a larger suite of business tools. The wireframes demonstrate how the app user can navigate between the different sections using the bottom nav bar, and than swipe right or left to see summaries of the various locations.

Inventory Mobile App

Responsive Portfolio Redesign Concept (Sketch, 2017)

I created this mockup of a potential UX portfolio design to become more skilled with Sketch. This personal project was an unequivocal success for me. I reached a proficient skill level with Sketch, and explored ideas for an eye catching UX portfolio site.

Click screenshot to veiw entire site

Portfolio Redesign Concept Landing
Portfolio Redesign Concept Landing
Portfolio Redesign Concept Landing

Social Media Manager App (Photoshop, 2016)

The social media manager app was designed to run within an existing business management web browser based portal. The app would provide an easy way for a company to review and coordinate their social media pressence. Similar stand alone tools may be more robust, but this management app would run within a larger portal, along side many other essential business management apps, adding a degree of convenience while being less complex.

Landing Screen

Social Media 1 of 4

This is the Social Media Manager App landing screen. In the main left panel all the company's social media are listed in the grid with some key info such as date-time and platform. The right hand column is in an empty state because no posts have been selected yet.

Post Details

Social Media 2 of 4

Once one or more posts have been selected from the main table. The details of the post can be seen in the right panel. These posts could then be edited directly in the panel making use of the various dev tools.

Filter Social Media Platforms

Social Media 3 of 4

The types of posts populating the main table can be filtered by social media platform using a drop down in the top app bar.

Main Panel is Filtered

Social Media 4 of 4

Here is the table filtered to show only Facebook posts, with none selected.

Web Design

This is a small sample of some of the web design work I have done.,
Click the thumbnail screenshots for more details!

Frontier Desktop App 2015 Frontier
Rex Lumber Dashboard & Mobile App 2016 Rex Lumber
Iroquios Gas Sales mockups 2016 Iroquios Gas
Russell Investments Mobile App 2014 Russell Indexes
Northern Trust Mobile App 2014 Northern Trust
LPL Financial Mobile & Tablet Concepts 2014 LPL Financial
CBS Moneywatch Quotes/Charts/News Section 2013 CBS Moneywatch
CargillAG HTML/CSS Templates 2012 CargillAG
USA Today - Money HTML/CSS Templates 2012 USA Today - Money
CrowdClear HTML/CSS Dev 2013 CrowdClear
Evergreen Door & Window Redesign 2012 Evergreen Door & Window
CareerFuel Updates 2012 CareerFuel
CanaccordSales Mockups & Templates 2011 Canaccord
Spring Wellness Center New Site 2011 Spring Wellness Center
USAA Screener Tool Design 2012 USAA

Resume

Professional Experience

UI/UX Designer

April 2015 - January 2017: CNX Corp, Chicago, IL

Primary Responsibilities:
  • CNX Valence 5.0 Redesign
    • Redesign of business management portal
    • Served a central role working alongside CNX development team
    • Utilized Google Material Design language
  • Professional Services
    • Created high-fidelity Photoshop mockups
    • Went through many iterations of wireframes
    • Graphic design work based on client style guides
    • Provided Front-End Development support with HTML, CSS/Sass and Ext.js
  • Marketing: Supported CNX marketing initiatives with graphic design work
  • Sales: Provided sales mockups demonstrating what CNX Corp can do for potential clients
  • Video Editing: Edited CNX tutorial and product support videos
Web Designer

January 2007 - January 2015: Interactive Data Managed Solutions (IDMS), Chicago, IL

Projects:
  • Russell Investments
    • Created “Pixel Perfect” HTML/CSS templates for iPhone app based on client provided mockups
    • Used JQuery Mobile and various plugins to achieve desired functionality
    • Worked with a geographically diverse development team to resolve all bugs throughout project
  • CBS News Moneywatch
    • Designed HTML/CSS templates for content appearing on both desktop and mobile sites
    • Implemented content under a tight deadline
  • Nationwide Insurance
    • Designed Photoshop mockups for client to approve
    • Created the HTML/CSS responsive templates from mockups
    • Knowledge of Responsive Web Design (RWD) was necessary to make this project a success
    • Worked closely with the Nationwide designer to ensure the Markets section would fit well with the Nationwide brand
  • USA Today
    • IDMS Content Redesign
    • Followed the USA Today style guide to redesign content
    • Created HTML/CSS templates based off style guide
  • Wells Fargo
    • Brought IDMS content into Americans with Disabilities Act (ADA) compliance
    • Worked with an Accessibility expert at Wells Fargo to make content easy to use via a screen reader
    • Implemented Accessibility best practices to HTML markup and CSS
  • USAA
    • Designed Mutual Fund, Stock and ETF Screeners
    • Provided iterations of Photoshop mockups to the IDMS team to be critiqued
    • Created HTML/CSS templates from Photoshop mockups
    • The screener tools that emerged would become the standard for future projects
  • J.P. Morgan Chase
    • Created HTML/CSS templates for J.P. Morgan “Private Bank” website
    • Accessibility and ADA Compliance was a high priority while developing the templates
  • CargillAG.com
    • Created HTML/CSS based on client provided mockups for the IDMS content
    • Designed an additional mobile site with “Local Bids” tool
  • Canaccord
    • Created both sales mockups and templates of IDMS market content
Intern/Office Assistant

May 2005 – June 2006: Electronic Knowledge Interchange (EKI), Chicago, IL

  • Assist in company bookkeeping
  • Help IT department troubleshoot office equipment
  • Assist sister company, Killerspin, with graphic design for e-commerce website

Freelance Design Work

  • Spring Wellness Center: Created new site for client with a modern and professional design
  • Evergreen Door & Window: Improved the look of the existing site and enhanced the navigation and usability
  • CrowdClear: Provided HTML and CSS Development with the use of Twitter bootstrap framework, CSS3, and the creative use of background images

Web Design Skills

  • Photoshop & Illustrator mockups
  • Mobile app/website design
  • CSS3, SASS & HTML5
  • Accessibility & ADA compliance
  • Graphic Design
  • Flash Animation presentations
  • Working knowledge of jQuery & jQuery Mobile
  • Twitter Bootstrap
  • Working knowledge of Sencha Ext.js

Software Abilities

  • Proficient in Sketch & Balsamiq
  • Adobe Creative Suite CS6
  • Microsoft Office
  • Macintosh OSX & Windows
  • Internet Applications & E-mail
  • WebStrom
  • Final Cut Pro
  • Axure RP

Education

DePaul University, Chicago, Illinois
2001-2006
Bachelor of Science in Computer Graphics and Animation (Designer)

Volunteer Work

Animal Care League, Oak Park, Illinois
May 2016 - Present
Volunteer dog walker/handler
Support for shelter events

© Michael Kopala 2017