Portfolio

A collection of my latest work and accomplishments

Orenda Force

  • TECH USED:
  • projects
  • HTML5
  • SCSS
  • React.js
  • GIT
  • Pattern Lab
orenda force

When: 2016

Contribution: UX Consultant, Architect, Designer, Developer.

Description: Orenda Force is a personal training facility that focuses on individual, custom training programs including, nutritional coaching, physical training and mind performance therapy.

The user experience and interface was designed from feedback and testing we did with the current customer base, along with analytics gathered from the old site. After our UX exercises and wireframes were complete, I used a pattern library called pattern lab to create a web component based modular system. This allowed for rapid, pixel perfect, development. To maintain good performance I chose to use require JS to build and optimize our Javascript files. To render the HTML we used the static site generator, Jekyll. Finishing it off we loaded the site with analytics, including click events all action items and goal conversion tracking, so we can use the data we get back to make further enhancements.

O'Reilly Auto

  • TECH USED:
  • projects
  • PHP
  • HTML 5
  • SCSS
  • Javascript
  • Oracle RightNow
oreilly

When: 2015 - 2016

Contribution: UI Designer / Front End Developer

Description: Our team was tasked to integrate a support forum with live chat features, to an existing web application. This support area would help customers find answers to some frequently asked questions, ultimately reducing phone calls to the call center.

The platform that was chosen was Oracle’s RightNow service. We were given a clean off the shelf installation to customize. We needed the support area to match the current look and feel of the web application and also be responsive. Our biggest challenge was customizing the UI. It wasn’t as easy as adding a new CSS sheet, modifications had to be done to the PHP

First we needed to stop the dynamic injection of some <style> tags that were being loaded after all the CSS sheets. Second we needed to remove all the inline styles that were attributes of HTML elements. Third we noticed that all the CSS written in the stylesheets was targeting ids, which made it difficult to re-use. We ended up removing these. Finally we wrote all new CSS. The new CSS was written with SCSS to make it more maintainable and modular.

Better Homes & Gardens

  • TECH USED:
  • projects
  • OmniGraffle
  • Adobe Photoshop
  • Adobe Illustrator
  • Bootstrap 3
better homes & gardens

When: 2014 - 2015

Contribution: Creative Director, Designer

Description: Better Homes & Gardens - Real Estate brings the core values from the popular magazine to the real estate market.

One of the most innovative features to this UI, is the way we handled our property search filtering. We designed an icon-driven system that was the first in the industry; to let users select their must haves, before finding a home. We knew that when users searched for real estate, they glance at content quick. So when providing the users neighborhood statistics, school information, etc. we served up infographics. These would clearly show the information they were looking for. It is truly a unique experience.

The design process started with stakeholder interviews. We learned everything we could about the brand, the vision and the users. We really wanted all ideas on the table, so after our discovery phase, every designer on the team was tasked to come up with at least two different ‘blue sky’ concepts, followed by presentations from the designers. We made some revisions to what we felt were the best and narrowed the selection. I would present three of these to our stakeholders.

Once we got direction and approval of a concept, the team started working on the product. One team member would work on all the assets, font types, icons, color scheme, etc. Others worked on wire framing new pages. After our wireframes would get approved they would be prototyped, this would inform the client and developers of our interactive design decisions for our production site and took the guessing out of what interactions we chose.

Motive Energy

  • TECH USED:
  • projects
  • HTML5
  • SCSS
  • JQuery
  • Bootstrap
  • Wordpress
motive energy

When: 2014-2015

Contribution: UX Designer / Front End Developer, Wordpress Theme Developer

Description: Motive Energy specializes in batteries and equipment for construction vehicles. Originally they had an overseas agency build a website for them. They liked the overall design of the site but there were some big problems with development. The site was not responsive, so it was not optimized for phones or tablets, it was built entirely with images so it had no SEO value and there was no way for their team to edit the content.

After some consulting we decided that I’d build them a site, based off the design they provided, using Wordpress as the CMS – Content Management System. I started off by re-coding the entire site, building new HTML and CSS. Since they wanted a fairly quick turnaround, we used bootstrap help get us up and running quick. Once the site looked great and responded well I converted the site into a custom Wordpress theme. This gave me full control of how I wanted Wordpress to handle the site, removing any un-necessary widgets. I designed a custom Wordpress admin area that matched their brand and made it easy for them to update their content.

WRP Containers

  • TECH USED:
  • projects
  • HTML5
  • CSS
  • JQuery
  • Bootstrap
  • Wordpress
  • Balsamiq
wrp containers

When: 2012-2014

Contribution: UX Designer / Front End Developer, Wordpress Theme Developer

Description: WRP Containers builds custom sized waste containers for Government agencies and private companies. They have a wide variety of product designed in all shapes and sizes.

WRPC was one of my first clients and I built them a website back in 2007. I had been discussing a potential update / refresh in 2012 and wanted to make the site optimized for mobile. We were torn between a dedicated mobile site or a responsive site. In 2012, responsive was fairly new and less adopted then a m.dot site. The project ultimately got pushed back a year, so we ended up going responsive.

We started the design process by address areas of concern of the original site. We wanted the site to be responsive, but we also wanted it to be easy to update. So we decided that after the markup was complete we would convert the site to a custom Wordpress theme. In about 6 months we went from wire framed concept to a fully functional custom Wordpress site.