Menu  

jpost-design

Senior Designer

By Jason Post
jpost design logo

Hi, I'm Jason Post. Welcome to my hand-coded, custom designed portfolio!

headshot profile of Jason Post

Leading research and design that drives results. Expert in determining user pain points, generating new solutions, and synthesizing variations. Connecting design principles and best practices with business goals, and defining success metrics.

With a front-end background I've been called a unicorn, but personally I prefer the platypus.

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

beaver plus
duck equals
platypus

Connect on LinkedIn

https://linkedin.com/in/jpostdesign

Design Skills:

  • UI / UX Design & Research
  • User-Centered Design
  • Usability Testing
  • Prototyping
  • Wireframing
  • Web Design
  • Responsive-Design
  • Mobile App Design
  • Frameworks (e.g. Bootstrap)
  • Pixel-Perfect Imagery
  • Sketch
  • InVision
  • Adobe CS / Adobe CC
  • Photoshop
  • Illustrator

Technical Skills

  • SaaS / Cloud Computing
  • Google Analytics
  • SEO
  • HTML / HTML5
  • CSS / CSS3
  • JavaScript / jQuery
  • Git Version Control / GitHub
  • Salesforce Lightning Design System

Notable Accomplishments:

  • Principal designer of major new features at Roostify, including new security, and architecture, collaborating with engineering to touch every piece of code
  • Increasing overall efficiency by 30% of Roostify's clients through improving the digital application experience
  • Raising the Net Promoter Score by 4 points at AAA Northern California, by improving IA, UI, and UX
  • Increasing UC Berkeley Exec Ed sales team's "Contact Us" page views by 100% creating a 235% increase in revenue
  • Rocketing mobile redirect from 26% to 100%, based on Google Analytics traffic funnels

Experience and Examples

UI / UX Design and Development

  • Responsive Sites
  • Apps
  • Wireframes and Prototypes
Explore Design and Dev

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

Roostify - Design Object-Oriented Home Lending Experience

Summary: Roostify is a digital mortgage SaaS responsive web platform that simplifies and accelerates the home-buying experience. Principal designer of major new features, building and incorporating pattern libraries, and designing new workflows.

Problem: Borrowers and Lenders for home loans are bogged down by mountains of paperwork, and archaic systems. The current platform fell short of satisfying users' needs of communicating and working on the most important, time sensitive processes. We needed to know more about the home lending journey, lender's workflows, and communication points in order to design a better experience. Lots of communication and process was happening outside of the platform, making it difficult to track, causing borrower confusion, extending times to close, and creating insecure communications.

Process: We started with a research plan, partnering with Cooper Design to contract 2 main researchers to travel on-site to several banks across the country to develop a better understanding of the home loan journey. Combined with in-house and field interviews, we then created archetype personas and user journeys for both borrowers and lenders. Adopting a development term, we realizeed we needed to make the interactions object-oriented.

After assembling the full user profiles, 1 researcher spun off, and I partnered with the remaining researcher/designer to whiteboard the patterns, functions, and design artifacts we needed to improve communication throughout the home lending experience. We would switch duties whiteboarding, one person generating and the other synthesizing, both problem solving for the user personas. Focusing on the borrower dashboard, we boiled down the order of importance through a combination of persona mapping, and in-house user testing with the customer service team.

When a draft seemed ready, we checked in with my design director, and coordinated a group presentation and critique, up to a VP and the CEO. While presenting, we took notes of major points on post-it notes, end integrated the feedback into the next whiteboard.

Solution: The final whiteboard was presented in tandem with an example user journey, and was sketched out to include new UI elements and signifiers. It was then documented in a presentation as a guide for next steps, ready to be shared to greater teams.

Team: 1 UX researcher, 1 UX researcher/designer, 2 product managers, 1 design director, 1 VP of product, 1 CEO

Timeline: 1 month UX research, 1 week crafting personas & user journeys, 2 days defining product improvements and scope, 1 day initial whiteboard, 1 day presentation, 1 day revised whiteboard, 1 day presentation

  • User Research
  • Personas
  • User Journeys
  • Whiteboarding
  • Wireframes
  • User Testing
  • Presentation

Borrower User Journey

From user research and personas, user journeys were created with intentional potholes and challenges, along with moments of delight in their experience.

Listing Design Artifacts, Patterns, and Interactions

First Whiteboard Wireframe

Intentionally quick and messy to focus on agile changes. First draft of new borrower dashboard with object-oriented actions, messages, and status. Icons and UI kept to a minimum to focus on overall information architecture and user actions to walk thru.

Feedback Notes

Post-It notes were added from team feedback on layout, interactions, and journey, to be integrated into next version.

New Borrower Dashboard

Quick 2nd draft of rapid whiteboard, many times wiped clean and re-done. Integrating notes and feedback, the new borrower dashboard adjusted its layout, added more UI icons and signifiers to better communicate to borrowers and lenders at-a-glance what was going on, and most important action to take next. New UI included a progress bar, new icons for quick scanning, and basic typography treatment to flesh out basic proportions.

Vlocity - Neustar Support Portal

Summary: Vlocity is a SaaS cloud computing solution for the communications, insurance, and government verticals. I was the lead UI / UX designer and developer on the sales team for creating dashboards, purchase flows, and portals on the native mobile / tablet iOS app, and mobile-first responsive web experience.

Problem: Neustar had an enterprise support portal designed desktop-first in the 90's. It was outdated with both design and technical debt. They desired an updated UI and UX that aligned with their marketing brand redesign, and also to take inspiration by Salesforce's own support portal.

Process: I did a 50/50 split of design and development, from research to delivery. Starting with research from Neustar stakeholder interviews, I assembled a list of research into their current UX, and design goals. Taking inventory of their current support portal, I re-mapped the information architecture with card sorting and mental models, creating a flatter, more efficient entry page.

Next, due to time constraints put together a guerilla styleguide based on Neustar's recent redesign, combined with Salesforce's own support portal and lightning design system.

Then I did some quick sketches to check the grid pattern of the new desired card layout system, and jumped into the browser to design and develop directly. After a quick check in of the layout and design direction combining a rapid HTML prototype with a design inspiration board, I then proceeded with the full design, UI asset creation, and development of the portal.

Solution: Delivering a new mobile-first, responsive design, enterprise support dashboard prototype that aligned styles with Neustar's new look, and stakeholder requested inspiration from Salesforce's support portal.

Team: 2 remote sales leads, 1 remote sales associate, 1 UX designer, core on-site development team as needed

Timeline: 1 day for user research, 2 days of style and branding, 3 days of design asset creation and front-end development, 1 day of presentation

  • 50% UI / UX Design
  • 50% Front End Development
  • Stakeholder interviews
  • Styleguide & Branding Research
  • Responsive Design
  • Illustrator Icons
  • HTML5 CSS3
  • AngularJS
  • Bootstrap
  • Salesforce
  • VisualForce

Original Neustar Support Portal Research

Design Research and Direction

A quick, guerilla styleguide and design board was put together from scanning Neustar's new marketing site, combined with Salesforce's own support page. I picked colors out of Neustar's brand, created custom icons and SVGs, and integrated them into the final portal redesign.

New Responsive Portal Prototype and QA Check

Working in an agile way, I got in the browser as soon as possible to mockup and prototype a proof of concept to check if we were on the right track.

Completed Responsive Neustar Portal Redesign

The final redesign incorporated the new design styles from Neustar's new branding, plus new portal support cards that took inspiration from Salesforce such as transparent icon repeating backgrounds.

Vlocity - Sprint Customer Service Dashboard

Summary: 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, AngularJS, and Salesforce tech stack.

Problem: Sprint was looking for an updated, central dashboard for their customer service. It had to give at-a-glace information for quick service, plus be able to edit a customer's profile and perform certain actions. The sales team needed an on-brand demo ASAP in order to win over the client.

Process: Coordinating a group chat with the team, we defined current gaps in Sprint's system, and top actions their customer service needed, plus additional actions to improve their UX. Taking that bullet list, I then defined a story through the personas of a service representive and end consumer, and storyboarded their interaction.

Next I performed a quick style survey of Sprint in order to customize our platform to their brand. After some quick sketches, and check-ins to verify we were on the right track, I jumped into the browser, doing 50% design and 50% development, customizing our SaaS templates. When I got stuck, I would work with one of the senior developers to figure out the issue, and we'd define the best path forward and how to add it to our style patterns.

Solution: A fully working, on-brand live demo, built on Vlocity's platform on a Salesforce back end. Key micro-interactions included dynamic special offers, and expandable actions and details on existing products. The sales team successfully presented the demo, impressing their audience.

Team 1 remote sales lead, 1 on-site sales lead, 1 remote sales assistant, core on-site development team as needed.

Timeline: 2 days of research, 3 days of design & development, 1 day of testing, 1 day of presentation.

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

Responsive Multi Use Template Process

Summary: Leading the UX design of digital products and experiences with internal and external design and development resources. Designing overhauls and iterative improvements from a desktop-first website, turning it into a mobile-first website, that serves over 4.2 Million members. Integrating best UX patterns and practices on a tech stack including Drupal, Salesforce, Sass, HTML5, and CSS3

Process: I brought together business and digital stakeholders to research and define what types of pages and page content were needed. Then analyzed major breakpoints according to in-house analytics and major form factors at the time.

Next, formulated multi-use templates to be used in a Drupal based CMS, pulling existing CSS and typography styles as much as possible. Templates were created in Balsamiq, then output to multi-page Adobe PDF's for easy shareability and feedback across on-site and offshore teams.

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.

Solution: Delivering a multi-page PDF, with zipped HTML prototypes, that an offshore team made into new Drupal CMS templates. 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. I'd coordinate weekly QA check-ins to ensure all business, technical, and design goals were being met.

Team 1 VP of business, 2 business leads, 1 product manager, 2 digital producers, 2 in-house developers, offshore development team.

Timeline: 2 days to define needs, 1 week of wireframes and protoypes with feedback, 1 month of development and QA.

  • Lead Designer
  • Wireframes
  • 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

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

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

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

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

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

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

"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

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
  • Wireframes
  • 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:

Senior UX Designer, 2017 - 2019

Roostify, Inc. - San Francisco, CA

Roostify is a digital mortgage SaaS responsive web platform that simplifies and accelerates the home-buying experience. Clients include Chase Bank, Guild Mortgage, and TD America.

  • Increasing overall efficiency by 30% of Roostify's clients through an improved digital application experience
  • Lead designer of major new features
  • Redesigning the entire architecture from a max of 2 borrowers to 4-plus on the same loan application, collaborating with engineering to touch every piece of code
  • Designer of Roostify Adapt - multiple branch/account management
  • Spearheading research, planning, and design for new loan flows for home equity applications
  • Responsible for every step of the design process - including mapping user flows, creating mockups and designing high-fidelity UIs across Roostify's websites and apps
  • Employing extensive experience and judgment to plan and accomplish Roostify's broader product and design goal
  • Collaborating with engineers and product managers
  • Mentoring and growing designers on the team
  • Developing team training

Senior 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
  • Wireframing 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

Lead 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 wireframes, 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 - Present

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
    • Wireframes
    • 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