My Name is Nathan

I am a Super Designer This does not mean I wear a mask and cape, it means I am a designer who knows code! I specialize in graphic design for web, though I have a background in print as well. If 2D art can be made on a computer, I know how to do it. I have also had a quick trip through 3D modeling and animation. This entire website was handed coded by myself using a mixture of HTML, CSS, jQuery, PHP and mySQL. The sections you are viewing are all driven by PHP with a mySQL database, so later, I can add my experience with my future careers.

As a quick rundown, I have varied experience in Graphic Design for Print, Graphic Design for Web, Web Programming, Direct Marketing, B2C Marketing, B2B Marketing, Video Game Conception, User Experience and User Interactive Experience among many other things! I enjoy creating designs that speak to people and that not only effectively communicate strong messaging but invite the person in by look and feel as well.

 

MyBattleReport Personal Site

My Battle Report is an ongoing project that I have been challenging myself with  This pet-project of mine started close to three years ago. I started this site because I liked an 'analogue' table-top game called Warhammer 40k, though I felt it needed something more. With the group that I played with, many of the enthusiasts wanted to share their mini table-top wars with other people. Since this game is a physical game such as Chess (Physical meaning not on a computer), there was nothing like this out there. I set out to create a sharable battle report web app. Many of these users belonged to many different forums. These forums all had places to put a signature. My goal was to create an image that would show off their army, but would update every time they wanted to update it. And here was born www.mybattlereport.com

At first I did not know what I was really doing. In fact, I actually taught myself PHP and mySQL BEFORE I knew how to program in the front end! With help from my co-worker, I started to learn and teach myself all the coding I needed for this project. Two years ago, I launched the first rendition of MyBattleReport. Recently, I have decided to reface the entire website and re-write the entire thing by hand from the ground up. This task seems daunting but I believe it is great fun to see something come to life and it really allowed myself to challenge ...Myself...

I had heard a new edition of the major rulebook was due to come out in the summer (this past June). So, I started to quickly write up a new login (which would piggy-back off of the old login script of PHPBB) and Registration script (which I wrote from scratch), adding in many personal touches that I believe the web should adopt; such as "Slide to Register" and no "repeat Password" field. After I wrote this login/register script, I got to work creating a Question and Answer page that works similar to www.stackoverflow.com. Users can search for their question, if it's not there, they can ask it and other users can answer. Simpler said than done!

I wanted to make my site different from everything else. I think as a good designer and a good UX expert, that's expected. I wanted something a bit different. I even toyed with the idea of a diagonally scrolling website. I'm glad I gave that up. There's a point where a "Feature" becomes a gimmick (Hello Paralax scrolling and 3D television!). I set out to make a "Card" system for this site. Basically a modular site that would react with the browser. I think 'responsive' design is on the border of feature and gimmick, but I believe it can stick around where it's done right.
If you go to The Collective on My Battle Report, you can see what I'm talking about. I have not seen this done anywhere. A card tiling system, such as Pinterest, with responsive card sizes and responsive number of columns. Because I haven't seen this anywhere, I had nowhere to learn. You can't just "float:left" all of these cards because of the varying sizes. I wrote my own placement script that would tell each card where to go. Go ahead - try it out. Resize your browser and you'll see!

 

Walmart: walmartmoneycard.com

Walmart - Save Money, Live Better.  Unfortunately, I can not share any of the designs I have done or helped produce for Walmart yet, All of our projects are going through the system. One of them is very close to completion and I will be posting it here. What I can show you are a few workflows that I worked on to streamline and solidify the ideas that our UX team had come up with.

Our team came into the Walmart project the same as any other at Green Dot; knowing that we need to make a rat's nest into a mansion. This site, as well as the other Green Dot products, had grown too fast for the technology to keep up. Before the UX team was created, any problems that occured were handled by anyone who could talk to the IT department. This lead to a nice shoe-horn effect accross the entire site. from the inconsistent language, to the inconsistent design and flows, Everyone was just doing their part to grow the web portion as quickly as possible.

We will soon be able to see a fresh landscape over these products. Our designs and ideas are being implemented as we sit here reading this.

 

GoBank: gobank.com

GoBank - It's about time.  Yup, it sure is! GoBank is the latest and greatest invention for banking. Ever heard of Chase? Bank of America? Wells Fargo? Well, those are all old fashioned. Keep them if you please. If you're looking for a fresh approach to banking, GoBank is where it is. GoBank is a new product out that is completely mobile banking with a new set of fees that go unnoticed. What fees? When you sign up, you'll be able to Pay What You Want. As little as Zero Dollars per month.

GoBank is an awesome project where we, as UX designers get to stretch our brains and really figure out a fun, new innovative way of doing anything. We have an extremely talented team of developers. We can throw any idea at them and they will consider it... before saying "No." Obviously, we shoot for the moon, then they bring us down to earth and compromise. Most of the time, we get to push back and really challenge their ability. We've come up with some great solutions for this product. Even though it's in Beta, We've really massaged the usability to make it a fun experience. Who else allows you to check your balance on your smartphone with a tap-swipe? No one. Normally, you have to sign in first*.

* What I mean is, you have to sign in the first time, turn on the feature, then you can "Slide for balance" any time after that without signing in.

 

Green Dot: greendot.com

Green Dot Bank - Big Banks, No Thanks  is the slogan for Green Dot where I am currently a Senior Web UX Designer. I moved here from MGA as a stepping stone in my career. I have many tasks again here, though I feel I am a vital asset when negotiating with our progamming team. I know how programming works and I am able to use my knowledge of that to leverage certain aspects of the UX team's asks. Many times, we are pushed aside for "higher priority" requests.

We have recently taught the other teams about the extreme importance of a good user experience. A 404 error might be bad that day, but is easily remedied with an updated piece of code. But a bad user experience is mentally detrimental to our audience. This could lead to long term negative thoughts towards our image. The other teams here understand this now and we're pushing for more understanding every day.

Another one of our struggles is a common one; everyone is a designer and everyone knows what's best. How do we gently let them down without having to spend hours writing up the research that backs our cause? We don't. We have to start pushing back and letting them know that this is our job.

Enough venting! Green Dot's atmosphere is a great corporate environment with some very smart people!

 

MGAE: Bratzillaz.com

Bratzillaz Are where Glam gets Wicked  Bratzillaz is MGA's other newest brand as of July. These witchy cousins of the Bratz are magical witches with many powers to help their friends! Being a new brand with a lot of attitude meant that we had to step it up a notch in the Web department. The web team and I were tasked at creating this site before we even knew what Novi Stars were, though Novi Stars started design and development later and launched earlier.

We started Bratzillaz hearing the words "New", "Exciting", "Different" and "Trend Setting". So we used those words and tried to come up with a site that would match. Unfortunately, static websites aren't all that exciting anymore with the wide use of Javascript via jQuery. Flash was out of the question because half of our mobile viewers were on apple products (You know what that means). So we had to come up with an HTML4 compliant website that was dyanamic and flashy. That meant we would be using jQuery.

Like Novi Stars, we wanted to use the newer way of viewing content called Parallax Scrolling. Only a handful of companies were using it and none of them were in the toy industry. The team was not sure that we could/should do something like this in such a short window of time (only two months!), so with much determination, I set out finding the best way to write this new parallax engine. I was able to code and create the parallax engine that runs Bratzillaz in just two days. After that, we just had to lay out the content (and the other programmers did the rest of the coding, such as the video player and catalog). I had a very heavy hand in coding this site, though I also lead an illustration team in our department to create assets for what I was thinking for the site. After they created the amazing assets, I got busy cutting everything up and positioning it correctly so the engine would do it's work and make it look great.

Check it out at www.bratzillaz.com

 

MGAE: NoviStars.com

These girls are out of this world!  Novi Stars is MGA's Newest brand as of June! They are far-out girls from somewhere in the universe. This called for something special and out-of-this-world when it came to an online presence! Our team got together and found what we thought would be a perfect fit. Parallax Scrolling! This type of webpage display is the next up-and-coming thing. Only a handful of large companies have started to use it, so I thought it would be perfect for the toy industry, especially featuring girls from space.

Parallax Scolling breaks down pretty easily. Parallax is the visual effect of objects closer to you moving faster than objects in the distance. We apply this visual effect with the mouse's scroll wheel (or arrow keys) and we get 'Parallax Scrolling'. Working on this site was a visual treat. The illustration team did an excellent job with amazing contrasting colors and great aggresive design. I was lucky enough to be able to concept this site from the beginning, integrating parallax scrolling into it and talking out the pros and cons, and seeing it through to the very end. I made sure the design was the way it was supposed to look and the parallax worked exactly how it should.

This site was one of our quickest sites ever done, which accounts for errors that only I may see. After a long story of back and forth with a vendor, the project was handed off to us to finish in less than a month! It was very challenging, though because of the amazing team I work with, we were able to slap together a front-runner website (in the toy industry at least). I got the chance to assistance produce, concept, design and develop this site with a small, talented team. Our developers did some amazing things to put this site together in time!

Check it out at www.novistars.com

 

MGAE: Bratz.com

Bratz Are Back.  One of MGA's largest brands needed a makeover. The web design team and I got cracking on the newest Bratz.com website. This was the first project that more than one designer collaborated on a single project. With multiple design minds and ever changing renditions made by the marketing team, we came up with this high-fashion big picture website. Everything was branded Bratz. Their new look took over the page with color and style.

This website trafficks close to 300,000 views per month! Bratz were a huge brand in 2001 and MGA wanted to bring them back. With multiple online campaigns running at the same time on countless sites, we needed plenty of promotional graphics pushing people to the new site. This brand also needed two different YouTube homepage takeovers. With close to 1.5 million viewers clicking through the YouTube home page to our site, the new Bratz.com made a name for itself.

 

MGAE: Lalaloopsy.com

We're Lalaloopsy!.  This was a site I designed for MGA Entertainment's Lalaloopsy Dolls. They are fun, whimsical dolls with a huge personality. I was able to work with "found objects" to create the site. When I was first told about the dolls, we only expected to have eight total dolls and pets. Ever. Fortunately for MGA The dolls grew to tremendous proportions! After only a short time, I got word that they would be adding up to 50 dolls and over 5 segments! I quickly had to come up with a shoehorn idea to fit all of that content into this one little site. What you currently see at www.lalaloopsy.com is my solution

This website traffics about 250,000 views per month and the fans always want more! This website and Bratz.com are the two heaviest trafficked sites that I have created. I have had to create Facebook, YouTube and Twitter imagery along with email blasts and promotions that are housed on sites like Nickelodeon, Cartoon Network, Disney and any site that allows Google Ads! During the holiday season of 2011, I created a YouTube homepage takeover which drove over one million users to the website and YouTube page, customized with a gadget that uniquely shows off the content. All designed by myself.

 

MGAE: Smaller Brands

Other MGA Brands that I have worked on.  The images above are of smaller MGA brands that I had the opportunity to work on. Again, My duties were to create website elements, emailers, promos, etc. These sites did not weild as much traffic simply because of the fact that they were smaller brands. Less product, less visibility.

These sites include:
www.littletikes.com
www.moxiegirlz.com
www.moxieteenz.com
www.legendofnara.com
www.bfcink.com
www.myepetz.com

 

My Personal Style

I call these "Vector Blowouts".  These images were all created for printing on apparel such as t-shirts and sweaters. Using Full color and Spot color techniques I was able to to print these designs on clothing using a 6-head, 6-station silk screen printing press. I have also made them large enough to print purely on a 2' x 4' banner.

I created these by taking images of the subjects then hand tracing the subject in Adobe Illustrator. After I traced them using various shades of grey, I then created a geometric background. Once the background and some other random elements were created in illustrator, I brought it all into Adobe Photoshop to give it the color and life it needed.

 

My Name is Nathan

I am a Super Designer This does not mean I wear a mask and cape, it means I am a designer who knows code! I specialize in graphic design for web, though I have a background in print as well. If 2D art can be made on a computer, I know how to do it. I have also had a quick trip through 3D modeling and animation. This entire website was handed coded by myself using a mixture of HTML, CSS, jQuery, PHP and mySQL. The sections you are viewing are all driven by PHP with a mySQL database, so later, I can add my experience with my future careers.

As a quick rundown, I have varied experience in Graphic Design for Print, Graphic Design for Web, Web Programming, Direct Marketing, B2C Marketing, B2B Marketing, Video Game Conception, User Experience and User Interactive Experience among many other things! I enjoy creating designs that speak to people and that not only effectively communicate strong messaging but invite the person in by look and feel as well.

 

MyBattleReport Personal Site

My Battle Report is an ongoing project that I have been challenging myself with  This pet-project of mine started close to three years ago. I started this site because I liked an 'analogue' table-top game called Warhammer 40k, though I felt it needed something more. With the group that I played with, many of the enthusiasts wanted to share their mini table-top wars with other people. Since this game is a physical game such as Chess (Physical meaning not on a computer), there was nothing like this out there. I set out to create a sharable battle report web app. Many of these users belonged to many different forums. These forums all had places to put a signature. My goal was to create an image that would show off their army, but would update every time they wanted to update it. And here was born www.mybattlereport.com

At first I did not know what I was really doing. In fact, I actually taught myself PHP and mySQL BEFORE I knew how to program in the front end! With help from my co-worker, I started to learn and teach myself all the coding I needed for this project. Two years ago, I launched the first rendition of MyBattleReport. Recently, I have decided to reface the entire website and re-write the entire thing by hand from the ground up. This task seems daunting but I believe it is great fun to see something come to life and it really allowed myself to challenge ...Myself...

I had heard a new edition of the major rulebook was due to come out in the summer (this past June). So, I started to quickly write up a new login (which would piggy-back off of the old login script of PHPBB) and Registration script (which I wrote from scratch), adding in many personal touches that I believe the web should adopt; such as "Slide to Register" and no "repeat Password" field. After I wrote this login/register script, I got to work creating a Question and Answer page that works similar to www.stackoverflow.com. Users can search for their question, if it's not there, they can ask it and other users can answer. Simpler said than done!

I wanted to make my site different from everything else. I think as a good designer and a good UX expert, that's expected. I wanted something a bit different. I even toyed with the idea of a diagonally scrolling website. I'm glad I gave that up. There's a point where a "Feature" becomes a gimmick (Hello Paralax scrolling and 3D television!). I set out to make a "Card" system for this site. Basically a modular site that would react with the browser. I think 'responsive' design is on the border of feature and gimmick, but I believe it can stick around where it's done right.
If you go to The Collective on My Battle Report, you can see what I'm talking about. I have not seen this done anywhere. A card tiling system, such as Pinterest, with responsive card sizes and responsive number of columns. Because I haven't seen this anywhere, I had nowhere to learn. You can't just "float:left" all of these cards because of the varying sizes. I wrote my own placement script that would tell each card where to go. Go ahead - try it out. Resize your browser and you'll see!

 

Walmart: walmartmoneycard.com

Walmart - Save Money, Live Better.  Unfortunately, I can not share any of the designs I have done or helped produce for Walmart yet, All of our projects are going through the system. One of them is very close to completion and I will be posting it here. What I can show you are a few workflows that I worked on to streamline and solidify the ideas that our UX team had come up with.

Our team came into the Walmart project the same as any other at Green Dot; knowing that we need to make a rat's nest into a mansion. This site, as well as the other Green Dot products, had grown too fast for the technology to keep up. Before the UX team was created, any problems that occured were handled by anyone who could talk to the IT department. This lead to a nice shoe-horn effect accross the entire site. from the inconsistent language, to the inconsistent design and flows, Everyone was just doing their part to grow the web portion as quickly as possible.

We will soon be able to see a fresh landscape over these products. Our designs and ideas are being implemented as we sit here reading this.

 

GoBank: gobank.com

GoBank - It's about time.  Yup, it sure is! GoBank is the latest and greatest invention for banking. Ever heard of Chase? Bank of America? Wells Fargo? Well, those are all old fashioned. Keep them if you please. If you're looking for a fresh approach to banking, GoBank is where it is. GoBank is a new product out that is completely mobile banking with a new set of fees that go unnoticed. What fees? When you sign up, you'll be able to Pay What You Want. As little as Zero Dollars per month.

GoBank is an awesome project where we, as UX designers get to stretch our brains and really figure out a fun, new innovative way of doing anything. We have an extremely talented team of developers. We can throw any idea at them and they will consider it... before saying "No." Obviously, we shoot for the moon, then they bring us down to earth and compromise. Most of the time, we get to push back and really challenge their ability. We've come up with some great solutions for this product. Even though it's in Beta, We've really massaged the usability to make it a fun experience. Who else allows you to check your balance on your smartphone with a tap-swipe? No one. Normally, you have to sign in first*.

* What I mean is, you have to sign in the first time, turn on the feature, then you can "Slide for balance" any time after that without signing in.

 

Green Dot: greendot.com

Green Dot Bank - Big Banks, No Thanks  is the slogan for Green Dot where I am currently a Senior Web UX Designer. I moved here from MGA as a stepping stone in my career. I have many tasks again here, though I feel I am a vital asset when negotiating with our progamming team. I know how programming works and I am able to use my knowledge of that to leverage certain aspects of the UX team's asks. Many times, we are pushed aside for "higher priority" requests.

We have recently taught the other teams about the extreme importance of a good user experience. A 404 error might be bad that day, but is easily remedied with an updated piece of code. But a bad user experience is mentally detrimental to our audience. This could lead to long term negative thoughts towards our image. The other teams here understand this now and we're pushing for more understanding every day.

Another one of our struggles is a common one; everyone is a designer and everyone knows what's best. How do we gently let them down without having to spend hours writing up the research that backs our cause? We don't. We have to start pushing back and letting them know that this is our job.

Enough venting! Green Dot's atmosphere is a great corporate environment with some very smart people!

 

MGAE: Bratzillaz.com

Bratzillaz Are where Glam gets Wicked  Bratzillaz is MGA's other newest brand as of July. These witchy cousins of the Bratz are magical witches with many powers to help their friends! Being a new brand with a lot of attitude meant that we had to step it up a notch in the Web department. The web team and I were tasked at creating this site before we even knew what Novi Stars were, though Novi Stars started design and development later and launched earlier.

We started Bratzillaz hearing the words "New", "Exciting", "Different" and "Trend Setting". So we used those words and tried to come up with a site that would match. Unfortunately, static websites aren't all that exciting anymore with the wide use of Javascript via jQuery. Flash was out of the question because half of our mobile viewers were on apple products (You know what that means). So we had to come up with an HTML4 compliant website that was dyanamic and flashy. That meant we would be using jQuery.

Like Novi Stars, we wanted to use the newer way of viewing content called Parallax Scrolling. Only a handful of companies were using it and none of them were in the toy industry. The team was not sure that we could/should do something like this in such a short window of time (only two months!), so with much determination, I set out finding the best way to write this new parallax engine. I was able to code and create the parallax engine that runs Bratzillaz in just two days. After that, we just had to lay out the content (and the other programmers did the rest of the coding, such as the video player and catalog). I had a very heavy hand in coding this site, though I also lead an illustration team in our department to create assets for what I was thinking for the site. After they created the amazing assets, I got busy cutting everything up and positioning it correctly so the engine would do it's work and make it look great.

Check it out at www.bratzillaz.com

 

MGAE: NoviStars.com

These girls are out of this world!  Novi Stars is MGA's Newest brand as of June! They are far-out girls from somewhere in the universe. This called for something special and out-of-this-world when it came to an online presence! Our team got together and found what we thought would be a perfect fit. Parallax Scrolling! This type of webpage display is the next up-and-coming thing. Only a handful of large companies have started to use it, so I thought it would be perfect for the toy industry, especially featuring girls from space.

Parallax Scolling breaks down pretty easily. Parallax is the visual effect of objects closer to you moving faster than objects in the distance. We apply this visual effect with the mouse's scroll wheel (or arrow keys) and we get 'Parallax Scrolling'. Working on this site was a visual treat. The illustration team did an excellent job with amazing contrasting colors and great aggresive design. I was lucky enough to be able to concept this site from the beginning, integrating parallax scrolling into it and talking out the pros and cons, and seeing it through to the very end. I made sure the design was the way it was supposed to look and the parallax worked exactly how it should.

This site was one of our quickest sites ever done, which accounts for errors that only I may see. After a long story of back and forth with a vendor, the project was handed off to us to finish in less than a month! It was very challenging, though because of the amazing team I work with, we were able to slap together a front-runner website (in the toy industry at least). I got the chance to assistance produce, concept, design and develop this site with a small, talented team. Our developers did some amazing things to put this site together in time!

Check it out at www.novistars.com

 

MGAE: Bratz.com

Bratz Are Back.  One of MGA's largest brands needed a makeover. The web design team and I got cracking on the newest Bratz.com website. This was the first project that more than one designer collaborated on a single project. With multiple design minds and ever changing renditions made by the marketing team, we came up with this high-fashion big picture website. Everything was branded Bratz. Their new look took over the page with color and style.

This website trafficks close to 300,000 views per month! Bratz were a huge brand in 2001 and MGA wanted to bring them back. With multiple online campaigns running at the same time on countless sites, we needed plenty of promotional graphics pushing people to the new site. This brand also needed two different YouTube homepage takeovers. With close to 1.5 million viewers clicking through the YouTube home page to our site, the new Bratz.com made a name for itself.

 

MGAE: Lalaloopsy.com

We're Lalaloopsy!.  This was a site I designed for MGA Entertainment's Lalaloopsy Dolls. They are fun, whimsical dolls with a huge personality. I was able to work with "found objects" to create the site. When I was first told about the dolls, we only expected to have eight total dolls and pets. Ever. Fortunately for MGA The dolls grew to tremendous proportions! After only a short time, I got word that they would be adding up to 50 dolls and over 5 segments! I quickly had to come up with a shoehorn idea to fit all of that content into this one little site. What you currently see at www.lalaloopsy.com is my solution

This website traffics about 250,000 views per month and the fans always want more! This website and Bratz.com are the two heaviest trafficked sites that I have created. I have had to create Facebook, YouTube and Twitter imagery along with email blasts and promotions that are housed on sites like Nickelodeon, Cartoon Network, Disney and any site that allows Google Ads! During the holiday season of 2011, I created a YouTube homepage takeover which drove over one million users to the website and YouTube page, customized with a gadget that uniquely shows off the content. All designed by myself.

 

MGAE: Smaller Brands

Other MGA Brands that I have worked on.  The images above are of smaller MGA brands that I had the opportunity to work on. Again, My duties were to create website elements, emailers, promos, etc. These sites did not weild as much traffic simply because of the fact that they were smaller brands. Less product, less visibility.

These sites include:
www.littletikes.com
www.moxiegirlz.com
www.moxieteenz.com
www.legendofnara.com
www.bfcink.com
www.myepetz.com

 

My Personal Style

I call these "Vector Blowouts".  These images were all created for printing on apparel such as t-shirts and sweaters. Using Full color and Spot color techniques I was able to to print these designs on clothing using a 6-head, 6-station silk screen printing press. I have also made them large enough to print purely on a 2' x 4' banner.

I created these by taking images of the subjects then hand tracing the subject in Adobe Illustrator. After I traced them using various shades of grey, I then created a geometric background. Once the background and some other random elements were created in illustrator, I brought it all into Adobe Photoshop to give it the color and life it needed.

 
© 2012   ::   Nathan J. Grealish