Submission for the Daily UI Challenge.
 
Challenge Description: User Profile. Hint: Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile?

As you may know, a friend and I partnered to make a website in order to get noticed by Nintendo of America. We both applied for the same job, and instead of just crossing our fingers for contact, we decided to "join forces" and create a short-term project to try and stand out from the applicant pool. (I won't get into details here, but the work has paid off so far.) For the initiative, we decided to analyze a game called Splatoon, a colorful first-person shooter that featured squid-human hybrids, known as Inklings. Splatoon is a game that allows for extensive customization through gear (apparel and weaponry), with casual and more competitive settings.

 

In the analysis, we mention SplatNet, an online portal for Splatoon players to track level progress, announce gaming times via Twitter's API, and monitor battle map circulation. I thought this was excellent material to translate into a mobile app that includes a user profile — hence, my submission for Daily UI Challenge #6.

A couple of things:

 

1) I am in love with Splatoon in-game font. Someone painstakingly created this font through insane methods, and without that, this mockup would never have worked. The font is so integral to the look and feel of the game. It's incorporated in menus, headers, and other areas of content in Splatoon. You can download the font here. All credit belongs to JapanYoshi / theFIZZYnator.

 

2) Background images were taken straight from the SplatNet site. (I tell you, Inspect Element in Google Chrome works miracles.) The same goes for all images in the mock, including the weapon, clothing, and profile photo of the Mii (the avatar). By the way — that's really me! And these are my current stats.

 

3) Because this is a game for a younger audience, I figured it was good practice to include a Terms of Use/User Agreement at login. I think a Privacy Notice can susbitute this or be appended. (Font: Arial)

 

4) I initially had my Nintendo Network ID as the main name display, but figured this was not great for privacy reasons, especially for kids. Hence, my display name is my in-game name (which so happens to be my actual first name). Nintendo has a very paticular policy regarding sharing Nintendo IDs in Miiverse, so I wanted to make sure that was reflected here.

Here were the most difficult parts of this design:

 

A) Laying out the gear in a single box without space conflicts. I settled for a "triangle" to arrange the gear (shirt, glasses, boot) whie the weapon is just slightly larger than the grouped pieces of apparel. A transparent white box provides enough contrast to see the objects against the dark, busy background.

 

B) For whatever reason, creating the mask for the user avatar ring was a challenge. The problem came when the transparency of the main Mii figure took over the masking, when I wanted a white background. I instead managed to layer the avatar over the circle's stroke of purple. I think this adds some depth to the avatar image.

Close-up views of the individual screens (iPhone 5/5c/5s):