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).
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.
Find me at https://linkedin.com/in/jpostdesign
Or you came back?
Single page PDF I authored as a starting point to increase engagement and fan base.
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.
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.
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.
See the full prototype in HTML and CSS based on Zurb Foundation
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.
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.
Today's Simulated Date: March 28
- Open Market
- Closed Market
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.
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.
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.
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.
Case Study: Kaiser Farmers' Markets Brand Identity Alignment
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
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:
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.
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.
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.
"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".
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.
"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.
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.
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
All this combines for enhanced SEO, screen reader ability, and all-around better experience. Check out the source HTML and CSS for reference.
idto enabling styling like
img-circlewith Twitter Bootstrap.
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.
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.
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 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.
Google Maps API
VideoHTML5 integration, with cross-support for
Led the UI / UX team in the design and development of an HTML5 responsive micro-site with responsive motion graphics.
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.
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.
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.