Responsive Web Design
The first wurl.com was a bare-bones, non-mobile site built on WordPress. In 2011, Wurl hired me to rebuild their site based on 960px wide comps provided by another designer. Knowing that mobile viewing was increasing, I insisted upon RWD and built the site mobile-first. In 2013, the site was redesigned and updated, using a scaffold theme based on Foundation. And again, in 2016, the site has been redesigned/rebuilt using a new Foundation-based WordPress scaffold theme. The primary pages are custom coded HTML dropped into WordPress and are frequently updated. Note the glitch effect header text on home page, and responsive layout changes throughout.
July, 2016: sadly, the glitch effect was removed from site. :(
Admin Redesign Project
Mobile comps showing home page and sliding notifications, navigation options, third-party help plugin.
This project is a work-in-progress. The client needs the the UI of their application redesigned and simplified because their users are struggling with their app. The goal is to simplify/clarify the flow, remove unnecessary steps/pages, better integrate help docs/videos, and reduce phone-support requests. In addition, the current version of the application is not responsive nor touch-friendly and needs styling upgrades. After working with client to identify pain points, accessibility problems, etc., I developed clickable wireframes (Adobe XD). These wireframes illustrate a streamlined process as well as reorganized menus & content. From there, the client was presented with general styling options (fonts/colors/forms) called style tiles. Upon the style selection, we've moved to comprehensives, using the selected styling options to demonstrate mobile and landscape tablet/small desktop. Using Sketch & Adobe XD, some of the comps were output as a simple clickable prototype. See links below to view those.
Stay tuned as this project moves from design into component development.
This responsive Ruby on Rails site documents using the Wurl API for developers. Utilizes Foundation SASS framework.
Visit Wurl Developers.
This mobile-first demo-ware demonstrates the Wurl Bridge API. Search by movie, TV or actor/actress name for related online video content and review those video clips. Visit Bridge Item Browse.
The original EyeStyles WordPress site (pictured here) was built before media queries were widely supported, so it wasn't initially responsive. Note that Catherine (me!) was not only the web designer & developer, she also designed the logo, signage & direct marketing materials when EyeStyles first opened. Enjoy my blog about the logo design in the Wayback Machine. The original ES site received an Honorable Mention by The CSS Awards in 2011 and was featured on One Extra Pixel.
The site was rebuilt to fully support mobile engagement in 2013. In late 2015, the site was integrated into EyeCarePro's specialized service package, and no longer uses a custom WordPress theme.
Channels 2.0 Demo
This is Channels 2.0, the latest iteration of Wurl’s Channels lineup. It’s been refactored from the original (see below) and is now using React.js for a faster viewing experience.
Channels 1.0 Demo
This video captures the experience of a user browsing & viewing Over-The-Top (OTT) video content delivered via a set-top-box to TV using Wurl’s API. The demo is built in node.js and includes Bourbon & Neat SASS framework. Demo works on set-top-box using remote channel controller/D-pad navigation, as well as on desktop with arrow keys to simulate D-pad nav.
This prototype illustrates Wurl’s Bridge, which brings together linear TV with online video on set-tops or connected devices. View prototype. Note: primary use intended for D-pad navigation on television monitor, integrated with streaming video content.
Alma brings together Wurl's hosted HTML5-based applications into one convenient UI to connect linear & Over-The-Top (OTT) viewing. Learn More. Note: primary use intended for D-pad navigation on remote control for lean back television viewing. This application is currently incorporated into many streaming video services, including Wow! TV. It’s built on node.js with Bourbon and Neat SASS framework.
Alma Revised Search Prototype
This video is of a Keynote prototype investigating a more user-friendly search path for Lean Back Users of Alma. Since it requires D-pad navigation using a TV remote control, all events are tied to use of left/right, up/down and OK/Enter keys. Smart search feature autofills options based on first two key entries. From there, user can go right and then scroll down options that include OTT & linear shows, film, and actors. Further drilling down will reveal options for specific show episodes from OTT and linear content.
And for a really waaaay back peek to the 2007-2009 iteration of Azzcat Design’s portfolio. Note: includes more identity & print projects. These days, I focus on web work.