Tuesday, April 23, 2013

Week 12: The Options of this App

So after meeting with Allison and getting the update of the app. The two links and pictures below are the interfaces that we will being testing.

Interface #1

This version has the home page with the jokes samples displayed and the user can click on it and go to the page of the full joke.

Interface 1- Home

Interface 1- Joke page

Interface #2

The second version has, as Allison stated, a window shade style. When the user clicks on the joke tab, the rest of the joke is shown when the tab expands.

Interface 2

For the testing plans, I was thinking of having the users try both interfaces (#1 and then #2). I was going to use friends and classmates as the users.  I will be talking to Allison more on the testing later this week.

Thursday, April 18, 2013

Week 11: Progess

So I met up with Allison the other night to have a quick update on the progress of the app. I have been collecting jokes to put on to the app. Also while Allison is getting the basic skeleton rooted and polished I brushing up on my CSS so that I can implement my layouts and color schemes as well. I am mainly just collecting jokes to fill the emptiness of the app when it first starts up. Not that much else to report.

Saturday, April 13, 2013

Week 11: More Patterns

The two patterns that I chose to find examples of were the Pop-up and the Returned Results patterns.

Pop Up

A perfect example of this pattern being used to annoy the user because it is most commonly utilized for advertisements. This screenshot is an example of an advertisement popping up before I can play my game.

Returned Results

The example that I used from what they described to me, was the displays for the different locations of on a map app. The screenshot is of google maps showing where different bars are in downtown honolulu.

Those were the two patterns that I chose and their examples.

Sunday, April 7, 2013

Week 10: The Retry for the Alternative Interfaces

So for the Re-do of alternative interfaces, I have done these two interfaces.

Interface #1

This interface was almost identical to the original idea that I had just more polished. This interface has the three sections that I wanted to focus on.

Each page is dedicated to each of my focus, which are reading jokes, submitting your own, and saving jokes that you really like.

There is a filter throughout the interface that utilizes icons to narrow down the user's preference of jokes that they want to see.

Interface #2

This interface is mainly a different style of the first interface. This interface has only two pages because I thought about combining the submission of jokes and reading jokes into one pages.

Another thing that Allison had thought about was having the film strip transition instead of the button transition. With that change, the user can be reading all of the jokes and then slide right over to the jokes they had sent to their favorites.

This interface allows for a lot more seamless transition for the user and less waiting.

Those are the two alternatives ideas that I was thinking of.

Saturday, April 6, 2013

Week 10: The Grand Master Plan.....kind of

So Allison and I met up today to update each other on our progress. We have a basic Navigation skeleton set up.

By this upcoming week I need to have a finalize global color scheme to give to Allison so that we know what color the different portions of the interface are going to be.

I also am going to be gathering some jokes for our different sections so that we have a nice starting point for the databases.

The last thing that I am going to be working on is icons for the different categories of our jokes.

The final color scheme is the top priority, followed by gathering jokes. The lowest priority out of these is the icon. The reason because Allison and I discussed that she can just have placeholders for the icons while I design them.

That is our progress on my end of this project and Allison will tell you more about the other part of the project.

Week 10: Siging In and Exiting Patterns

The two patterns that I found examples for was the Sign On design and the Exit Guard design.

Sign On Pattern

When reading about the sign on pattern. I thought of every online accounts that I have (Facebook, Gmail, Yahoo, Blogger, etc.). Here is a perfect example of a sign on design.

Exit Guard Pattern

I noticed this pattern every time, I am pushing the back button out of my applications. Here is an example of the exit guard in one of my game apps.

Friday, March 29, 2013

Week 9: Testing Ideas

Before I started this post, I went over to Allison's post to see what she had to say on the subject. After reading the post, I realized that everything that I was going to write about testing, has already been said.

I agree that we need to have a pilot study of a small group of people to see if there is any immediate problems that happen. We have to then ask the questions of time spent in a specific section of the app, how long can we retain their attention, and of course where does the app fail.

I also agree that after finding the answer to those problems, to expand the amount of participants to ensure that the problems do not arise again. 

Again I do agree that we need to have those follow up questions of simplicity and functionality. The one thing that I would add to the questions is visual appeal. Does the app have visual appeal?

Other than that question, I totally agree with what Allison said for the testing.

Thursday, March 28, 2013

Week 9: Display of Information

The two patterns that I chose to provide examples for were the Gird display and the Infinite List display.

The Gird Display

This screenshot is from the main applications tab of my phone and it obviously shows a gird layout. Also this is an example of it because each application has its own individual icon and title. This example is pretty self-explanatory.

The Infinite List

This screenshot is from one of the Joke apps that I compared with my prototype. When reading about the infinite list, this app immediately came to mind. The screenshot is of the app as it says "Loading Jokes". This window shows up after the user has scroll down for some time. It seems that like, what is explained in the Infinite List section, the app has a database else where and after a specific number of jokes have been scrolled through, the app will pull more jokes from the database, which is why this screen on the left shows up.

Sunday, March 17, 2013

Week 8: Mobile Implementation Part 3

I am going to be teaming up with Allison Diller to do the “Joke Around” App. We have not finalized the OS we are going to work on, but I think we are leaning towards iOS since Allison owns an iPhone which will allow there to be testing done.

Below is a week schedule, but I am meeting Allison this upcoming Saturday and this schedule will for sure change once we meet and talk. So this is a very rough outline, not the final schedule. Once Allison and I meet, I will post in the comments the finalized schedule.  

*The dates displayed are Saturdays.

Week 1: 3/23 – 3/30:  Start on the Reading section, since we will be creating the lists and the different category tabs.

Week 2 : 3/30 – 4/6: More work on the Reading section if necessary, Start on the Saved section since it is a similar layout as the Reading section.

Week 3: 4/6 – 4/ 13: Continue on Saved section if necessary. Make sure that Reading is finished.

Week 4: 4/13 – 4/20: Start on Create section. Finish Saved section and link it with the Reading section.

Week 5: 4/20 – 4/27: Finish Create section and link it with the other sections . Start on splash page.

Week 6: 4/27 – 5/4:  Put the whole package together, test, and make sure everything operates properly. Fix bugs why it applies.

Week 7: 5/4 – Presentation day: Figure out when we present and use those last days to final testing and modifications

Again this schedule is a very rough outline and will most likely change once I meet up with Allison. I will post in the Comments the final schedule that we agreed upon.

Week 8: Mobile Implementation Part 2

Heuristic Evaluation

My heuristic evaluation was on Allison Diller's scoring app. The video Below is my evaluation and the text is what I touched on in my video.

Visibility of the System Status

The main thing was the How To page that will keep the user informed on what game the app keeps track of. This will allow more experienced players to explain the rules to new players easier.
Rating: 3

Match Between System and the Real World

Being able to change the position of the players will help because sometimes people change seats between games or new players replace previous players.
Rating: 2

Being able to change the number of players will help if more people want to play. Plain and simple.
Rating: 1

Having a new game and previous game button will allow the players to continue an already established game from another time.
Rating: 2

User Control and Freedom

Back Button needs to be put in so that the user can fix a mistake that they made.
Rating: 3

The X button can become the home button so the user can restart a game if they desire.
Rating: 3

Flexibility and Efficiency of Use

A adding/subtracting button on the sides of the inputs with allow users to input score faster.
Rating: 1

Another suggestion is instead of a selection of numbers to input, just have the user input the number they want with the use of keyboard.
Rating: 1

A finished button and a next round button will allow the user to proceed to the next roundor a finish a game quickly.
Rating: 2

Week 8: Mobile Implementation Part 1

Composition Patterns from 4ourth.com

The two patterns that I chose were the Interstitial Screen and the advertising. 

Interstitial Screen

This Screenshot was taken on a mobile game app that I downloaded some time ago. A quick explanation of the game is that the user is trying to drive a car far as they can before a zombie horde catches it. The user can earn the game's currency on each ride and has an upgrade screen for the car.  When I launch the app, it takes me to the upgrade screen. When i have done all of my upgrades and I select ride in the bottom right corner, this screen comes up because it is loading all of the apps's properties. 


This Screenshot is from one of the joke apps that I was researching for my project. There are plenty of apps that have advertising similar to this style, but I just immediately remembered that this app had the perfect example. The advertisement is at the top and the user can choose to ignore it. But if they are interested in the product that is being displayed, they can diverge from their current activity and explore the ad.

Those are my picture examples of the two composition patterns from 4ourth.com. There will be a Part 2, which is the Heuristic Evaluation, and Part 3, which is the plan of attack for this app.  

Sunday, March 10, 2013

Week 7: Visual and Information Design


The blog that I went to was beautifulpixels.com and read the article about an app called "Over".

Picture of the app on tablet

Over is an app that allows the user to addd typography to any picture that they have taken.

Example of result

The app comes with 28 different fonts that have been able to change a regular picture into something inspirational, funny, or solem.

I enjoyed reading the article, not only because of the content, but also because of the presentation of the article was great.

The page color and font colors gave a calm atmosphere to the article since also allowed the pictures of the app (as shown above) to pop and grab the attention of the reader.

The article was written well, but the paragraphs seemed kind of long for a blog. If the paragraphs were broken down more, the article would not seemed so dense that the reader doesn't feel overwhelmed with the length.

Peer Evaluation

Evaluation of Jade Storm's Balsamiq

There were a lot of pages and preferences to go through before actually getting to a list of restaurants.
Rating: 4
* Made some suggestions to help fix that in video

No back button that you could change your preference input
Rating: 2
Having a back button for the preferences is so that if the user put in the wrong preference they wanted, they could go back to that page without having to restart the search over.

There is no map.
Rating: 5
* Made some suggestions to help fix that in video

Not showing the opening and closing times of shops.
Rating: 1
This just a minor thing and I mentioned this in the video, so that the user know their options at the current time.

Here is the video of Jade's review on my Balsamiq: Evaluation of Martin's Balsamiq

App evaluation

Awesome Joke - This app is very similar to what I want my joke app to do. The app allows for everyone to view different types of jokes, submit your own, and save ones that the user finds funny.

The problem I had with the app was that the visuals seemed to come out of a pre made template. There is not as much visual appeal to it.


  • Similar set-up as my app
  • Easy to navigate
  • Visually, feels like a generic pre-made templates
  • Not that colorful

 Best Jokes Ever - This app had a little bit more color in the design, but the navigation was not that intuitive as the other app. There were just 3 buttons at the bottom, but in order to get more buttons like a filter, the user had to use the menu button installed on the phone.

The other app had all the buttons for the app on the screen where this one just have a big list of jokes with filters and categories in the installed menu button.


  • Visually, more appealing and colorful
  • Non-intuitive navigation bar
  • Do not feel comfortable when trying to navigate

Navigation bar

The 3 navigation bars:

1. List menu
2. Tab menu
3. Metaphor menu

1.  The list menu is usually very simple and straight forward for the user, so as not to throw the user in the heart of the app and be confused on how they got there.

2. The tab menu allows for the user to have all the different locations on the same display as the content so that, the user does not have to jump from page to page to get to their desired location in the app

3.  The metaphor menu is visual exciting, by uses an object that is related to the app and make it into a menu. The problem though is finding the right object to use as the menu.

Saturday, March 2, 2013

Week 6: Balsamiq

One change that I made to my prototype is that........ I put a navigation bar at the top so that the user can actually go to different pages and not be stuck on one page.
Another change that I made was instead of making extra pages to select the category, I just had tabs so that the user is not changing between so many pages and getting lost.
Those were the changes that I made.

*Note the first save checkbox in animal tab in the read section is the only one that changes. It is meant to show as an example for the rest*

Sunday, February 24, 2013

Week 5: Evaluation

Sami and I decided to meet up in the computer lab to evaluate each other's prototypes. Here is the list of issues from evaluating Sami's prototype and my hopefully constructive advice:

  • The button set up could be improved even more on either version by having the Previous and Next Fact button close to the facts  and have the other buttons close to the bottom.
  • I also expecting that when the first page would open up that it would have the current date and a fact right off the bat, but it was the just the date and a prompt of whether they want to get a fact. I feel that if the user has this app, they understand that they are going to get facts, so why not just skip the opening prompt and just go straight into the facts of that day. 
  •  Also some days might not have as many facts as other days so it would be helpful if on the date that they have pulled up, a counter of how many facts are for this date.
  • A suggestion is to add small pictures that relevant to the fact that is being displayed.

I kind of already said my positives and negatives in the bullet points, but i feel that it would be a fun app to have. It would also be a go conversation starter with people to break the ice. I made the suggestion of jumping right into the facts is so that a person can quickly access them if they cannot remember a fact of the day.

Here are our videos:

Sami reviewing mine

I am reviewing Sami's

Sunday, February 17, 2013

Week 4: Prototyping

STEP 1: Direction
I want to make something that allows for the user to share funny jokes, anecdotes, or trivia facts with other people and for the user to receive these as well.

STEP 2: Versions

People are always waiting in some sort of line.
Sometimes waiting in line is stressful and one way to relieve it is by jokes
They use an app that will give them a joke of the category they chose

They enjoyed the joke, so they to the next one.
The next one, they feel is so funny that they have to save it
So they save it and after reading that joke, they are reminded about a joke that they want to share

So they write down the joke select a category and then submit it.
All of the jokes are anonymous.
But the user must select one of the categories so as to group similar jokes and separate jokes that are PG rated from the R rated ones


People are always waiting in some sort of line
One way of passing the time in the line is by distracting yourself
So the person in the line needs something to distract themselves with

They are big on trivia facts and usual facts
There happens to be an app that has all sorts of facts like that
So they read one

And another….
And another...
And another. They look up and they have one more person and they will then get their copy of the latest videogame.

STEP 3: Prototype Versions



STEP 4: Video

Sunday, February 10, 2013

Week 3: Needfinding

I chose to observe my friends in managing the due dates for their school assignments. I want to improve this because I know the experience of being caught off guard from remembering at the last second the deadline of an assignment. I want people to always be informed about things like that since there are usually very important to remember.

Denzel: His system of remembering due dates is like a word of mouth system. He usually asks his peers in the class what is due in the class and what day it is due. Also if he is nervous on whether he has anything due and his classmates are not around, he looks at the syllabus that the teacher provided.

Denzel texting a classmate about an assignment
  • A constant reminder of the assignments from classmates
  • Never has to personally remember it because of classmates

  • When not around classmates (ex. weekend), if assignment is due next class, possibility of forgetting deadline
  • Can possible suffer when the assignment requires a lot of time

Bijan: The system that Bijan uses is writing it on a whiteboard in his room. When an assignment due date is announced, the assignment is written on the board. The assignment is taken off when the assignment is finished. The board is located right next to his bed.

Bijan checking his board for any assignments
·         A constant reminder on the board and at home
·         Can organize it and prioritize assignments based on due dates and workload for each assignment
·         Writing it on the board is another way of keeping it in your mind
·         Board allows for changes and additions


  •  Is most effective when at home, when not at home possibly of forgetting
  • Still has to write the assignment down in class so that it can be easily  transferred to board at home


1. An app that gives reminders every day of assignments due for the week
2. An app that is like a board where the person types or talks in the assignment with due date
3. A calendar app that is takes the idea of a white board display for each week
4. An app that lists all of the assignments due for the week with a number rating on the amount of time required for it
5. An app that does a countdown for assignments in a list
6.  An app that has classmates’ information for each class, so that one can get in contact with people from their class
7.  An app that is like a student planner
8. An app that lists the assignments in chronological order and as the assignment gets closer to the due date, the screen starts to get a red tint to it and as the date gets closer the tint gets more saturated.
9.  An app that does a type of notifications symbol that appears in the corner of the phone’s screen like on Facebook.
10. An app that anytime the user unlocks their phone, the app will prompt like a dry erase marker on glass across the user’s phone with the list of assignments that are due this week.

1.       The calendar apps in that come with phones. I understand that every phone comes with this, but sometimes they get confusing and are not simple.  I want the user to go into an app like the default calendar and be able to right from the start be able to create due dates and delete them with little to no effort.
2.       Facebook event tab. The layout of the event tab on Facebook allows the user to see all the events going on in the week in chronological order or in a calendar fashion that way the user can see the entire month.
3.       Actual class syllabus. I want to give a student a syllabus that they can access on their phone, organize, and have constant updates.
4.       Wix.com. This website helps people who do not know HTML code very well and it allows them to create a site. The steps in creating the site are very easy with Wix.com and the user can add and subtract things from the site without frustration.
5.       PDAs. I want to make my phone like a PDA since I always have my phone on me at all times. I want people to have their information at their finger tips.

Video with Link

Monday, February 4, 2013

Week 2: Brainstormed Ideas

Brainstormed Ideas

  • TV channel app
    • Tells the user the exact channel for any show
  • Fish species app
    • tells the user fish species in a picture that was taken (target: marine science)
  • Hiking trails app
    • shows the locations of trails with distance of trails, photos, and reviews
  • Fast food nutritional facts app
    • a database that shows all the nutritional facts of any fast food place
  • Bus app
    • shows the route of buses in a specific city, time tables, and possible GPS location of bus
  • Financial app
    • a checklist that helps keep a constant update on a student's financial aid. eg) deadlines, forms, sites, etc.
  • Parking spot app
    • shows user parking garages near them based off GPS location and shows information like rates
  • Landmarks app
    • shows locations of historic landmarks based on GPS location
  • List app
    • allows the user to create a list for specific tasks. eg) groceries, office supplies, schedules, etc
  • Engine data app
    • if phone connected in car, will save engine data on phone to show to mechanic. eg) oil pressure, etc
  • Insurance company damage app
    • allows user to evaluate damage of car based off a picture that user takes.
  • Accounting app
    • allows the user to keep track of income, expenses and balances
  • Symptoms app
    • user inputs medical symptoms and the app displays possible conditions they are in 
  • Comic strip app
    • database full of Sunday comic strips
  • Snowflake app
    • a mini game that user "cuts" out a paper snowflake
  • Inspirational app
    • everyday this app has a inspirational quote.
  • Joke app
    • databases of all sorts of jokes
  • True or False app
    • a mini game that has a bunch of true/false questions about anything and everything
  • Sci-fi soundboard
    • contains a large array of soundboards from sci-fi films
  • Idea app
    • user inputs a category and it gives a lists of project ideas for that category

List app
- The app seems simple but allows for the user to be efficient with their time of be organize

Parking app
- One of the main problems that my friends and I have when going to a new place is finding parking garages.

My main focus on these apps were college students and my users were mostly my friends and a big help was my roommate. There is a picture of him analyzing the setup.

My main insights from this is that the List app is good just they felt like it was a little basic, but that they could see what i was imagining it and where it could go. For the Parking app, they liked it just that again it seemed basic.

Below is my photos of the prototypes and of my roommate (Sorry for the disarray. I was struggling with the insert image tool and with the alignment settings on the pictures).