About Me
HI! I'm Jeffrey Pohlmann, but I go by "JP". I've been developing web sites since the very begining in 1995. I love modern CSS and all the things it can do. At times, I even enjoy JavaScript. I also love dogs, electronic music, and 3D printing.
I'm pretty easy to talk to. Choose your favorite method:
Achievements
- Awarded 3 U.S. Patents for Interaction Design
- Adept at creating new as well as updating older applications
- Liaison between marketing, designers, and developers, guiding large bi-costal and multi-country teams in the US, Vietnam, and Brazil.
- Focus on User Experience and interaction design.
- Prototyping complex applications in HTML, CSS and vanilla JS to quickly visualize interactions, usability, and flow
- Excellent at breaking down large tasks into smaller, manageable elements. This includes everything from smaller atomic components to larger organisms and even templates for layout.
- Experience working with user research and focus groups to guide the development and design process, ultimately resolving user pain points.
- Created new CSS methodology to make code lighter, more flexible and robust.
- Helped in the creation of the STUDS design system, working with designers to help them understand technical possibilities and limitations of modern browsers
Experience
Brought on to assist in developing a design system for all software products and websites, both public and internal. Initially hired as a contractor with a one-year contract, I transitioned to full-time employment after seven months and was subsequently promoted to Team Lead. During my tenure, I developed the P-M methodology to address challenges encountered during development while integrating external frameworks.
Accomplishments
- Created internal websites for marketing and promotions.
- Collaborated closely with designers to help them comprehend the capabilities of contemporary browsers and technologies.
- Led a small team of engineers, guiding the development of the STUDS design system and its components.
- Maintained Telerik themes to align with STUDS designs.
- Provided guidance and feedback to designers on the feasibility of their designs, while also encouraging them to experiment with new patterns. I offered insights into the capabilities of modern CSS and browser features.
- Served as a liaison between developers and designers.
- Collaborated with designers and developers in both the USA and Vietnam to ensure coordinated efforts.
- Worked closely with design system architects to ensure that designs and interactions were accessible, feasible with modern browsers, and within the time constraints of the delivery schedule.
- Developed the P-M methodology and style guide.
Brought on as a short-term contractor to help with user experience and interaction issues introduced by a recent website upgrade. Worked with marketing and developers to change the website from a strict breakpoint structure, to a componentized system that allows each section of a page to be responsive as needed, based on available space. This created a more fluid experience with cleaner layout. In addition, created new designs for legacy pages to better fit the design and direction of the new website.
Accomplishments
- Worked closely with marketing to make sure pages stay on-message and on-brand.
- Worked with front-end developers to make sure they understand requirements.
- Created prototypes as needed to demonstrate animations and interactions. Prototypes are created in HTML and CSS (Sass, etc), and easily handed off to the front end developers to integrate with the rest of the pages.
Served as User Interface, User Experience, and Interaction Designer for Illumina. Worked on multiple projects, from established and legacy projects to new products. Evaluated current designs and oversaw user testing to help find areas of improvement and customer pain-points. Worked with marketing, frontend and backend developers, and user groups to create new or updated designs.
Accomplishments
- Created the workflow, design, animations, and interactions for the user-facing control software on Illumina’s iSeq 100 gene sequencer.
- Created and iterated on design through interviews with backend, frontend, and hardware developers, consulting with marketing, and user testing.
- Built functional mocks that helped find pain-points early in the development process.
- Iterative update of the DesignStudio assay designer application. Introduced new selection workflow, and updated overall design to follow Illumina’s design guidelines.
- Updated Illumina’s UI Library – a reference library with code examples, styles, and scripts that are to be used by all software projects for both internal and external web-based applications. Updated from Bootstrap 3 to Bootstrap 4, and wrote documentation to instruct other designers on code-breaking changes.
Served as lead UI/UX designer and developer for business.com, writing code in php, HTML5, CSS, Sass, javaScript, and jQuery. Provided expert consult/advice for new projects, multiple platforms, practical solutions, and new design/direction. Design new website sections from basic framework creation to production release. Redesign existing website sections, taking handoffs from backend developers to create new styles, animations, and interactions. Research emerging methodologies and technologies to improve or update outdated sections.
Accomplishments
- Served as driving force leading Business.com to create a more modern, usable website and use multiple platforms to reach a greater audience.
- Played a key role creating site’s user experience, which reflected company’s change from an arbitrage-based business to a content-centric lead-generation model.
- Converted legacy Business.com website from using the Blueprint CSS framework to a custom, php-driven solution. The increased organization and customization options of the new system helped both backend and frontend developers be more efficient, reduced the number of support files needed, and helped reduce production server overload. All leading to a better user experience.
- Devised and implemented solution that accelerated load time for web pages as well as a menu system that appeared on every page.
- Created a CSS and javascript system that greatly simplified the development process, which in turn saved time and improved consistency. The system also reduced the amount of code maintenance, HTTP requests, and load times by eliminating use of third party plug-ins and libraries.
- Decreased website render times on mobile and desktop devices, as well as displaying standard or high resolution images depending on screen resolution, by initiating use of HTML5 Picture element.
- Equipped marketing department with ability to update design elements and colors independently by creating template system that sped up website changes and unburdened development team.
- CSUPERB [2009 - 2010]
- Web Developer
- San Diego State University — Field Stations Program[2005 - 2010]
- Web Developer
- JP Arts [2002 - 2005]
- Graphic Designer | Web Developer
- Promotional Broadcasting Network, Inc. [2000 - 2002]
- Art Director | Lead Programmer
Projects
Strongtie.io
Internal website for education, marketing, and visibility of upcoming products and policy shifts.
The website was created by a UX designer in our department, and then I took over the coding. I collaborated with the designer throughout the design and coding stages, offering ideas for how users could interact with the site and what animations would be best.
Due to NDA, I have "sanitized" most of the text.
view project…STUDS
STUDS (Strong-Tie Unified Design System) was a long-term project aimed at consolidating and unifying all the diverse software applications and websites at Simpson Strong-Tie.
Over the past 65+ years at Simpson, development had often been conducted in isolation, leading to wildly different appearances and user experiences across various products and applications.
To address this, we created a comprehensive design system that included style guides and a diverse range of components, such as Web Components, React, and Blazor, to facilitate the integration of our design elements into other developers’ projects.
By leveraging these components, developers could seamlessly incorporate the unified look and feel into their applications, eliminating the need for extensive focus on presentation. This approach allowed them to concentrate on building robust and functional applications.
P-M Methodology
One constant will always remain true: designs change. Whether it's the whims of fashion, the needs of users, or the desire for design to just be "new", change is constant.
The P-M methodology understands this, and is based around naming components and elements based on their function and purpose, instead of how they look.
documentation and github link coming soon
PuppySpot templating
I created a template system for PuppySpot that helped to drastically speed up web page design, development, and deployment.
The system I created uses a series of section templates that can be stitched together in arbitrary order to create a new page. Not only did this greatly decrease the time to design or update pages, but development time was also drastically reduced from a couple days down to about an hour.
The requirements for this project were to create a system that would let them update their older "legacy" pages, but also set guidelines for creating new pages and sections of the website.
While the legacy pages have important information that doesn't change often, they wanted a way to allow the marketing and design departments to easily update text and images without needing additional developer support or time.
Each design template has a corresponding HTML, CSS, and JavaScript component. The component also has connections to the company's CMS which will provide the text, data, and images on the page.
Designing or updating legacy pages is now a simple process of choosing which section templates to use and in which order, then sending that list over to the front-end developers. For example, on the No Puppy Mills Promise page, the list would be "A, C, L".
Developing the page becomes almost trivial; list which templates to use in which order, and provide the hook to the corresponding CMS entries.
Once that's set up, the marketing department can enter and change the text and images whenever they need, and the page will automatically be updated.
Interface for the iSeq 100 gene sequencer
The project was to make an interface that was more colorful and less clinical for the Illumina iSeq 100 gene sequencer. The instrument was originally intended for a less scientific audience. Whereas the usual audience for these instruments are large universities and labs, this instrument was going to be marketed towards doctors, veterinarians, and other smaller, non-research oriented places.
Creating a streamlined and simple-to-follow interface for genetic testing was the primary task.
The interface was to be touch-screen and about the size of an iPad. Touch targets and legibility of information presented per screen also needed to be considered.
These prototypes were completely interactive, built from standard HTML5, CSS, and JavaScript. Having a working prototype greatly facilitated troubleshooting the workflow, finding pain points, and bridging the gap between hardware, software, and interface early in the process. When questions arose or pain points were identified, it allowed for quick changes early in the development process.
The marketing department was still working on the final color palette when I was making these, so I used some of the standard company colors. While the final version doesn't use any of these colors, the basic workflow I designed and refined though extensive user testing is still there.
I divided the process so that each screen would represent a single task the user needed to accomplish before proceeding. Some screens required user input, and others were to show that the instrument was busy processing, calibrating, or sequencing.
I wanted a fluid interface that moved in from the right and off to the left. Some steps could be completed while the instrument worked on other tasks. Using a two-paned layout was the answer, providing a way for the user to enter information and still see the instrument's progress.
Code examples
Take a look at my github and my CodePen for code examples.
Did you know? This website is also available as a public repo on github.