Ben L. Williams
UX Designer / UI Developer

Samples (through time)

A collection of my web design work over the past few years can be found below.
Note: I've been doing this for a while, so some links to (once) live samples may be broken, or the design and content may have changed from the screen shot.

Verizon (2014 - Present)

Lead HTML (UI) Developer for Verizon's Wireline consumer facing self-help portfolio and workforce facing web applications.

Verizon Responsive Framework (VZRF)

My main initiative for 2014 was to establish and document standards to allow Verizon's web presence to shift towards a responsive web model. This was accomplished through the creation and maintenance of the Verizon Responsive Framework (VZRF).

My Role:

  • Author and Maintainer of Verizon Responsive Framework (VZRF)
  • Documentation for all components/widgets VZRF
  • Uses Sass for Modularity of components/widgets and easy extendability/customization per project
  • Established HTML/CSS standards based on OOCSS and BEM naming convention.
  • Established high level JavaScript patterns used for VZRF.

Team Management

As lead HTML Developer for the User Experience & Design group, I am responsible for the leadership and direction of the HTML developers.

My Role:

  • Assist in managing projects and assignments across onshore and offshore team members/contractors.
  • Teach standards to onshore and offshore team members/contractors.
  • Code reviews and audits of team members' code.
  • Established used version control system using TFS.
  • Established policies for hand-off of rapidly updated code to back-end development teams.
  • Conduct interviews for UI developer contractors and new employees.

CBRE (2012 - 2013)

At CBRE, I worked as a UX/UI Senior Application Developer on the Global LaborView application. The application delivers leading demographic/economic indicators coupled with labor market and business intelligence on locations/markets across the US. Put simply, the application, coupled with CBRE Consultants, can help save companies save in labor costs by choosing the right location to set up shop.

CBRE Requested I not show any screen shots of the application, but trust me … it's a beautiful application.

Global Labor View Application

I was responsible for all HTML, SASS/CSS, user testing of the application, and played a shared role in the design and JavaScript Coding.

My Role:

  • HTML
  • SASS/CSS3
  • jQuery/JavaScript
  • User Testing
  • Graphic/UI Design

Genares (2011 - 2012)

Genares is a small online hotel reservations company that brought me on as their front end web designer/developer. Most of my work there involved making enhancements to their existing booking engine. However the more interesting things I did involved proofs of concepts and special assignments, a couple of which are shown below.

Easily Themed Booking Engine

Booking Engine Default ThemeBooking Engine Default Theme

The Genares booking engine had limited theming ability. Only a logo and a few colors could be changed, along with an optional custom header and footer that wrapped around the static booking engine content area. I suggested that if only the HTML were re-written from its largely table-based layout to some well thought out HTML, we could create a more custom look and feel for each customer. This would create a much less jarring effect that happened when a hotel guest went from the hotel's website to the Genares Booking Engine.

When opening this Proof of Concept, you will see a "theme switcher" in the top left corner. This will swap the CSS and images used, but keep the HTML exactly the same, showing that if the Booking Engine's HTML structure was updated, customers could be offered much more flexibility in customizing the Booking Engine to look and feel more like their own site.

View the Booking Engine Theming POC

My Role:

  • Creation of "Themable" HTML
  • Graphic Design
  • CSS


Super Slider jQUery Plugin

Genares management was preparing to make a pitch to Hard Rock Hotels and asked me to create a fun presentation tool that could be shown online. They ended up going with a PowerPoint presentation, but I still got to make this jQuery Plug-in that I called the super slider.

Basically it builds a nice slide show from a definition list and has several customizable options. It's goals were to be backwards compatible to IE7 and also work on a touch device. Navigate through he slides using the arrow keys, or by clicking on things.

Super SliderView the Super Slider

My Role:

  • Graphic/UI Design
  • jQUery Plugin Development
  • HTML
  • CSS3

Rivalroo (2009 - 2011)

Rivalroo.com is a one of a kind social tool that allows you to create your own debate and host it on your own website. I was responsible for much of the UI design and JavaScript, and all of the HTML/CSS. It started out as a sports site, which is still running at sports.rivalroo.com which is no longer up, but you can see a few screen shots of some of the prototypes below.

Rivalroo.com is still up and running, although buggy last I checked

Rivalroo Slide ShowView Rivalroo Sports Screen shots

www.rivalroo.comVisit www.rivalroo.com

My Role for both sites:

  • Information Architecture
  • Graphic Design
  • User Interface Design
  • XHTML
  • CSS
  • jQuery powered user interface

eBridge (2011)

Rivalroo's (see below) owner had several contacts who needed web development services, so we started a side project called eBridge to handle custom web development needs. The site is no longer up, but I have a copy of it up at ebridge.benlwilliams.com.

ebridgesites.comVisit ebridge.benlwilliams.com

My Role:

  • Information Architecture
  • Graphic Design
  • Logo Creation
  • User Interface Design
  • HTML5
  • CSS3
  • Content Writing
  • jQuery / JavaScript

Pure Salon(2011)

A site I built for a local hair salon located in Las Colinas, TX. They wanted a simple site to showcase their services, staff, and natural products. They also wanted to be able to make regular updates themselves so I integrated Perch CMS and trained the owners in its use.

puresas.comVisit puresas.com

My Role:

  • Graphic/UI Design
  • HTML
  • CSS
  • jQuery / JavaScript
  • Perch CMS
  • A little PHP to handle contact form

Fast Armadillo (2011)

Some people I worked for in the past started a full service web development company called Fast Armadillo. I performed front-end web development services for them on a regular basis. The following are a few examples of website built from my HTML/CSS/JavaScript, most of which I also created DNN Skins.

Meredith & Associates (2010)

Meredith & Associates is an accounting firm which had a website that needed some SEO work and a facelift. The entire site needed to be built from the ground up, much of the content was copied from the original site, but was reorganized and optimized to be more people and search engine friendly. Soon after the search engines had a chance to crawl the page, web traffic nearly doubled. An increase in new clients came from the website, and they even had new graduates calling in, offering to work for free, just to get real-world experience in accounting.

ebridgesites.comVisit meredithcpas.com

My Role:

  • Information Architecture
  • Graphic/UI Design
  • HTML
  • CSS
  • Content Writing
  • jQuery / JavaScript

Puritan Life 2009

Puritan life called upon my services to re-vamp their mediocre web presence. They were running an out-dated and poorly implemented DotNetNuke site that needed a massive overhaul and brand new identity. A new look was created to properly represent the professionalism of the company. New sections of the site were developed to target two specific audiences: a "Products" section for customers who knew exactly what they wanted, and a "Solutions" section for those who were looking for answers general financial needs.

Special attention was also given to the Career section of the website to help boost agent recruitment, including placement of a promotional video, online applications, an agent testimonial section, and benefits to working at Puritan Life.

www.puritanlife.comVisit www.puritanlife.com

My Role:

  • Information Architecture
  • Graphic Design
  • XHTML
  • CSS
  • Custom DotNetNuke Skinning
  • Custom JavaScript powered content switchers
  • Custom JavaScript powered banner switcher
  • Content placement and editing
  • DotNetNuke Training

Worlds of Wow 2009

Worlds of Wow a company that creates themed and play areas for church children's ministries. They hired me as a freelance web designer to create a new website for them. Their goal was to have a site that balanced professionalism with a children's entertainment look/feel. They also wanted a better tool to provide a showcase of their inherently visual product.

www.worldsofwow.comVisit www.worldsofwow.com

My Role:

  • Information architecture
  • Graphic design and layout
  • XHTML
  • CSS
  • A dash of PHP

Ingen Systems 2008 - 2009

I served as the Web User Interface Engineer at Ingen Systems. While working at Ingen, I took part in the development of dozens of DotNetNuke driven websites. Following is a small sampling of the sites I created with the Ingen Systems team. My role in each site was slightly different but all included some mix of the following:

AirHogs Baseball
AirHogs Baseball

Camp Loughridge
Camp Loughridge

Corepower Yoga
Corepower Yoga

Cedar Creek Church

Know The Cause
Know The Cause

Grand Prairie ISD

South Grand Prairie HS
South Grand Prairie High School

Dubiski High School
Dubiski Career High School

Summerside Press

Al Boenker Insurance (2007 - 2008)

As the sole Web Developer for Al Boenker Insurance, I was responsible for creating and maintaining all of the web sites owned by the company.

ThanksAl.com

This is the screen shot of main public web site for Al Boenker Insurance. It remained the site for about 4 years before being redesigned after I left.

www.thanksal.comVisit www.thanksal.com

My Role:

  • Information architecture
  • Graphic and layout design
  • XHTML
  • CSS
  • PHP
  • Dynamic forms using JavaScript
  • Flash video
  • Search engine optimization



Empower Insurance Group

I designed two web sites for Empower. The design for EmpowerIns.com (auto division) was an original creation. The Design for EmpowerBrokerage.com (health division) was based off of the look of their insurance software in order to maintain a consistent look and feel that their agents would be used to.

EmpowerIns.com

This is the auto insurance web site for Empower. The site has been updated since I last worked on it, but I have a copy of the home page up on my site.

www.empowerins.comEmpower Home Page

My Role:

  • Information architecture
  • Graphic design and layout
  • XHTML
  • CSS
  • PHP
  • Dynamic forms using JavaScript

EmpowerBrokerage.com

The screen shot is the site I designed for life and health insurance web site for Empower. It has since been changed.

www.empowerbrokerage.comVisit www.empowerbrokerage.com

My Role:

  • Information architecture
  • Graphic design and layout
  • XHTML
  • CSS
  • PHP
  • Dynamic forms using JavaScript

Sabre Holdings (2007)

Most of my work at Sabre Holdings involved information architecture and turning Photoshop files into HTML/CSS.

WorldWideAir

This is a fictional airline's home page that was created to demo a Sabre Airline Solutions Flight scheduling program.

worldwideairVisit WorldWideAir Demo

My Role:

  • HTML
  • CSS
  • JavaScript

MRO Marketing Campaign

This campaign involved making an HTML email, as well as micro-site. The email was designed to work on all of the most popular e-mail programs and links to the micro site.

MRO micro siteVisit the MRO micro-site
Visit the MRO email version

My Role:

  • Flash banner concept
  • HTML
  • CSS
  • PHP
  • E-mail compatible version

AirServ Marketing Campaign

The AirServ campaign had a focus on the new meal optimizer program for airline meal planning. Like the MRO campaign, this site also has a micro-site and email version.

AirServ Micro SiteView the AirServ micro-site
View the AirServ email version

My Role:

  • Flash banner concept and creation
  • HTML
  • CSS
  • PHP
  • Email compatible version

Sabre.com Redesign

It was discovered that most people who went to sabre.com were really looking for sabre-holdings.com. Therefore, the look of the sabre.com home was redesigned to look more like sabre-holdings.com.

sabre.com resesigned home pageView the redesigned home page of sabre.com

My Role:

  • CSS
  • HTML

goodCo. Fictional Company (2007)

Below are different home pages I made to showcase the different design possibilities available to a single brand. View all three home pages by clicking on their "view" link or screen shot.

goodCo. "Three Columns Strong"

Three Columns StrongView "Three Columns Strong" Home Page

My Role:

  • Graphic design and layout
  • XHTML
  • CSS
  • Javascript

goodCo. "Boldness"

BoldnessView "Boldness" Home Page

My Role:

  • Graphic design and layout
  • XHTML
  • CSS

goodCo. "Classic"

ClassicView "Classic" Home Page

My Role:

  • Graphic design and layout
  • XHTML
  • CSS

goodCo. "Cool Biz"

Cool BizView "Cool Biz" Home Page

My Role:

  • Graphic design and layout
  • XHTML
  • CSS