The Work of

John W. Bentley|

Staff Corner

Web / Research

Next

Webpage

Style Guide

Webpage

Cocooned

Game / Mobile

Tractor Tipping

Game Design / User Testing

Project Warp

Game / Web

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