Katie Poe Bayes

Project

IOpipe.com

Redesign and revamp marketing site with new branding and message

UXBrandingVisual DesignResponsive DesignFrontend

Technologies used

SCSSNext.jsSketchInVisionNetlify

A complete site overhaul to replace what had been a Wordpress site. Along with a marketing messaging rebrand, we completely recreated out marketing site. My role on the project included low-fidelity wireframes, higher-fidelity wireframes, visual design, and the frontend build using Next.js on React.js.

IOpipe.com Home
Simple, bold color to tell the multi-sided story of our product on first load. CSS transforms made the diagonal effect.
IOpipe installation section
I used a combination of JSX and CSS animation to create a typing effect for the installation section. The component I created for this takes the number of characters as a prop and manages the timing based on it for easy text editing and reusability.
IOpipe features page
I built an internal navigation into the feature pages for easy navigation and to address sideways entry to these pages.
IOpipe features page
Reusable React components for displaying imagery take a simple prop to apply any of the available layout options. This made consistency and the process for new pages a snap.
Ontray Home Ontray Home
As usual, the site is fully responsive and the styling is written in a mobile-first setup.