HTML
+
CSS
+
Javascript
February 16, 2017
Why is it especially useful for your UI Developer to have a background including games and advertising?

My history in games and advertising has given me the knowledge of how to make an experience engaging while adhering to brand consistency as well as driving conversions. On a very basic level, avertising is designed to grab people's attention and then deliver an experience. And games are the most interactive experience that takes people from whatever they where doing in real life and puts the player into a magic circle transporting them to a whole new world where each new power up, level progression, and point system that follows a style guide and compliments content. My designs give meaningful play leading to in-game conversion of a player to a customer. In this post, I use a B-to-B platform to show my thought process of improving an existing project list and detail view. more...

Identifying the KPI (Key Performance Indicator) is essential in a B-to-B platform. In this case and in this view, Portelo focuses on three important questions for project management: who the client is, where the project is in time, and budget.

The existing project management screen shows a list of projects with numerous columns of information. What is the most useful immediate information that managers want to see when they glance at this screen? Right now, everything has an equal weight.



In an effort to make the project management screen more useful, a project progress bar is including in the space provided for the status. This view quickly let's the user know in a visual way what the status is of a project. But what can make this view even more engaging?



By going back to my experience in game design, having the projects laid out in a grid view with each project being its own card with attributes, seems like a good idea to me. But I'd like to know if users think it is a good idea. The card is designed to easily recognize a project by the brand, then tell the viewer how soon and how much points they can get. What happens when a card is chosen?



Here is an existing project detail screen on the left, and an improved design on the right.



All the viewer really needs to know is what to do next. Using Portelo's existing color scheme, the call to action is shown in the upper right which when clicked will lead to the project progressing. The current project progress status is in the upper left with three sections clearly shown below basically showing the who, what and when of the project.

References:
1. Judy Shapiro of EngageSimply and her post on How to Close the B-to_B Ad-Tech Gap
2. Wikipedia's reference of the Magic Circle
January 20, 2016
Wordpress Customization Methodology: Beyond plugins and a theme's built-in customize panel

You have a Wordpress site that needs to be updated to be relevant again. You've tried other themes and plugins but none of those get you what you need. Why rebuild the whole thing when you can have someone go in and spend a minimal amount of time making some adjustments to get you back up to speed?

Let me help you out. I have a methodology that starts with minimally invasive techniques that will not leave the next person working on the site wondering what work was done and how to make further adjustments if needed. Find out how I do this...
November, 2015


TopicB/ActiveCast is a company that connects people to topics through chat and voice. I was a founder that used my developer and design skills to prototype MVPs. The ultimate goal was to make a platform for B-to-B service.

My Role: Founder, Developer/Designer
  • Creating a specifications document covering every aspect of the platform and app.
    Download specs here.
  • Quickly prototyping and designing for proof of concepts
  • Integrating patented video, voice, and chat technology into the prototypes for sales accelerators and investor pitches
  • Developing chat plugin for WordPress: TopicB Wordpress Plugin
  • Designing and developing the Front End and UI for services with lean methodology and current design trends
  • Project management including definition of scope, time, and budget
  • Hiring and firing "customer development expert"
  • Built an ActiveCast platform with customer service analytics
    using HTML/CSS/Javascript/PHP/MySQL at melonmoda.com


November, 2015


I helped develop a dozen mini game arcade and meta game components for foopets.com

Spot the FooPet

Test your short-term memory!

Dog Pile

Test your aim and coordination with this fun, block stacking game.

Petris

Rotate and move the falling shapes to create and clear full lines.

Toy Trouble

Knock out the toys before they drop into the drain.

YarnBarn

Knock away the balls of yarn before they reach the bottom.

Throw the Dog a Bone

Test your aim and timing with this fun game.

Wind Up Mix Up

Sort the windup mice to the matching side of the room.

Breed Speed

Match the correct spinning names and breeds with speed!

Foozle Tiles

Solve the puzzle by swapping tiles to form a picture.

Pet Man

A re-interpretation of the classic Pac-Man!

Circle The Cat

Don't let the cat get away!

More Games
This is an example of mobile game development. For this casino slots project, I created everything including the following:
  • UI
  • Development
  • Design
  • Graphics
  • Animation
  • Point System


LED lighting is a rapidly evolving technology that produces light in a whole new way. It surpasses the quality and efficiency of existing lighting technologies, such as fluorescent and incandescent. The following is a storyboard showing the advantages of LED rising above the rest. Click on the storyboard to see the actual ad that I designed and developed from these storyboards.

The final animated ad for the previous storyboard can be seen here.


This storyboard illustrates how an LED nightlight looks in context and its value.
The final animated ad can be seen here.
More brands that I have worked with.