Sunday, May 12, 2013

Different Designs

So, I will be working with Jeff for the final project. We'll be using his MyKicks app, which is kind of like an eBay-esque thing that allows users to buy and sell shoes. I did a Heuristic evaluation on the Balsamiq and the Jeff created the original Balsamiq.

The original Balsamiq had a Springboard-like menu to serve as the app's dashboard with nine icons.

  • Profile
  • Friends
  • Marketplace
  • Inbox
  • Chat
  • Requests
  • News
  • Trades
  • Photos

He figured he wanted to simplify it even more to four icons, or even just four sections of the dashboard

  • Profile
  • Marketplace
  • Inbox
  • News
The dashboard as a SpringBoard could be easily kept, but, like suggested with my app instead of having screen that stops the user from getting immediate information, having one of the functions, probably the Marketplace or News open initially after sign in would be a more convenient choice. This eliminates a step in choosing the news feed.

Initiate Implementation

It's a bit late in the semester for me to be working on this... I originally had this blog entry first typed up on the 6th, but finals week took over and I never got to finish it.

IF I had the time to implement my app, going along with my When in the World app, I'd probably use Wikipedia to get facts. Although I was thinking about narrowing it down to Disney facts -- since I'm such a big Disney buff and former employee of the company. It would narrow down information by A LOT. But then I think I would run into copyright infringement problems or something, not that any of it is intentional. Another concern could be how/where to gather facts and would there be enough for every single day of the year. Would it only be movies? Or include the parks? etc. etc.

Then I would first figure out the basic layout of the app the first week. It's probably going to have 4 (or 5? 4.5?) basic screens

  • General fact screen
  • Change Date screen
  • Only movie/studio fact screen
  • Only park fact screen
  • Share screen (or pop up)
Week two would consist of creating graphics for those screens. 

Week three and four would be gathering information. (as much as I could)

Five would be testing while week six would be correcting and tweaking final touches.

Again I actually don't have this time, so everything here is hypothetical.

Classifying Components

4ourth Mobile created an article based patterns used to Display Information and out assignment this week was to blog about two of those patterns.

Vertical List

This is a screenshot from the Android version of the Starbucks app as shown on my Droid 4. It features a vertical list, specifically a thumbnail list since it has thumbnails of each card that's a part of the user's account with accompanying data that shoes the amount in the card, name of the card and last 4-digits (blurred), as well as the date it was last used. The icon to the right of the data allows the user to change the order of cards by holding and dragging their selection up or down.


This screenshot features the Friends list for the LINE PLAY app and it uses a grid pattern to display players' avatars along with usernames labeling each one. It scrolls vertically and is arranged alphabetically by username. Small icons show if they're new friends (small red circle with 'N') and whether or not they're official avatars (owned/promoted by company; not shown). Clicking on an avatar brings up a Popup menu that features the full avatar and choices for the user to interact with their friends.

I wanted to add these screenshots to the 4ourth mobile wiki, but unfortunately I can't figure out the TextCha answer, or the network would time out.

Monday, May 6, 2013

Pardon my Portfolio...

I never did get a chance to show off any of my personal work, so I guess now's a time to do it as I rest my brain a bit from all this mobile design talk.

Unfortunately I don't have SUPER recent stuff nor are they all in one place, but I'll show what I have.

First up, I have a web-based portfolio featuring illustrations, graphic design works, and a video. The site itself was created during my 2011 Spring semester at HPU through Natalie Lewis's Web Design class. We were able to upload our final versions of it our project onto her server. Unfortunately, it's been so long since I've touched it that I've forgotten the password in order to upload more recent things. The works featured are from 2008-2011. My resume as of Spring 2011 is also there.
Majority of the graphics were class assignments. Illustrations were more for fun and presents for friends. The video was a video project in which we had to create a music video. I chose "Mario Kart Love Song" by Sam Hart, who I'm friends with.

Next is a 30-second rather unfinished flash animation (CAUTION: IT'S ON AUTOPLAY) I did during Spring 2012 in Natalie Lewis's Web Design with Flash course. This was my first experience with Flash. The backgrounds were created with Photoshop. It's a fraction of a deleted song from the Disney film Aladdin called "Proud of Your Boy". In an earlier version of the movie, Aladdin had a mother character whom he longed to be a better person for instead of what he was now. That song was about his thoughts on it and basically him apologizing to her for being who he is.

And last is my index of projects for my HTML & Web Design class I took during Fall 2012 while I was still in Florida working at Walt Disney World. So, using my resources, I made my final project as a web-based map of the Magic Kingdom. Every photo featured in the Mouse Maps project was taken by me/was taken with my personal camera. The layout is very similar to my portfolio I made in 2011.

Have another Heuristic

Looks like we're reviewing prototypes once again via Heuristic Evaluation and Severity Ratings just like Week 7 and Week 5.

Since I'm still a Designer, I'll be reviewing another Programmer's Balsamiq and this week I've chosen Jeff's. (7:58)

Aesthetic and minimalist design (I meant that instead of  Flexibility and efficiency of use in the video)
  • Streamlining by eliminating extra functions that seem redundant such as keeping Requests under Friends, Trades under Marketplace, and Chat under Inbox. (Severity Rating: 1.5)
Match between system and the real world
  •  I like that it's similar to what a previous version of Facebook looks like, so it's familiar and makes navigation easier. (Severity Rating: 0)
Consistency and standards
  • Not really sure what the search bar is for in the profile unless it's ultimately for searching for specific shoes within the profile or the same search for the Marketplace? (Severity Rating: 2
User Control and Freedom
  • Inbox needs a New Message, assuming right now the only way to start a new message is exiting out of the Inbox then going into the Friends list/Marketplace to get contact information then send a message. (Severity Rating: 3)

Particular Patterns

The first part of this week's assignment was to blog about patterns found in's article on Composition for Mobile designs.



On the left is a screenshot of an ad that popped up after the initial "PANDORA" screen during the start up of the app. The screenshot on the right is an ad that popped up during use-time of the app.  In order for the company to provide free music for their listeners, it heavily relies on advertising to fund their services (along with the Pandora One service that eliminates ads by asking users to pay every so often to use their product).

Not every app has an obnoxiously large ad space. Some rely on smaller banners or sponsored posts that end up in feeds. A few feature special add-ons that are based on/designed by the sponsor(s). Pandora also relies on audio and/or video ads they sprinkle throughout the use-time of their app (and website service).

Interstitial Screen



These are screenshots of the loading screen, the simpler name for "Intertsitial Screen", that pops up for the app LINE PLAY. The app itself is pretty memory heavy, so it usually needs the loading screen when starting up. This prevents the user from clicking anywhere else on the screen to stop the loading process... Well, save for the Home, Back, Options, and Search keys on an Android phone like my Droid 4. LINE PLAY also uses it as an opportunity to share tips on how to play the game, as shown in the screenshot on the right, and further social interactions between players in the game.

Sunday, May 5, 2013

Allison's App

 And last part of Week 7, we're supposed to do a Heuristic Evaluation and Severity Rating on a Balsamiq prototype that belongs to someone we haven't evaluated yet. In my case, I can't evaluate Martin's since I evaluated his paper prototype back in Week 5.

We're also encouraged to choose someone, if we're a designer, who is a programmer to evaluate this week. So, I picked Allison.

(... Screencast-O-Matic took a bit for me to use since OSX 10.8 doesn't support Java. Apparently OSX 10.6 aka Snow Leopard, which I previously had, only needed to activate the plug-in from the browser versus me downloading it from the site entirely. Even after downloading the plug-in, it still didn't work so I went hunting for an add-on that did. Chalk up another reason for me to dislike Mountain Lion with all my being.)

Anyway, here's the video. Sorry for some redundancies. (9:19)

It wasn't till after I recorded that I realized the score screen was an accumulative score screen as if several rounds were already played.

Visibility of system status 
It wasn't till after I recorded that I realized the score screen was an accumulative score screen as if several rounds were already played. Perhaps have a Round #XX at the Score screen to indicate how far along they're in the game. (Severity Rating: 2)

Error prevention & Help users recognize, diagnose, and recover from errors:
Clicking the 'X' goes back to home and seems to restart the game, but what if a user clicks it on accident? Ten rounds in, there's no way to prevent that. (Severity Rating: 3)

User control and freedom:
Kind of like the above concern except going back to a screen say changing names when already on Bid screen or changing bid when on Tricks. Just in case they realized an error after clicking to the next screen/accidentally clicked somewhere other than they intended. (Severity rating: 3)

Consistency and standards
Not really sure what "tricks" is. Is this scoring system only for one type of game? Because if one is keeping score for Scrabble, one only needs to add points once every round. (Severity Rating: 4)