Responsive Web Design
CrowdStreet Site Redesign & Build
First round of low-fidelity, mobile wireframes to redesign home site. Original site grab shown on left. Includes mobile menu action prototype.
Second round, now including desktop width.
High fidelity mobile mockups including color palette edits and layout alternatives after collaborating with stakeholders.
The original intent of this project was to refresh the existing marketing home page. However, the old site had been cobbled together by various engineers & contractors, resulting in a fragile code base. There was serious technical debt which slowed down the site. It was visually inconsistent with 4 sans serif fonts, no standard font-size, line-height or baseline grid. Most importantly, as a custom Django build, all content edits required Engineering to deploy. This seriously hindered Marketing from getting updates online in a timely manner. It was time for Marketing to have its own shiny, new CMS.
And so, after researching CMS options, we settled on WordPress. I was then tasked with the site design, build, deployment & maintenance. Phew!
As design & development continued, the exec team concluded that as a company, we had 2 different audiences:
- Sponsors–those businesses who licensed/used our SaaS application (B2B), and
- Investors–those individuals who used the SaaS app to invest in offerings (B2C).
Thus was born our WordPress Multisite:
- CrowdStreet Home
- CrowdStreet Business Solutions for our Sponsors, and
- CrowdStreet Marketplace for Investors.
Articles content from former site was exported to WordPress, retaining URL structure and SEO value. The new site allows for much better filtering options and also works on mobile (old site did not).
Months later this page was redesigned to reflect its change in purpose. It now functions as a portal for Users to select the Investor (B2C) or Sponsor (B2B) path.
CrowdStreet Business Solutions
The initial build of this page is shown by leftmost mockup with other layout options to right. After working with exec team to simplify the message, we arrived at a hero video background with much more streamlined value statement.
The initial implementation (left) was preferred by executive team because it emulated a pattern they liked. However, we had far too much content to display in that fashion. After a couple weeks of usability issues (felt by execs) I was allowed to refactor the content into the accordion/tabs pattern now in use. This was truly a case of needing to build it the wrong way first to justify building it in a more user-friendly way later.
Round three. Clarity of purpose, and separation of this landing page for new Investors vs. Investor Center for current Investor Members.
Walker Tracker Admin Redesign
First round of wireframes, with help modals for primary actions.
Style Tiles showing 3 options for general styling.
Mobile mockups showing home page and sliding notifications, navigation options, third-party help plugin.
Larger format mockups with color options for menus & notifications.
Original view of admin area, based on 960-grid fixed layout (non-responsive).
The client needed the the UI of their application redesigned and simplified because their users were struggling with the app. The goal was to streamline the flow, remove unnecessary steps/pages, better integrate help docs/videos, and to reduce phone-support requests from customers. In addition, the old version of the application was not responsive or touch-friendly and needed styling upgrades. After working with client to identify pain points, accessibility problems, etc., I developed clickable wireframes (Adobe XD). These wireframes illustrate an improved user flow 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 moved to high-fidelity mockups, using the selected styling options to demonstrate mobile and tablet/small desktop. Using Sketch & Adobe XD, some of the mockups were output as a simple clickable prototype. See links below to view those.
Visit clickable mobile mockups.
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. :(
This responsive Ruby on Rails site documents using the Wurl API for developers. Utilizes Foundation SASS framework.
Visit Wurl Developers.
This responsive application was an early iteration of Wurl’s apps for following & watching OTT video content. It was built with Foundation SASS framework. Mobile version (prototype) includes off-canvas sliding panels.
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.
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. 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. 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.