Menu  

jpost-design

Sr. UI / UX
Designer & Developer

By Jason Post
jpost design logo

Hi, I'm Jason Post. Welcome to my site!

headshot profile of Jason Post

I create designs and program code that drives results. A true mix of technical left-brain with creative right-brain. Effectively communicating the technical and creative needs, why's, and how's.

Suffering pains of bridging engineering and marketing communication?

I solve that!

With my dual background, I understand communication challenges and provide solutions. Leading effective agile sprints, informing decisions with quantitative and qualitative testing (analytics, usability, interviews, A/B testing).

Designing with fluent art and design skills (layout, color theory, grids, typography, branding, identity) PLUS speaking and scripting fluent front-end (HTML, CSS, JavaScript, jQuery).

I'm unique in that I wireframe design patterns, create in Photoshop and Illustrator, code jQuery / JavaScript, write semantic HTML, and run analytics.

Inspired by the Bauhaus School of form following function, and De Stijl Movement of reducing to the essentials of form and color, I draw upon a solid art and design foundation to inform my product design decisions.

You could say I'm a unicorn. But personally I prefer the platypus.

( These are hand-crafted SVG's with PNG fall-back btw )

beaver plus
duck equals
platypus

Connect with me on LinkedIn

Find me at https://linkedin.com/in/jpostdesign

Quick Summary:

  • UI / UX
  • User-Centered Design
  • Usability Testing
  • Prototyping
  • Wire-framing
  • SEO
  • XHTML / HTML / HTML5
  • CSS / CSS3
  • JavaScript / jQuery
  • Responsive-Design
  • Pixel-Perfect Imagery
  • Adobe CS / Adobe CC
  • Photoshop
  • Illustrator
  • Salesforce
  • Cloud Computing
  • CMS
  • WordPress
  • Drupal
  • Google Analytics
  • Git Version Control / GitHub
  • Twitter Bootstrap
  • Salesforce Lightning Design System

Notable Accomplishments:

  • High achiever delivering results.
    • Magna Cum Laude
    • Associates' of Science Valedictorian
    • Bachelors' of Arts Outstanding Electronics Student
  • Creating a dynamic, interactive map of 70-plus farmers' market. Interactive example in portfolio section. Utilizing PHP, MySQL, and JavaScript Google Maps API - Integrating seasonal dates, times, geolocation directions, and social media links
  • Rocketing mobile redirect from 26% to 100%, based on Google Analytics traffic funnels
  • Prototyping a responsive redesign of America's largest farmers' markets association website, containing over 1,000 dynamic PHP pages
  • Record-setting 833% organic increase (no ads) from 54 to 504 Facebook Page Likes in a single year through social media management and engagement
  • Increasing house/retention list by 22,000 clients with dynamic vs static processes
  • Increasing sales team's "Contact Us" page views by 100% creating a 235% increase in revenue

Experience and Examples

UI / UX Design and Development

  • Responsive Sites
  • Apps
  • Wire-frames and Prototypes
Explore Design and Dev

Environmental UI / UX

  • Environment Design
  • Art Gallery Management
  • Physical Walk-throughs and Paths
Explore Environmental

Analytics and Testing

  • Social Media Management
  • Facebook Insights
  • Google Analytics
  • A/B Testing
Explore Analytics

Multimedia Visual Design

  • Motion Graphics
  • Graphic Design
  • Screen Printing
  • Illustration
  • Branding and Identity
Explore Multimedia

Hi there! Nice to see you didn't skip ahead :)

Or you came back?

Anyways, you deserve a freebie

Free Facebook
Guidelines PDF

Single page PDF I authored as a starting point to increase engagement and fan base.

My Work

UI / UX Design and Development

User Journey Map

See Full Resolution in New Window

Utilizing myBalsamiq to illustrate the email sign-up process for UC Berkeley Center for Executive Education. Employing user journey maps for illuminating multiple pain points and drop-offs. Discovering previously unknown pitfalls and challenges in the newsletter sign-up process.

  • Usability Research
  • Balsamiq
  • Expert UX Testing

Responsive Multi Use Template Process

Leading the UX design of the AAA Northen California responsive design website overhaul, I analyzed major breakpoints and formulated multi-use templates to be used in a Drupal based CMS.

Templates were created in Balsamiq, then output to multi-page Adobe PDF's for easy shareability for feedback.

As part of my process, I'd also create fully responsive prototypes using frameworks like Bootstrap or Zurb Foundation, to showcase real HTML and CSS for demos, feedback, and reference for QA.

Adding comments in the final PDF's for annotating framework components, HTML elements, and CSS classes, I'd deliver to engineering the template assets and documentation, and we built the templates following mobile-first UX design patterns, and responsive design best practices.

  • Lead Designer
  • Wire-frames
  • PDF comment annotations
  • Visual Design
  • Rapid Responsive Prototypes
  • Layout
  • HTML 5
  • CSS 3

Article Template Whiteboarding 01 - Ideation

Article Template Whiteboarding 02 - Expanding Use Cases

Article Template Whiteboarding 03 - Labeling

Template PDF with Annotations

See the full annotated PDF in a new window. Depending on browser and reader, you may have to download file to view "comments" for HTML and CSS annotations.

Responsive Prototype

See the full prototype in HTML and CSS based on Zurb Foundation

Developed Desktop Template

AAA Online Garage Wireframe and User Flow

Leading the wireframe, and user flow planning for AAA Northern California's new feature Online Garage. Identified in business requirements 3 possible user groups, and designed the most efficient flow to account for all 3 groups. Here is an overview covering all flows, and below are flows for registered AAA members, and non AAA members.

  • Balsamiq
  • InVision
  • Illustrator
  • Presentation to Stakeholders

Online Garage Wireframe and User Flow for Registered AAA Members

Wireframe and User Flow for Non AAA Members

Vlocity - Sprint Customer Service Dashboard

Heading UX design and development of Vlocity sales division, I created fully developed demos to pitch to customers. Designing and building unique, on-brand, user centric CRM dashboards built on the Vlocity, and Salesforce tech stack.

  • 50% UI / UX Design
  • 50% Front End Development
  • Responsive Design
  • Illustrator Icons
  • Photoshop Images
  • HTML5 CSS3
  • AngularJS
  • Bootstrap
  • Salesforce
  • VisualForce

Case Study: Rapid Prototyping for Power of Youth for BAY-Peace

BAY-Peace took down the micro-site but I host a copy at http://jpost-design.com/BAVC_microsite/

I lead a team to design and develop a micro-site for the non-profit BAY-Peace. Initial goals were to showcase a motion graphic video with accompanying article in a modern, responsive, mobile-first way. Final, developed goals were to also include social sharing, a call to action to get involved, and give it an app-like feel through jQuery transitions.

In the prototyping process, I pioneered a No-PSD method using the new Adobe Edge Reflow program to rapidly create responsive prototypes. Through this method, we quickly jumped into developing right in the browser, and skipped the time-consuming task of iterations on iterations of flat PSD mock-ups to simulate different screen sizes.

  • Lead Developer
  • Wire-frames
  • Rapid Prototype
  • Visual Design
  • Layout
  • Typography
  • HTML 5
  • CSS 3
  • jQuery

First Prototype

Asymmetrical layout inspired by iPad magazine apps.

Test responsive example. Shrink and expand browser window to see responsive breakpoints and liquid layout to reflow.

Second Prototype

Centered layout with conventional design pattern.

Test responsive example

Final Page

Responsive HTML5 with jQuery transitions, PHP form, responsive YouTube.

Final micro-site was on BAY-Peace site but was taken offline. I have a hosted copy at http://jpost-design.com/BAVC_microsite/

Design/Development Interactive, Dynamic Google Map with JavaScript, HTML, PHP, and MySQL - Live Example Below

Utilizing PHP and MySQL to create a dynamic array of JavaScript objects into Google Maps APIv3. Dynamically pulling criteria such as market name, season, time, location, and social media links, then appending to JavaScript to be displayed in an HTML info window. Additional logic included selecting markets by zip code, season, day of the week, available produce, and market producers.

  • Design and Development
  • Icon Design
  • Typography
  • Usability Testing
  • Programming
  • PHP
  • MySQL
  • JavaScript
  • HTML
  • CSS

Live Example: Interactive Google Map

Today's Simulated Date: March 28

open market icon - Open Market

closed market icon - Closed Market

Upgrading from the Google Maps APIv2 to APIv3, I created an interactive map for PCFMA. Implemented PHP and MySQL to create a dynamic array of JavaScript objects containing all the data. This example is hard-coded in JavaScript with an assumed current date in March to show the open and closed season examples.

  • Dynamic PHP/MySQL Queries
  • Database Management
  • PHP
  • MySQL
  • JavaScript
  • Google Maps APIv3

Pure PHP and JS
Code Samples on GitHub

Responsive Wireframe Design Iterations

Spearheading an initiative to transform the static, tables-based layout of the largest farmers' market association in the US, into a brand new responsive layout. With over 1,500 pages, the PHP based pcfma.com site presented many challenges. My solution was to create a mobile-first responsive site, distilling hundreds of pages into reusable layouts, elminitating the need for a separate mobile site.

  • User Research
  • Google Analytics
  • Taxonomy
  • Site Architecture
  • Site Audit
  • Wire-frames
  • Balsamiq
  • Illustrator
  • Photoshop

Mobile Screen Size Analytics

Analyzing visitors' most popular screen sizes through Google Analytics, three main breakpoints were determined. A 320px width targeting mobile phones, 700px width targeting tablets in portrait mode, and 900px width for tablets in portrait mode and all other desktop screens.

Wireframe Template in Balsamiq

Rapid wire-framing creating in Balsamiq to display the typical "above the fold" point of focus. (Not the entire possible screen, just the top 480px area of focus.)

Balsamiq Wireframe Version A

Balsamiq Wireframe Version B

Balsamiq Wireframe Version C

Balsamiq Wireframe Version D

Pixel Perfect PSD to HTML Conversion

Interactive example at http://jpost-design.com/psd-to-html/

Applying new CSS export and asset generator in Photoshop (not the old slice/dice HTML tables tool), converting PSD's to pixel perfect HTML is easier than ever. This was for a technical exercise for Intercom, with pixel-perfect a top priority, with no need for cross-browser support, only the current version of Chrome or Safari for OSX.

My Process: Converted into HTML5 and CSS3, exporting PSD assets into CSS and images, with modern semantic tags like article and footer, and modern effects like rounded corners and subtle drop shadows, following the PSD template. Based off the HTML5 Initializr template, it has the bonus of good backwards compatibility with older browsers as well. I customized some font weights and letter spacing to most closely match the PSD.

It will display best on OSX systems, because the original PSD specified Helvetica Neue, which is a standard font in the system. For PC's (which don't have Helvetica Neue as a standard system font) and also in case of font corruption, I also made a CSS font fall-back to Helvetica, Arial, sans-serif.

  • HTML 5
  • CSS 3
  • SEO Semantic Markup
  • Photoshop PSD to HTML

Utopia iPad Magazine Article

Given video, article copy, and links, created a concise article for an iPad magazine app.

  • InDesign
  • Adobe Digital Publishing Suite (DPS)
  • Icon Design
  • Typography
  • Layout and Grid
  • After Effects

Proof of Concept jQuery Chat - Try It Yourself

Tech exercise for Monitise. Rough functional prototype to demonstrate improved chat user experience.

Goals: Improve UX, Give customer feedback that agent is replying, Smooth interaction/animation, Responsive design to adapt to multiple screen sizes.

  • Icon Design
  • Bootstrap
  • Hand-coded jQuery
  • SVG "profile photo" graphics

Edge Reflow Responsive Design Prototype

Using a new rapid work-flow with Adobe Edge Reflow, I create rough responsive prototypes, then develop right in the browser. No more iterations of multiple rough layouts in non-responsive Photoshop!

  • HTML5
  • CSS3
  • Adobe Edge Reflow

Environmental UI / UX

ArtMania Gallery UI/UX Design

Assisting in the planning, design, management and documentation of the first annual ArtMania event at UH Manoa, we had a tremendous turnout and successful event!

So how's this fit in UI and UX? On the UI side of things, there's the design of signs, labels, titles and arrangement of artworks. On the UX side of things, classical web UX techniques carry over to the real world. Wire-frames for planning artwork layout and floor plans. Usability testing and best practices for user flows, only instead of navigating pages in a site, its sections and rooms in a university.

Over a weekend, the UH Manoa Art Department was transformed into a salon style art gallery. Activities included art studio demonstrations, live music and performances, a fashion show by Stylus Honolulu, sales of student and faculty artwork and t-shirts.

  • Crowd Flow
  • Gallery Design
  • Layout
  • Signage
  • Documentation

ArtMania Gallery UX Design

ArtMania Gallery UX Design

University of Hawaii Gallery Management UX

Leader and team member planning exhibitions for the University of Hawaii Art Gallery and Commons Gallery. We worked in a fast-paced style, with a typical entire tear-down/setup in 3 days or less, including any layout, wall painting or prep work for the new exhibition.

Duties included wire-framing/prototyping 2D and 3D scale mock-ups, evaluating user interaction, pace and flow, and managing teams from 10 to 28 people.

As an example of outstanding skills, being the leader for a senior students' typography exhibition that made the overseeing professor of graphic design exclaim:

"This is so great!!! It's like you've transformed the gallery into a little piece of SoHo!"

  • Wire-frames
  • Prototypes
  • User Flow
  • Managing teams and deadlines

Analytics and Testing

Social Media Management

Chart: 833% organic fan increase in a single year

Developing social media guidelines, policy, and style guides. Record-setting shares and fan increases over 19 unique Facebook pages.

Formulating a Social ROI plan to track 3 main criteria: virality, engagement, and growth. Aligned marketing goals by analyzing Facebook Insights for "28 Days People Talking About This" for virality, "28 Days Page Engaged Users" for engagement, and "Lifetime Total Likes" for growth, respectively.

  • Facebook Insights
  • Excel Graphs
  • Customer Engagement
  • Branding and Identity
  • Copy Writing

Social Media Management

Chart: 189% average increase of Facebook Likes across 19 unique brands in a single year

Establishing marketing goals for social media. Tracking and reporting of 19 unique brands utilizing Facebook Insights, Power Editor, Excel, and Google Docs.

My team worked to find the identity and voice of unique brands, and trained trained staff in social media policy.

  • Marketing Objectives
  • Building SMART Goals
  • Branding and Identity
  • Social Media Policy

Google Analytics

Based on traffic funnels, rocketing the mobile web redirect from 26% to 100%

Administering and management of Google Analytics across multiple domains and sites. I've setup and administered Google Analytics for Model N, BrightRoll and the Pacific Coast Farmers' Market Association.

In the above graphic, you can see the mobile redirect rate rocket from 26% to 100%, through new JavaScript and PHP redirects I programmed. Previously, customers were only being redirected with limited entry points.

Other work includes optimizing and improving CTR (click-thru-rate) with data-driven A/B tests. Minimizing bounce rate with analyzing user flows, pain points, keywords, and points of entry.

  • Google Analytics
  • SEO
  • User Flows
  • A/B Tests
  • Traffic Funnels

Multimedia Visual Design

Case Study: Kaiser Farmers' Markets Brand Identity Alignment

Download the Full PDF

Challenge: Bring cohesion between Kaiser Brand Identity Standards and Guidelines, and farmer's markets collateral.

Process: Utilizing Brand Identity Standards and Guidelines, align collateral artwork and designs. Formulate new color scheme to unify products. Optimize file size and quality.

Solution: New color scheme to align brand and identity, improved typography, improved layout, optimized overall file size from 94MB to 23MB

Color Selection

To align with the official Kaiser Permanente style and brand, a base color of KP Blue was first selected as a primary hue for maximum brand recognition.

Accents, neutrals and contrasts were then selected to reference pillars of the farmers' market identity:

  • Freshness
  • Vitality
  • Wholesome
  • Healthy
  • Down To Earth

Combining color psychology to reflect these values, while referencing swatch samples from the established farmer's market shopping bag motif, lead to a cohesion aligned with the Kaiser brand, and farmer's market identity.

  • InDesign
  • Illustrator
  • Copy Editing
  • Graphic Design
  • Color Theory
  • Branding
  • Identity

Fresh Approach Tri-Fold

Working with Fresh Approach, a non-profit geared towards improving food access and nutrition education to disadvantaged communities, we formulated the branding, and identity. The above graphic is from a fundraising tri-fold, used in conjunction with a special HBO screening "Weight of the Nation" in Oakland.

We established a voice, color scheme, typography, and graphic design to reflect their values of health, sustainability, community outreach, and uplifting nature.

  • InDesign
  • Illustrator
  • Copy Editing
  • Graphic Design
  • Color Theory

New Years' ReSolutions Booklet

Download the Full PDF Version

A personal project of mine for 2011 New Years, tying back into the farmers' markets. This 8-page booklet featured 5 "Re's" for each week in January: ReHydrate, ReBound, ReCycle, ReFresh, and ReFlex. Each week had a corresponding activity with a related farmers' market seasonal produce or recipe to help achieve your goal.

  • InDesign
  • Illustrator
  • Graphic Design
  • Activity Planning/Coordination
  • Copy Writing and Research
  • Illustration

"No Ka Oi"

T-Shirt Screen Print

In Hawaii there's an everyday phrase "No Ka Oi". Stemming from the Hawaiian language, it translates to none better, or unsurpassed in quality. I chose this phrase as a centerpiece in a series of designs that was aimed at the broad topic of "everyday wear".

  • Screen Printing
  • Art Direction
  • Graphic Design
  • Illustration
  • Photoshop
  • Masking
  • Color Separation

Sacramento Zoo Coloring Contest Poster

As part of my many-hats work for the farmers' market, I would create 11 x 17 tabloid size posters to advertise special market events. This poster and accompanying handout (see full picture for example) was one of my favorites because I was able to put my illustration skills to good use for a good cause.

  • Illustrator
  • Graphic Design
  • Typography
  • Art Direction
  • Illustration

"Viva Von Tease" Painting

Commissioned for Dark Friday's "Murder, Mystery Mayhem" event. Drawing inspiration from the event's film noir theme, and edgy art style of Frank Miller, I made this painting in ink and acrylic on canvas. I used Photoshop and Illustrator the plan the figure-ground reversal, inter-penetration outline, and minimized shape forms.

  • Ink and Paint on Canvas
  • Illustration
  • Photoshop
  • Illustrator

Sample Title Sequence

Short motion graphic of example animated title sequence. Using After Effects and Open Source software, I animated and converted a quick title into HTML5 video.

  • After Effects
  • 12 Principles of Animation
  • HTML5 - mp4, webm, and ogg formats

2.5D Motion Graphic

Utilizing Cinema 4D built-into After Effects, a "2.5D" effect can be made, bridging the gap between our 3D world and the 2D screen world.

  • After Effects
  • 12 Principles of Animation
  • Adobe Illustrator
  • Cinema 4D

What are you waiting for?

Let's connect, collaborate and communicate

LinkedIn
GitHub
Email

Just let me know you're following up from my site... And not a spam-bot

Resume of Jason Post

Download Word Doc Version

(better UX for Resume Systems)

Download PDF Version

(better UX for People)

The perfect overlap of technical-minded plus creative-minded that you're looking for. Experienced UI/UX designer, web developer, social media manager, and graphic designer. Particularly interested in UI/UX Designer roles with a splash of Front End Web Development, implementing UI/UX best practices that drive results, and beautifying media in all of its forms.

Code Samples

This entire site was hand-coded. Do you like it? I hope so :)

Building on a customized Twitter Bootstrap foundation, I designed this site to be mobile-first with progressive enhancement.

I'm incorporating typography best practices to set type to be pixel-agnostic with rem, serving images in a responsive way with the Picturefill library, and semantically marking up the page with HTML5 tags like nav, article, and section.

All this combines for enhanced SEO, screen reader ability, and all-around better experience. Check out the source HTML and CSS for reference.

Need more than this site's source?

I also have some jQuery, JavaScript and PHP code/programming samples on GitHub .

Pure Code Baby!

Examples include:

  • Dynamic Google Map built on PHP that queries a MySQL server, and parses in JavaScript, utilizing the Google Maps API v3. Live Map Demo Above
  • Enhancement to the Picturefill library that I implemented on my site, adding support for img-tag level classes, titles and id to enabling styling like img-responsive and img-circle with Twitter Bootstrap.
  • JSON-P GitHub.com repo search by keyword.
  • Proof of concept, jQuery and Bootstrap based simulated chat for a tech exercise.

Skills and Training:

UI / UX

  • User Centered Design
  • Analytics
  • Usability Studies
  • Wire-frames
  • Personas
  • Prototypes
  • Taxonomy
  • User Flow
  • iOS Apps (iPad & iPhone)

Web Design / Front End Development

  • Responsive-Design
  • Pixel-Perfect Imagery
  • XHTML / HTML / HTML5
  • CSS / CSS3
  • JavaScript
  • jQuery
  • SEO
  • WordPress
  • Twitter Bootstrap
  • Git Version Control / GitHub

Adobe Creative Cloud

  • Dreamweaver
  • Edge Inspect
  • Edge Reflow
  • Edge Animate
  • Photoshop
  • Illustrator
  • InDesign
  • Digital Publishing Suite
  • Fireworks
  • Acrobat Distiller
  • Acrobat Pro
  • After Effects

JavaScript Libraries

  • jQuery
  • jQuery UI
  • Modernizr
  • Picturefill
  • Twitter Bootstrap
  • Spry
  • Zurb Foundation

Google Tools

  • Google Analytics
  • Custom Web Search
  • Dynamic, Interactive Mobile Maps
  • Docs / Drive / Shared Documents

Motion Graphics

  • Autodesk Maya 3D
  • After Effects
  • Cinema 4D
  • Final Cut Pro
  • Premiere

Experience:

UI UX Designer Developer, 2016

Vlocity, Inc. - San Francisco, CA

Vlocity is the first kind of company ushering in the next wave of Cloud Computing. Specifically, creating, from scratch - The Industry Cloud. The Industry Cloud is designed to meet the critical omni-channel sales, service and marketing drivers of the biggest brands on the globe.

Leading the UI and UX on multi-million dollar sales and services contracts with some of the biggest names in the Communication, Insurance, Health Insurance, and Public Sector industries, including Sky Italia, T-Mobile, and New York Life.

  • Leading the charge in creating compelling, high-fidelity, aesthetically pleasing product demonstrations that lead to revenue.
  • Working with head of department to prioritize the most compelling projects
  • Wire-framing and prototyping proof of concepts to get rapid feedback and rapidly iterate upon
  • Working directly with C-Level clients and stakeholders to understand business needs and formulate user-centered solutions
  • Collaborating with sales consulting team members to understand customer requirements
  • Providing recommendations for solving critical use case scenario thru compelling UX
  • Developing process and system for cataloging library of UX assets for customer engagements
  • Interacting with product management and engineering on qualified projects
  • Establishing standards for demo assets
  • Developing team training
  • Providing design and development mentorship

UI/UX Designer, 2015 - 2016

AAA Northern California, Nevada & Utah - Emeryville, CA

Designing iterative improvements to a mobile-first website that serves over 4.2 Million members. Integrating best UX patterns and practices on a tech stack including Drupal, SFDC, Sass, HTML5, and CSS3.

Leading the UX design of outstanding digital products and experiences with internal and external creative resources. Working hand in hand with the Digital Designer as two halves of a design team.

  • Leading UI/UX Design to serve 4.2 Million members
  • Managing 2 week project sprints in Agile with VersionOne and JIRA
  • Leading concept creation through the execution of complete customer facing designs
  • Creating wire-frames, storyboards, user flows, process flows and site maps
  • Effectively communicating interaction design ideas
  • Leading design efforts end to end (design presentations, coordinating user testing, communicating around design practices)
  • Collaborating with product owners up to C-suite, brand/creative directors and designers, engineering leads and agency partners
  • Conceptualizing ideas that bring simplicity and user friendliness to complex roadblocks
  • Presenting and defending designs and key milestone deliverables to peers and executive level stakeholders
  • Using analytics to support the continuous improvement process
  • Establishing and promoting interaction design guidelines, best practices and standards
  • Overseeing usability testing

UI/UX Designer & Developer, 2013 - 2015

jpost-design - San Francisco Bay Area, CA

Leading web design and app development following the latest technology and standards, while incorporating tried and true traditional design skills and styles. Some specifics tied under non-disclosure agreements.

Focusing on HTML5, responsive design, and flat UI patterns inspired by the Bauhaus School and De Stijl Movement.

  • Industry Experience:
    • SaaS
    • Startups
    • eCommerce
    • Advertising
    • Higher Education
    • Revenue Management
    • Non-Profit industries
  • Previous clients
    • Cost Plus World Market, Oakland CA
    • The Creative Group, Oakland CA
    • UC Berkeley Center for Executive Education, Berkeley CA
    • Vitamin T / Aquent, San Francisco CA
    • Model N, Redwood City
    • BrightRoll, San Francisco, CA
    • Stealth Startups, East Bay
  • UI/UX
    • Wire-frames
    • Design Patterns
    • Taxonomy
    • User Flows
    • Google Analytics
    • Quantitative and qualitative usability studies
  • Interaction Design
    • jQuery / JavaScript animations
    • Performance optimization
    • Rich Media Integration
  • Responsive Web Design
    • Designing mobile first with progressive enhancement support
    • Frameworks: Twitter Bootstrap, Zurb Foundation
    • Responsive images with picturefill and noscript fall-back
  • App Development
    • Geolocation support employing HTML5 Geolocation API and Google Maps API
    • Audio and Video HTML5 integration, with cross-support for h.264, ogv, and shockwave-flash fall-back
  • Email Marketing
    • HTML email design and coding
    • Increased house/retention list by 22,000 clients with dynamic vs static processes
    • Email campaign management
    • Campaign integration with HubSpot, Pardot, Salesforce CRM
    • Prospect database management
    • Prospect flow documentation and analytics

Front End Developer, 2014

Cost Plus World Market, Oakland, CA

Contractor On-Site
  • Review design in progress with an eye toward production as well as usability
  • Determine feasibility of planned JavaScript interactions
  • Slice approved PSD files into optimized assets and build needed HTML/CSS to meet weekly production schedule
  • Enter HTML/CSS into webstore CMS and verify it looks/works as expected
  • Help diagnose/fix front-end issues (CSS/JavaScript) as they arise
  • Use, and continually keep on top of, best practices for compatibility, usability, accessibility
  • Collaborate with designers and business owners to deliver best possible user experience
  • Develop new user-interface functionality as requested, by hand-coding OO JavaScript and/or leveraging 3rd party libraries

UI / UX Designer, Drupal Web Production, 2014

UC Berkeley Center for Executive Education, Berkeley, CA

Contractor Remote and On-Site
  • UI/UX Front End Design and Development
  • CMS Drupal, HubSpot, Salesforce, and Google Analytics integration
  • Expert usability testing
  • Site audit and industry competitor comparison
  • CMS Drupal administration and management via GetPantheon platform
  • Drupal core and module updates
  • Git version control
  • Pixel perfect graphic and logo creation with Photoshop and Illustrator
  • Wireframe and mock-up production with Balsamiq
  • Google Analytics management, administration, KPI goal creation, custom segmentations, and dashboards
  • HTML, CSS, JavaScript and PHP scripting
  • Sitemap creation with taxonomy and IA (Information Architecture)
  • SEO auditing and strategy planning

UX Designer, Web Producer, 2014

Model N, Redwood City, CA

Contractor Remote and On-Site
  • Website development, website production, HTML email production
  • Responsive web design, planning, and development
  • Establishing taxonomy and information architecture (IA)
  • Migrate content and existing PHP based site to new CMS AutoPilot
  • HTML/CSS coding and validation
  • QA (Quality Assurance) testing
  • Bug logging through BaseCamp
  • Google Analytics management
  • Connected and synchronized Google Analytics across multiple web domains and MAP (Marketing Automation Program) Marketo

Emarketing UX Designer, Front End Developer, 2014

BrightRoll, San Francisco CA

Contractor On-Site
  • Pixel perfect PSD to HTML conversion
  • Improved organic SEO by pioneering H1-H6 hierarchy style guide for blog posts
  • WordPress CMS content management and administration
  • Building Marketing emails and landing pages with a focus on quality and tight turnarounds
  • Lead the production and distribution of digital e-communications including newsletters, e-flash announcements and event invitations, including all production and coding for campaigns
  • Working with SFDC (Salesforce DotCom) and Pardot pull established segmentation lists and generate campaigns, email testing, email deployment and perform postmortem reporting

Lead UI / UX Designer and Developer - Contractor Remote, 2013

BAY-Peace, Oakland CA

Contractor Remote

Led the UI / UX team in the design and development of an HTML5 responsive micro-site with responsive motion graphics.

  • Custom framework development and testing
  • Project Management
  • Mentoring
  • UI Design
  • Interaction Design
  • Usability Testing
  • Creating User Personas

Promotions Coordinator, 2011 - 2013

Pacific Coast Farmers' Market Association - Concord, CA

UI/UX, Web Development, Social Media Management and Graphic Design

The Pacific Coast Farmers Market Association (PCFMA) is the largest farmers' market association in the U.S., operating over 70 markets spanning from Santa Teresa in the South Bay up to Vacaville in the North Bay.

This is where being a unicorn comes in. I juggled UI/UX, web development, social media management, and graphic design.

I'll say upfront the current site is dated, its one area I worked very hard on to update, and for the most part only back-end changes were approved.

  • Web development of a dynamic PHP/MySQL website with 1,000-plus pages. (Not involved with the 90's style table layout.)
    • Correcting over 2,700 HTML warnings and errors
    • Boosting mobile redirect from 26% to 100%, based on Google Analytics traffic funnels
    • Creating a dynamic, interactive map of 70 farmers' markets utilizing PHP, MySQL, Google Maps API, including custom icon design
    • Prototyping an entire redesign of the PCFMA site to be responsive-ready
  • Social media management and content creation across 19 distinctive brands
    • Achieving a 189% average increase of Facebook Likes across 19 unique brand pages in a single year
    • Record-setting 833% organic increase (no ads) from 54 to 504 Facebook Page Likes on a single page
    • Record-setting viral post with 153 Shares, on a Page with only 598 Likes, reaching 16,248 unique users
    • Developing social media guidelines and policy
  • Graphic design in print and digital formats for 70-plus unique markets
    • Developing brands' visual guidelines
    • Masking and compositing designs utilizing Illustrator, InDesign and Photoshop
    • Producing print media small and large, including postcards, booklets, posters, and 20-foot vinyl banners
    • Generating digital media for the web, social media, and digital ads

Graphic Design and Illustration, 2009 - 2011

Crazy Shirts Hawaii - Honolulu, HI

Founded in 1964 at Waikiki's International Marketplace, the Crazy Shirts brand has risen to be recognized as an international icon. Innovation is a pillar that the company proudly stands on, pioneering specialty dyed products utilizing exotic materials such as volcanic ash, wine and chili peppers.

  • Conceptualizing illustrations and graphic designs based on seasonal/monthly categories and nonspecific keywords
  • Creating rough sketches to be digitized upon approval into compatible Photoshop or Illustrator files
  • Separating art files into compatible silkscreen-ready color separated layers

User Experience, 2008

University of Hawaii Art Gallery and Commons Gallery - Honolulu, HI

The Department of Art and Art History includes two galleries. They aim to serve as laboratories for the critical exploration of ideas about historical and contemporary art, design, culture, and society; and contribute to the cultural life of the region.

  • Planning exhibitions for the University of Hawaii Art Gallery and Commons Gallery
  • Prototyping 2D and 3D scale mock-ups
  • Evaluating user interaction, pace and flow
  • Managing teams from 10 to 28 people
  • Cataloging and photography of artworks
  • Arranging, installation and lighting of artworks
  • Constructing custom display cases, shelving and frames
  • Coordinating drop-off and pickup of artwork

Education:

Tech SF Digital Design Certificate

BAVC - San Francisco, CA

  • Responsive Web Design
  • iPad App - Adobe Digital Publishing Suite
  • After Effects and Cinema 4D Work-flow

BA Design and Applied Arts

University of Hawaii at Manoa - Honolulu, HI

  • Award - Outstanding Electronic Arts
  • President of 650 Students in Hale Wainani - Hawaiian translation: "House of Beautiful Water"
  • Breadth and depth of "new" and "traditional" processes and styles
  • Creating a "little piece of SoHo" in the commons gallery for the department head of Graphic Design

AS Digital Media Production and Animation

Leeward Community College - Pearl City, HI

  • Award - Associate of Sciences Degree Valedictorian
  • Certificate of Competency in Web Design
  • Certificate of Competency in Desktop Publishing
  • Certificate of Competency in Motion Graphics

Be well, do good work, and keep in touch.

- Garrison Keillor

LinkedIn
GitHub
Email