Portfolio

I wrote my first HTML tag in 1996. I was in the 11th grade. By the time I finished building my first page, I was hooked. I was fascinated with how the Web and I could respond to each other and change together.

My interest in digital interfaces and how we can improve them has grown from a teenage hobby into a lifelong passion and career. I’m obsessed with the user experience: how we feel about the systems we interact with. I’m on a mission to understand how all kinds of interfaces can best serve the people who use them.

I’ve had amazing opportunities to work for a wide variety of clients. You’re looking at a small collection of some of my favorite projects. I hope you enjoy glancing over these accomplishments as much as I enjoyed the work.

User research

samples

Research-driven design

Direct Energy

2009

My Client

Direct Energy — the largest energy and home services retailer in North America.

My Challenge

Determine the needs of Direct Energy employees for a new social microsite. Design a user interface layout that harmonizes user needs with business goals.

My Solution

I collaborated with the project team to gather information about the company’s employees and their online habits. I challenged my client to think critically about how they wanted users to interact with the microsite. I researched similar employee-focused microsites and social networking sites to establish interface design and usability best practices specific to my client’s needs.

Remarks

The wireframes show exactly what we need. You nailed it!
Mark Singer Program Manager

Tools

  • Axure RP Pro
  • Adobe InDesign

Mental models

SabreSonic Web

2010 – 2011

My Client

Sabre Airline Solutions — the world leader in software solutions for airlines.

My Challenge

Uncover the needs of web appliaction users in interviews and focus groups. Map end user mental models to potential solutions. Communicate findings to a diverse group of internal and external stakeholders.

My Solution

I intially requested input from users via email surveys, but found it necessary to go deeper with extensive one-on-one interviews and focus groups at customer conferences. I organized responses with affinity groupings and constructed mind maps and mental model diagrams to represent users’ thought processes and felt needs. I then aligned software solution components with user needs.

Remarks

I had never seen mental models before, but I am sure we will do this again on our next product redesign. You helped us understand how our customers think.
Sambhaji Patir Solutions Director

Tools

  • Email survey tools
  • Personal interviews
  • Adobe Fireworks
  • Adobe Acrobat Pro

User needs analysis

TAKS-Guide

2008 – 2010

My Client

Strozeski Enterprises, an independent consultancy helping Texas school districts interpret educational assessment data and improve instruction.

My Challenge

Provide one interactive tool explaining state school test results to a variety of user types, including: parents, teachers, school administrators, and journalists.

My Solution

I worked with my client to define user roles and gain insight into how different sets of people who would use the product. We validated our ideas with sample users throughout the rapid design phase. The needs I uncovered by analyzing the audience helped to ensure my design would work well for all users.

Remarks

You did a fantastic job on TAKS-Guide! It looks great and it’s easy to use.
Mike Strozeski Strozeski Enterprises

Tools

  • Adobe Photoshop
  • Adobe Flash
  • Adobe Dreamweaver
  • XHTML, CSS, JS

Personas

Sabre Airline Solutions

2010 – 2011

My Client

Sabre Airline Solutions — the world leader in software solutions for airlines.

My Challenge

Develop research-driven personas for eleven different user groups. Conduct user research with nine airline customers in three continents.

My Solution

I interviewed thirty-six users, asking up to twenty-two questions tailored to uncover specific needs relevant to each user group. I gathere additional data by sending email surveys to another eight-one users. I analyzed the responses looking for themes and common responses. I created persona sheets that gave faces, names, and useful details to surrogate users. These personas became the basis of user stories that drove functional and interface design decisions.

Remarks

It’s so helpful to ask, ‘what would Sam want to do?’ The personas helped the development team focus on building software for real people instead of ourselves.
Talan Srinivasamurthy UI Development Team Lead

Tools

  • Email survey tools
  • Personal interviews
  • Microsoft Word
  • Adobe Acrobat Pro
  • Adobe Photoshop

Use cases

HP ROI Calculator

2009

My Client

Hewlett-Packard — the world’s largest technology company; #9 on the Fortune 500 list.

My Challenge

Convert a user-unfriendly Excel-based accounting calculator spreadsheet into a very user-friendly, Web-based tool for server sales reps.

My Solution

I investigated HP’s sales staff used the existing spreadsheet as a field tool for calculating the return on investment of their clients purchasing a new line of servers. My findings led to numerous enhancements to the design of the Web-based calculator.

Usability

 

samples

Web form design

Internal Revenue Service

2009 – 2010

My Client

The Internal Revenue Service — the revenue service of the United States federal government.

My Challenge

Optimize the user experience of EFTPS.gov, a free service offered by the IRS and the U.S. Treasury. Help business and individual taxpayers conveniently pay all their federal taxes electronically.

My Solution

I applied best practices in the design of Web forms to achieve my client’s highest priority: making the enrollment and payment processes faster and easier to use. I reduced a thirteen page enrollment form down to just three simple pages, without reducing the amount of data captured.

Tools

  • Axure RP Pro
  • Adobe InDesign
  • Adobe Photoshop

Web application usability testing

SabreSonic Web

2011

My Client

Sabre Airline Solutions — the world leader in software solutions for airlines.

My Challenge

Plan and conduct labratory-based usability testing for an online air travel shopping and booking platform.

My Solution

I coordinated the recruitment of a dozen usability test participants with the help of a third party recuiting firm. I helped the product team develop the test plan and identify key user tasks and success measures. We secures the services of a usability testing lab. After a week of observing users and analyzing their feedback, we were able to identify opportunities for improving the usability of the software. This led to targeted interface design improvements that gave users a better experience in the shopping and booking process.

Remarks

This team should be very proud of the work. Overall, the site tested really well.
Brian Sullivan Usability Principal

Tools

  • TechSmith Morae
  • Fully equipped observation lab

Online application form

RoadLoans.com

2009

My Client

RoadLoans.com — a new and used vehicle loan provider for customers with less than perfect credit.

My Challenge

Redesign an online loan application form to reduce time to completion and improve the overall user experience.

My Solution

I helped my client reduce the loan appliation form to less than half of its previous size. Informal testing showed my new layout resulted in a more than 300% efficiency gain in form completion time. Among the many improvements I designed and coded were: better label positioning, smart option defaults, and enhanced error messaging.

Remarks

Your design has taken some clutter out of the way and helped us to see some other issues with how we’re grouping and labeling data.
Bruno Paiva Santander Consumer USA

Tools

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Dreamweaver
  • XHTML, CSS, JS

Information architecture

 

samples

Online marketing campaigns

Bank of America

2009 – 2010

My Client

Bank of America — the largest bank holding company in the United States; #11 on the Fortune 500 list.

My Challenge

Provide information architecture and user experience expertise for email campaigns and landing pages supporting national marketing efforts.

My Solution

I created customer experience maps and annotated wireframes for multiple campaigns aimed at discreet consumer market segments.

Remarks

The user experience is great, thanks!
Pam Asturias Account Executive – RAPP

Tools

  • Axure RP Pro
  • Adobe InDesign

Electronic tax payment system

Internal Revenue Service

2009 – 2010

My Client

United States Department of the Treasury — the executive department of the U.S. government that manages revenue.

My Challenge

Optimize the user experience of EFTPS.gov, a free service offered by the Treasury to help business and individual taxpayers conveniently pay all their federal taxes electronically.

My Solution

I created wireframes, flow diagrams, and other IA deliverables for the redesign of EFTPS. I focused special attention on the design of complex Web forms for enrollment and tax payment submissions.

Tools

  • Axure RP Pro
  • Adobe InDesign
  • Adobe Photoshop

E-commerce platform design

SuperValu

2009 – 2010

My Client

SuperValu — the third-largest food retailing company in the United States; #51 on the Fortune 500 list.

My Challenge

Create site maps, wireframes, and other IA deliverables for a whitelabeled e-commerce platform serving over a dozen retail banners (including Albertsons, Jewel and Save-A-Lot) and thousands of individual grocery retail stores.

My Solution

I worked in parallel with business analysts and stakeholders drafting technical requirements in an iterative pre-design process as I created wireframes, site maps and process diagrams.

Remarks

Looks good, man!
Stephen Thomas Director of User Experience

Tools

  • Adobe Fireworks
  • Adobe InDesign

Marketing microsite

Direct Energy

2009

My Client

Direct Energy — the largest energy and home services retailer in North America.

My Challenge

Provide IA leadership in designing a new market entry microsite.

My Solution

I created a site map and wireframes for this campaign of great strategic importance to my client.

Tools

  • Axure RP Pro
  • Adobe InDesign

Social networking site

tangle.com

2008 – 2009

My Client

tangle — an online community where members connect, share, and grow together in faith and life.

My Challenge

tangle needed information architecture deliverables that defined site navigation, taxonomy, and findability.

My Solution

I created wireframes, flow diagrams, and other IA deliverables, making tangle the most popular faith-based social networking site on the Internet.

Remarks

Ben Judy is an information architecture ninja!
Jason Illian CEO

Tools

  • Axure RP Pro
  • Adobe Dreamweaver
  • Adobe InDesign
  • Adobe Photoshop
  • XHTML, CSS, JS
  • PHP

E-commerce information architecture & design

Costume Hell

2009

My Client

Costume Hell, a Web store offering costumes, accessories, gifts and event tickets.

My Challenge

Help a startup e-commerce site implement a successful design process. Quickly produce design and documentation to guide development.

My Solution

My client approached me simply asking for design mockups. I immediately assessed the need for prerequisite deliverables, including documented business goals, functional requirements, site maps, and wireframes. I delivered above and beyond my client’s expectations, and the site launched on schedule.

Remarks

Thank you for your perfect work. This is thrilling! Infinite gratitude.
Suki Reed Costume Hell

Tools

  • Axure RP Pro
  • Adobe Photoshop
  • Adobe InDesign
  • Microsoft Visio

Interface design

 

samples

Corporate travel booking platform

GetThere

2008

My Client

GetThere — a corporate travel reservation system; owned by Sabre Holdings.

My Challenge

Design interfaces for a complex, whitelabeled travel booking application.

My Solution

As one of a small team of interaction designers, I created high-fidelity mockups and prototypes for complex travel booking Web application. My projects often involved interpreting usability test findings and other human factors data to improve product design. I also coordinated user experience design efforts with developers, product managers and other stakeholders.

Remarks

Ben has a strong Web design and development skill set.
Anita Cator Customer Experience Manager

Tools

  • Adobe Photoshop
  • Adobe Dreamweaver
  • XHTML, CSS, JS
  • PHP

Small business web site

Culligan of Lubbock

2009

My Client

A family-owned franchise in Lubbock, Texas, offering water filtration and treatment solutions for local homes and businesses.

My Challenge

My client approached me with an existing Web site and said: “Take my ideas and make them work. Our marketing materials should be thought through very carefully. Therefore, I will be concerned with every detail including design, content, wording, layout, spacing, colors, etc.”

My Solution

I took my client’s ideas and designed a clean, elegant interface that supported the brand image and marketing strategy. I provided the site with a layout that seamlessly merged static and dynamic content while maintaining a cohesive look and feel.

Tools

  • Adobe Photoshop
  • Adobe Flash
  • Adobe Dreamweaver
  • XHTML, CSS, JS
  • PHP

Interactive report analysis webapp

TAKS-Guide

2008 – 2010

My Client

Strozeski Enterprises, an independent consultancy helping Texas school districts interpret educational assessment data and improve instruction.

My Challenge

Help my client make a huge leap forward in services, from providing a simple PowerPoint presentation to delivering a fully interactive tool for explaining state test results to anyone — parents, teachers, school administrators, and newspaper reporters.

My Solution

I worked with my client to gain insight into business needs and user goals. I then designed and developed TAKS-Guide, a Web application that allows users to view the state assessment reports and interactively determine what each part of each report means.

Tools

  • Adobe Photoshop
  • Adobe Flash
  • Adobe Dreamweaver
  • XHTML, CSS, JS

Prototyping

 

samples

High-fidelity prototype

Best Buy

2010

My Client

Best Buy — consumer electronic retailer with over 1,150 stores worldwide.

My Challenge

Create a high-fidelity, click-through prototype of a custom retail marketing Web application… in less than three days!

My Solution

I worked closely with a project team to rapidly generate dozens of pixel-perfect mockups of a Web-based marketing workflow and asset management tool. I created clickable hotspots on the mockups and collaborated with a member of the sales team who would demonstrate the prototype to the client.

Remarks

This is really good work done on a very short timeline. The entire team appreciates your dedication and ‘can-do’ attitude.
Kevin Kelley Technical Producer – RAPP

Tools

  • Adobe Photoshop
  • Adobe Dreamweaver
  • XHTML, CSS

Clickable wireframe prototype

U.S. Treasury

2009 – 2010

My Client

United States Department of the Treasury — the executive department of the U.S. government that manages revenue.

My Challenge

Create a clickable, low-fidelity prototype of a user experience optimized layout for a tax payment system enrollment form.

My Solution

After creating an initial round of static wirefames, I used Axure’s rapid prototyping tool set to generate a browser-based, interactive prototype. I used my prototype to demo the new interface to my client via remote desktop sharing. My client loved it — seeing the design “in action” helped them better understand how my interaction design enhancements would lead to a vastly improved user experience.

Remarks

I love you Ben Judy! I like the way your mind works.
Tami Thomas VP Account Director – RAPP

Tools

  • Axure RP Pro
  • Adobe InDesign
  • Adobe Photoshop

UI code

 

samples

Global markup and CSS standards

Travelocity

2005 – 2008

My Client

Travelocity — a leading provider of consumer-direct travel services for leisure and business.

My Challenge

Enforce coding standards for a diverse team of HTML and CSS developers. Maintain the Travelocity global CSS architecture.

My Solution

As a member of the design team at Travelocity, my skill and passion for clean, semantic, standards-compliant UI code caught the attention of my managers. I was quickly promoted to the position of User Interface Technologist, where I took the initiative to document new standards for markup and styles for all of Travelocity’s Web properties. My code reviews became well known for thoroughness and for objectively demonstrating the value of well-written code.

Remarks

Ben has been very instrumental in helping the design team focus on a process. His documentation has been useful and very clear.
Marla Scott Senior Designer – Travelocity

Tools

  • Adobe Dreamweaver
  • Adobe Photoshop
  • XHTML, CSS, JS
  • Tidy W3C Validator
  • Microsoft Word

HTML, CSS & JS

Santander Consumer USA

2009

My Client

Santander Consumer USA Inc. — one of the fastest-growing companies in the automotive finance sector.

My Challenge

Write cross-browser compatible, UI-layer code for an interactive vehicle make and type selector to be integrated into a car review video search tool.

My Solution

I took my client’s design layout and quickly determined how the vehicle selector should function. I hand-coded W3C valid XHTML and CSS, and leveraged the jQuery javascript library to handle UI functionality. I returned perfect code to my client ahead of schedule and within budget.

Remarks

This is perfect! Thanks so much for the quick turnaround, Ben.
Bruno Paiva Santander Consumer USA

Tools

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Dreamweaver
  • XHTML, CSS, JS

SEO optimized marketing

Best Technical Resources

2009

My Client

Mike Hanes — IT staffing consultant and founder of ProVisionTech.

My Challenge

Rapidly design, develop and launch a working “squeeze page” to generate contacts and potential sales leads.

My Solution

I interviewed my client to assess his business goals. I helped him evaluate online tactics and select an approach to building his business that worked with his budget and timeline. I then hand-coded an SEO-optimized, fully functional contact capture form.

Tools

  • Adobe Photoshop
  • Adobe Dreamweaver
  • XHTML, CSS, JS

Design process

 

samples

User experience education

RAPPux.com

2009 – 2010

My Client

RAPP — a traditional, offline marketing agency trying to reinvent itself as a leader in the digital arena.

My Challenge

Introduce the agency to a new way of working. Explain basic Web design & development processes and integrate them into the existing agency ecosystem.

My Solution

I quickly designed and launched RAPPux.com, an internal site detailing the activities, roles, and deliverables necessary for optimal digital design process.

Remarks

Great job! Clearly your expertise shined through.
Tracy Brown V.P., Managing Director RAPP Dallas

Tools

  • WordPress
  • Adobe Photoshop
  • Adobe Dreamweaver
  • XHTML, CSS, JS
  • PHP

Presentation” “User Experience and Information Architecture”

RAPP

2009

My Client

RAPP — a traditional, offline marketing agency trying to reinvent itself as a leader in the digital arena.

My Challenge

An informative, fun presentation introducing key UX and IA concepts to the uninformed.

My Solution

I wrote and delivered a 22 minute overview of user experience design as a discipline. I addressed key aspects of UX, cleared up some misconceptions about IA, and stressed the importance of an efficient, user-centered design process. Watch on Vimeo: http://vimeo.com/6236289

Remarks

It’s looking awesome! Nice work.
Stephen Thomas Director of User Experience

Tools

  • Adobe Photoshop
  • Microsoft PowerPoint

Digital design process

rethink books

2009 – 2010

My Client

rethink books — a startup company aiming to revolutionize the publishing industry and change the way people write, read and share books.

My Challenge

A comprehensive digital design process uniquely tailored to the goals of the startup company and the business environment of the book publishing industry.

My Solution

I created a series of deliverables that defined the activities, roles and deliverables needed to build the rethink books system.

Tools

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe InDesign

Requirements documentation

rethink books

2009 – 2010

My Client

rethink books — a startup company aiming to revolutionize the publishing industry and change the way people write, read and share books.

My Challenge

Requirements documentation to define business goals and site functionality.

My Solution

I began writing a business requirements document by inteviewing key stakeholders and organizing the information in an easy to read BRD format. I wrote user stories and functional requirements that supported the business goals.

Tools

  • Adobe Illustrator
  • Adobe InDesign
  • Google Docs