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.
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.
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.
Asymmetrical layout inspired by iPad magazine apps.
Test responsive example. Shrink and expand browser window to see responsive breakpoints and liquid layout to reflow.
Centered layout with conventional design pattern.
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/
Today's Simulated Date: March 28
- Open Market
- Closed Market
Responsive Wireframe Design Process
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, and I presented many solutions to the management. Ultimately, management decided to stay with their original, non-mobile-friendly site.
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.
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
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.
Utopia iPad Magazine Article
Given video, article copy, and links, created a concise article for an iPad magazine app.
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.
Responsive Prototype Process
Lead a team to overhaul the existing table-based PCFMA site to a brand new responsive, mobile-first site with progressive enhancement.
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. Wireframes 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.
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!"
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.
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.
New Years' ReSolutions Booklet
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.
"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.
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.
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.
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.
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 microsite 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.
Dark Friday Events is a premiere art and exhibition event planning association to raise awareness about local artists in previously untapped spaces. Nightlife venues would be transformed into exhibition spaces and filled with local artwork following specific themes such as Film Noir, Murder-Mayhem-Mystery, and Wonderland Madness.
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.
Student body President of 650 Students in Hale Wainani - Hawaiian translation: "House of Beautiful Water.
Working in the Office of Continuing Education and Development, providing a variety of programs that support economic development, and training courses for job seekers, businesses and aspiring entrepreneurs.