The Work of

John W. Bentley|

Tripwire

Webpages / Design

Pueblo Unido

Webpages / Design

Staff Corner

Web / Research

Next

Webpage

Style Guide

Webpage

Cocooned

Game / Mobile

Tractor Tipping

Game Design / User Testing

Project Warp

Game / Web

Tripwire

Development

Development

At Tripwire, I implemented a brand new look and feel for the corporate website.

Homepage

As part of the new look and feel update, we replaced the old carousel look with a fresh background image, font updates, color enhancements, and the use of material design cards to promote lead-generating assets.

View Page

Product Index Page

I designed this page from the ground up, based on user wants and needs for product information. We are showcasing three core products here, with their features listed. Below the 3 main products, we list other products that don't pertain to 70% or more of users.

View Page

Tripwire

User research

User Research

With this brand new design, we wanted to optimize every page for conversions, where leads would be generated by on-page form fills. I used Google Analytics, Google Optimize, CrazyEgg and Moz to track user behavior and help guide design decisions.

In order to create new designs we could experiment with, I drafted problem statements and identified areas of improvement for pages with high bounce rates low conversion numbers. From there, I created physical wireframes of new user experiences, and then created full-scale design mockups in Photoshop. These mockups would then come to life with Google Optimize.


Compliance Solutions Page (before) Tripwire Products Page
Compliance Solutions Page (after) Tripwire Products Page
Compliance Solutions Page

Through my research on user behavior flow throughout the website, I noticed that this page had a 90% exit rate. To solve this issue, I drafted a brand new design after discovering that our page went against Hick's Law, a key UX principle. The new design clearly improved the rate of users who landed on a compliance solution page from this index page.

View Site

To implement brand new designs, I wrote code in CSHTML (Razor), CSS, JS, JSX (React) and occassionally C#. I then built out front-end components using Sitecore, which could be edited by content authors.

The results from the website were measured against key performance indicators, such as number of page views, qualified leads, and generated pipeline.

Pueblo Unido

Development

Design and Development

As a volunteer for the non-profit organization Pueblo Unido, I designed a brand new logo, and created their very first website.

Homepage

Pueblo Unido's home page speaks to clients, donors, and volunteers on what Pueblo Unido does, and how anyone can get involved. The entire site has a Spanish translation, which was completed by a dedicated translation team.

View Page

iD Tech

User research, development, and personas

User Research

Development

Personas


iD Tech's mission is to provide every child the opportunity to learn technology. As part of that mission, it is important that every client has a smooth experience on the website. Seriously, who would send their kid to a tech camp if they couldn't use the website?

To better understand our user base, I collected data based on what clients thought about the site as a whole.

iD Tech User Data
Survey Question Delivered to iD Tech Clients

Designed to quickly gather lots of feedback on the iD Tech website.

In addition, I conducted several in-house user tests to observe emotions from clients while registering through the website. We also took note of any bugs that came up during the process.

iD Tech User Testing

Based on these user tests, we created a few personas to better understand what each of our unique clients are like, and how we should design for them.

Lisa's Persona
Persona Document for iD Tech's Main Website

Created after a series of interviews with clients of iD Tech.

Welcome Packet

For this project, I modified the HTML, CSS and jQuery of an existing .NET/.aspx project base.

iD Tech Welcome Packet Screenshot
GIF
Welcome Packet

Webpage

/Next

For this project, I collaborated closely with a graphic designer to ensure that the front end code was pixel-perfect based on the designs. I also implemented additional bits of functionality including the side nav.

/Next

Webpage

Developed using HTML, LESS, JS, and jQuery. Managed using npm and Git.

Visit /Next

Staff Corner

Staff Corner is a web application that allows iD Tech instructors to view their tasks, guides on running camp, activities, and more. In order to find out what features were essential to instructors, I interviewed several instructors and created personas based on them.

Chris' Persona
Persona Document for Staff Corner

Created after a series of interviews with summer staff at iD Tech.

For the development of Staff Corner, I developed new features, fixed bugs, and maintained production servers. I used Wordpress to maintain the content, Ajax to call the database API, and PHP to modify some back end functionality.

iD Tech Staff Corner Screenshot
GIF
Staff Corner

Style Guide

The iD Tech Style Guide was designed and built for all employees at iD Tech, so that they can easily view our branding and logos.

For this project, I developed an early prototype that was later made pretty by our graphic designer. I also mplemented her cosmetic updates using HTML, CSS, and JavaScript.

iD Tech Style Guide Screenshot
GIF
Style Guide

Webpage

View Style Guide

Health and Safety Form

For this project, I worked with Health & Compliance stakeholders to make a user friendly form with a mobile-first design.

iD Tech Health and Safety Form Screenshot
GIF
Health and Safety Form

Web design for required form

View Prototype

Grooves & Grinds

I crafted this project in my spare time. I designed and protyped the home page using Sketch and then coded the website using HTML and SASS.

Grooves & Grinds
                      Screenshot PNG
Grooves & Grinds

Coffee shop and vinyl retailer

View Site

The Spot

I crafted this project in my spare time with a couple of friends. I designed and protyped the home page using Sketch and Invision.

The Spot Screenshot
GIF
The Spot

Freelancing / forum site

View Prototype

Cocooned

Prototypes, development

Cocooned is a top-down, 2D, puzzle adventure game designed for mobile devices. Follow Kipcha on her quest through beautiful landscapes across 15 different levels!

Designed using Balsamiq mockups. Developed with Corona SDK.

To start, we developed a paper prototype of the idea, which we tested amongst 15 or so game developers and friends.

Cocooned Paper Prototype

From there, we created several wireframe prototypes to test different ideas for various levels and mechanics.

Cocooned Wireframe

After figuring out what mechanics we wanted to include, we set to work on building out each of the levels individually. I implemented most of the levels, and programmed the interactions between the player and most of the in-game objects.

Cocooned Tutorial

After months of user testing and iteration, we released the final version on the Amazon Web Store, which you can download today!

Cocooned Screenshot
Cocooned

Download

Tractor Tipping

Prototypes, user research and development

Tractor Tipping is a math learning game made for kids ages 4–6, designed to be played on LeapFrog devices.

The game was built using Actionscript in a team of 4. I worked on the game design, which included writing a game design document and mocking up levels.

Tractor Tipping Game Flow
Tractor Tipping Prototype

During the project, we conducted a number of "kid tests" with boys and girls ranging in age from 4–7. In these tests, we uncovered a number of different bugs, as well as areas where younger children would get stuck due to the difficulty level.

Kid testing

After many iterations on the game as a whole, we ended up with a solid version of the game that exemplified the core game loop.

Tractor Tipping Screenshot
GIF
Tractor Tipping

Project Warp

Development

Project Warp was developed in a team of 4 using the MelonJS engine and HTML. I programmed gameplay, designed and implemented levels, and helped to create the game design document and storyboards. The game was awarded the Peer Choice Award at UC Santa Cruz.

Project Warp Screenshot
Project Warp

Web based game

Play Now