Tuesday, April 23, 2013

Week 11: Interface #2 in Action!

So this is my first draft or design for the Perfect Food homepage. I really wanted liked the idea of the app being more visually appealing with polaroid pictures and that could be interactive for users. 

I am still playing with fonts and the white space of the polaroids, so let me know what you guys think! I am open to suggestions!

I am working with Steve to make sure my dimensions for the app and my icon are correct, and I am still playing around with some ideas. I'm thinking of maybe warping the polaroids so they look a little more realistic and not so straight-edge. Do you guys like the "munch munch" instead of a "let's get started?"

Steve is still working on the interface of the program and I am skyping with him tonight so we can update each other on our progress! 

Wednesday, April 17, 2013

Week 10: Phase 1 of Ultimate Super Awesome Perfect Food App

Steve and I have been keeping in touch through Skype and text to check in on each other's progress. 

From what he has told me, Steve has completed the framework for the app and will begin working on logic and programming this week. I don't know much about programming, but he seems very confident that we will be able to include all aspects of the app that are in my design. 

As far as my schedule, I have been working on the icon for the app. I think this might be the most challenging part for me, mainly because there's so many different designs I could go with, and I have to choose only one. I'm playing around with some different ideas as to what I want the app icon to look like, I have two ideas one that uses just text and another that is just an image. 

As I stated in my previous post, I am going in the direction of a "Polaroid" themed app, since my generation just loves taking pictures of their food. I think it would be cool if there was a way to make the pictures change every second or so to make it more fun and visually appealing to the user, but I need to check with Steve on that first. 

So for this week, I am starting to design the icon as well the polaroid design for the entire app. 

More to come soon! 

Week 10: Visual Interface and Less Visual Interface Designs

These are my sketches for my two alternating interface designs. The first interface is similar to my first Balsamiq design with a few changes, while the second one is a little more visually appealing and interactive. 

Interface #1:

My design for interface 1 is similar to my original Balsamiq design for The Perfect Food. My home page would have one image (for example, a taco) and then it would lead on to the following pages after confirming your current location. Instead of a boring rectangle button that allows the user to skip to results after the first page, I have replaced that design with a fun, interactive button instead. 
Interface #2:

 For my final project, I want to move in a direction that is similar to my second interface design. The home page would have various Polaroid pictures of food and the Polarid theme would continue throughout the app. One of the more annoying things that people do my age is take pictures of food, so I think having Polaroids is kind of a fun interactive take on that. It also gives the app more visual appeal and makes it fun to select different Polaroids. I'm still playing with this idea to make it as different from Yelp as possible and also making it fun and creative! 

Monday, April 8, 2013

Week 10: Sign On, Sign Off, Are You Sure You Want to Exit?

Sign On and Exit Guard

Many of the blogs I use most often have a signing on pattern and an exit guard pattern. This includes a variety of my favorite apps like Instagram, Yelp, Bejeweled, Pinterest, Temple Run, etc. According to 4ourth.com, sign on is the pattern that is used to confirm that only authorized individuals have access to the site, service, or application. Exiting guards are patterns that are used when exiting a screen, process or application that could potentially cause a loss of data or break in the session. 

Sign On

This was a screenshot I took of the login for my Pinterest account. But I use the sign on screen pattern for many of my apps including Instagram, Skype, Bank of America, Yelp, GooglePlus, etc. Most of the sign on patterns look extremely similar to this. 

Exit Guard Pattern

This is a screenshot of my bejeweled app, and this "Are you sure you want to exit?" is in most, if not all, my gaming apps. 

Tuesday, April 2, 2013

Week 9: Testing - If At First You Don't Succeed, Try Try Again!

Testing Ideas:

I can tell myself that no matter how good I think I did a project, or a speech, or a paper, it really comes down to when someone else looks over it. Some of the best advice and tips I've received have been when others proofread my papers or critique my projects and how I can improve. I think involving students to test mine and Steve's final project is the best way to improve our app. 

Since we're all extremely busy with our schedules, I think a good way to get feedback is through surveys. They are easy to put together and don't require too much time to complete. Steve and I could put together a survey to send out to students (or whoever) on what they think of our app! Questions could include:

  • What navigation styles do you like best? (One page with a navigation scroll bar or separate pages)
  • What (if any) social networks would you like to see included on the app?
  • How much do you think this app should cost?
  • How likely are you to use this app?
  • What other suggestions or additions would you make to this app?

I think the survey would be a good way to start receiving feedback and testing our final product, and then for my second testing idea, we should conduct an in-person experiment for the app. We could take the information from the survey and then conduct an in-person experiment with some of the same people who took the survey, or completely new participants. Either way I think it's a great way to get feedback. I believe the best meeting place would be somewhere at HPU, possibly in one of the group study rooms in the library. Another option I thought of is getting my peers from this class to review our app, and vice versa. It's always nice to get a second programmer or designer's opinion.

Monday, April 1, 2013

Week 9: Displaying Information Through Grids & Infinite Areas

Display of Information:

For this assignment, the two patterns I chose from 4ourth Mobile wiki was the grid display and the infinite area display. I chose these because I find them visually appealing and will be using at least one of these display patterns for my final project with Steve. 

Grid Display:

The Grid Display is one of my favorite display patterns, it shows a set of selectable images that can fit in the available space. The images are all similar in size as well as aspect ratio, and you can display a small amount of additional information about each image as it becomes in focus. 

This is a screenshot I took of my home screen. It demonstrates the visual appear and accessibility to having a grid display. Each app or program is represented by a small icon and a title. 

Infinite Area Display:

The Infinite Area Display is most commonly used for maps, and it is found to be a good way to display other photographic information. The entire range of the data is generally available at every zoom level, and usually whatever the user is loading is a two dimensional graphic. In maps, zooming reveals more information generally with newly-rendered images. For example, at the city level you only see highways labeled but street names would appear the more you zoom in. This is because having street names displayed at a city level would not be useful and would be clutter inducing. 

This is a screenshot I took of my current location, all the way up north in Kahuku. For the shot I zoomed in at a city level, where only the major highway is displayed. But if I zoomed in, you would be able to see the surrounding streets and even icons that represent nearby businesses.

Week 8: The Perfect Food Comes to Life!

Implementation Strategy for Final Project

I have teamed up with Steve Parker to bring my "Perfect Food" app to life! Since Steve is a brilliant programmer, he will be the brains behind this whole operation, and I will be, as he said, beautifying the product. We have decided to go with an iOS system since we both have iPhones and are quite familiar with the software. We also talked about incorporating Steve's app idea, which acts as sort of a micro blog. We want to add this feature into The Perfect Food by adding quick tips or short reviews to the restaurants or food options within the app.

Our plan is to take it one week at a time and we will be chatting on Skype frequently to check in on each other's progress. Since Steve and I both have pretty hectic schedules, Skype works best for both of us but we will also be meeting in person at least once every week. 

I've put together a rough timeline of what the next five weeks will look like based on what Steve and I talked about through Skype.

April 1-April 7:
I will be working on the app icon that would appear on an iPhone and in the app store. I will also start working on the design of the home page. 

April 8-April 14:
After my meeting with Steve, we will go over the final design for the icon and home page and I will continue to work on pages for the app. 

April 15- April 22:
This week I will finalize the home screen design, as well as start finishing the final pages of "The Perfect Food" app. 

April 23-April 30:
I plan to have all of my designs completed by the end of April so I have a few extra days to make any adjustments or to correct any errors. 

Some features that will be included in the app will be:
  • Map & location aware (GPS)
  • Social network sharing (Facebook, Twitter, Instagram, etc.)
  • Micro blogging

Week 8: Thumbnails & Notifications

Composition Patterns from 4ourth.com

The two composition patterns I choose from 4ourth.com were thumbnail patterns and interaction pop-up notifications. 

Thumbnail List:
Many apps on the market use thumbnail lists. They're easy to read and are one of the most commonly used patterns for scrolling. Thumbnail lists can be visually appealing and interactive by using thumbnail images and a small amount of text that would then link the user to the main page with more information. The two examples I have used are Yelp and my iTunes app, both from my iPhone. Both apps use small images to make the thumbnail information more visually appealing and then gives a small amount of information for each link. 

Here is a link to the thumbnail patterns: http://4ourth.com/wiki/Thumbnail%20List 

Interaction Notifications:

Almost all of my apps on my phone have some sort of notification that will pop up and alert me. 4ourth describes various actions for notification items, but the one I particularly like are the pop-up notifications. Pop-ups can be free-floating with space around all sides, or they could also be anchored to one side. The content of a pop-up can really be anything, and if I were to use a pop up notification in my app for example, The Perfect Food, I would use pop-ups to notify the user that there were no restaurants according to their search. It could also be used to ask the user to allow the app to use the user's current location, as shown below. The other example is a screenshot I took from my iphone for a text message notification.

Here is the link for pop-up notifications:

Friday, March 29, 2013

Week 7: Visual & Information Design

Scraps Article:
I chose to visit the blog, http://beautifulpixels.com/ and read an article about an app called, Scraps.
Scraps is an app for iPhone that makes it easy for users to quickly save thoughts that one might otherwise dismiss and forget the thought forever. The app allows you to easily save your thoughts with just a few swipes of your finger. I think I would find this app useful because like most people, I come across random thoughts throughout the day and can't remember them later on. 
I really enjoyed reading the article, and I think it also followed the anatomy of effective blogging, including the five blog components as well as the simple rules to follow when writing a blog. 
The author clearly explained his thoughts on the app after clarifying to his audience the purpose of Scraps, which I thought was very well said and he made good points. It was also short enough where I could read the whole thing and not feel myself trailing off or becoming bored.

Peer Evaluation:
1) I think having a social media outlet from the Joke Around app would be very appealing to users. Users could have the option to share jokes with their friends on Facebook, Twitter, etc.
Rating: 3
2) There should be an option to cancel every time you submit a joke, just in case you misspell something or aren't ready to commit to the joke you're about to submit to the server 
Rating: 5
*made comments in the video, this is definitely something the app should have
3) I'm hoping that the finished product will have more color, more of an appealing design. I think his draft was great, very straightforward but I would have just liked to see more color and appeal visually
Rating: 3
4) Martin mentioned that ideally, he would like for his app to have jokes submitted by people using the app, but in the beginning, he will only be using jokes from outside sources that he finds. Maybe there could be an option to view original jokes submitted by viewers and another option to submit common jokes from the internet. 
Rating: 2
*It's not that important but I feel like I read the same jokes online so it would be nice to have a feature where you could see original jokes created by your users. 
Here is the link to Martin's review of my Balsamiq
App Evaluation:

Menu Pages is an app that allows users to search from over 30,000 restaurants in select cities where you can view the entire menu as well as other information. I actually used menupages.com almost every day when I lived in NYC, it was extremely helpful for finding the perfect food! 
In the app, you can search by district, cuisine, price, features, and more! The only problem I had with this app is that it's only for major cities on the mainland like New York, Los Angeles, San Francisco and Chicago. 
  • similar to how my app would be set up, where you could search what's nearby or narrow down your results 
  • very accurate results and accommodating to users
  • only available for select cities 
  • not crazy about the home page design

Ness is an app that allows users to find new restaurants based on your ratings of other restaurants and gives you personal reccomendations on where to eat. It's similar to how Netflix or Pandora works when they're trying to find the perfect song or perfect movie for you.
It almost acts as another social media outlet because you create a profile, find friends on Ness, have followers, and build information on your profile. I'm not sure if I like this because how does this make this app stand out? 

  • sleek and modern design that is very appealing visually 
  • finds restaurants based on personal preference of other restaurants 
  • it's free 
  • social media aspect, it doesn't make the app stand out

Navigation Bars:
1) Gallery- gallery navigation bars are my favorite kind of navigation. It's very appealing visually to the eye and if you do it right, users are able to navigate your site or app based on the pictures you choose. Gallery navigation could also be interactive, like maybe the picture changes when clicked.
2) Springboard- I think springboard navigation is fun overall and makes it interactive for the user. Similar to gallery, each page is represented by an icon that the programmer designs. While there are universal icons for home and messages, it allows the programmer to think outside the box and get creative!
3) Metaphor- the metaphor navigation is very exciting visually, by using an object related to the app and connects it to the main menu. This can get tricky though because you have to choose the right metaphor so users know what it represents. 

Sunday, March 10, 2013

Week 6: Balsamiq

This week I designed my first app using the toolkit provided by Balsamiq. The changes I made to my prototype are as follows:

1) buttons for categories could be lists to allow scrolling up and down 

2) there was a lot of screens before actually getting to a list of restaurants, so there's always an option at the top of the screen that allows users to jump to results instead of putting in extra information.

Here's my design so far! Let me know what you guys think!

Thursday, February 28, 2013

Week 4: Prototypes and Storyboards

Point of View

As I stated in my first blog post for this class, I love to eat. I don't think you can ever have enough apps about food, which is why I want to create the perfect food app. In fact, I might even name it, "The Perfect Food." 

While I have a lot of apps on my phone that help me find places to eat, or look up nutrition for restaurants, and even have a Dairy Queen locator, I still seem to always have trouble finding exactly what I'm craving. 


As I said, even though I have Yelp and other great food apps, I often feel like I'm settling for less when I'm just picking the location that's closest to me. Take Yelp for example, you can type in "food," "mexican," and "restaurants," and it usually gives you a lot of options, which is no bueno if you're as indecisive as I am.

 I want an app where I can select what kind of mood I'm in for food, how close I want it to be, whether it's grab and go, whether I want sweet or savory, etc. I want an app that can narrow down selections for "the perfect food." So this is what happens on a daily basis for me pretty much:


And here is what I'd like to happen instead:


So moving forward with "The Perfect Food", I designed my first prototype below. 

Model 1:




Model 2:

Model 2 is basically the same as model 1 but I've added two new pages: distance willing to travel and what kind of mood the user is in.


Video Demonstration:

My app in action! Sorry about the sound in the beginning guys! It's just my AC that's really loud :) 

Wednesday, February 27, 2013

Week 3: Needfinding

At my internship, there's always a lot of hectic activity whether it's at the station or even when I'm out in the field. Regardless, I thought it would be a great opportunity to record some situations I find myself in that can be hectic at times, and find an opportunity to make those times less hectic and make the experience easier. 

Cigarette Butt Beach Clean Up

Last week my cameraman and I went out to Waikiki beach to observe an effort to clean up all the cigarette butts on the beach. The process was amazing and the results were mind-boggling, and it definitely gave me a lot of inspiration for media involvement. 


  • picked up thousands of cigarette butts 
  • picked up other garbage
  • worked together as a team 
  • took a long time for volunteers to go through the trash
  • very time consuming to organize the different kinds of trash; plastic, cans, cigarette butts, etc. 
  • some of the volunteers got distracted 
  • everything was hand written and calculated
  • possible cause for errors in calculations 
  • organizing and counting trash in a more efficient way
  • using some kind of technology to leave no room for errors 

Forever Roses at HCC

For Valentines Day, students at HCC build "forever roses" that are hand made out of copper and sheet metal. Every year they are extremely popular and sell out very quickly. 

  • made hundreds of roses by hand 
  • worked together as a team 
  • used recycled sheet metal and copper 
  • very time consuming
  • sold out of roses too quickly; not every student who wanted a rose got one 
  • director said sheet metal and copper was too expensive to make more roses 
  • didn't have an estimate of how many students would buy roses and therefore didn't have enough for everyone
  • have some sort of "waiting list" in advance so they can know an estimate of how many roses to make 
  • more students to volunteer to build more roses 
  • use the money that is raised for the roses to buy more metal for more roses next year 

  1. Volunteers at the Waikiki Beach effort needed a more effective and efficient way of picking up the cigarette butts. 
  2. Could develop an app that lets users know all the dangers of smoking cigarettes. 
  3. An app that could encourage people to quit smoking and therefore hopefully result in less cigarette butts on the beach. 
  4. An app that would be similar to Exel, where volunteers could then average and add the numbers of total trash picked up in each category. 
  5. A forever rose app, kind of like the girl scout cookies app where it's a countdown to how many days are left until you can buy forever roses 
  6. Also could develop an app that allows students to be on a waiting list guaranteeing them a forever rose on the day. 
  7. Other ways to celebrate valentines day- an app that could be all about DIY valentines gifts that last longer than flowers or chocolate. 
  8. If the forever roses are so popular, why not have other fundraising events throughout the year to help raise money for more metal for more roses?
  9. An app that could make people aware of how they can help clean up their community. 
  10. An app that could list beach clean up events according to your area 
  11. An app where you take a picture of something, and it estimates how many there are in the picture. Example: taking a picture of all the cigarette butts and the app tries to calculate exactly how many there are. 
  12. Instead of sending the trash that was picked up to another landfill, find a way to reuse it. 
  13. An app that could tell you all the different ways to recycle certain items in different ways. 

  1. I really like the GirlScout Cookie app, find cookies. You can use the locator to determine when and where Girl Scout cookies will be sold. I like this for the forever rose aspect, except it would be more of a countdown of when the roses would be sold, but they could also start selling them at various locations other than HCC. 
  2. Draw Something, this app gives me good inspiration for possibly submitting designs to request a custom rose. People could draw their designs on their phones using the app and then would receive a rose based on the one they drew. You could also have the option to share it with your friends. 
  3. iPhone calendar for beach clean up events. For this one, you could input your current location and a month to month calendar would show up with certain dates highlighting beach clean up days. 
  4. SnapChat is a good inspiration for a fictional app called, "how many?" or something like that. You can take a picture of something and the app will determine how many of that item there are. 
  5. Clorox my Stain. Another great app. This is my inspiration for telling users how to recycle different items in different ways. You could select what you wanted to recycle and the app would list DIY projects using the recycled item.

Friday, February 15, 2013

Brainstorming Brilliant Ideas

So for my brainstormed ideas, I came up with the following apps to help cure boredom while standing in line:

  • Build an aquarium
  • Fact or Fiction
  • Fun Facts
  • Hiking Trails 
  • Cheap Eats 
  • Joke Generator 
  • Workout Routine 
  • News
  • Paint your face
  • Find the difference in pictures
  • Build your own cartoon
  • Cookie recipes
  • Listen to music 
  • Find Waldo
  • Slingshot app
  • Test your hearing 
  • Build a room
  • Homework organizer
  • Photo editor 

My two favorites would be building an aquarium and maybe cheap eats. I also really liked fun facts too but for now I'll just narrow it down to the first two. As I said in my first blog, I love to eat, so an app that tells me where I can go to get good cheap food that's not chips or McDonalds I'm sold. If I was bored standing in line I would definitely be planning where I could go grab a snack after I was done standing in line. 

I also think it would be entertaining to build your own aquarium. The app would have different pre designed tanks with fish and decorations to choose from.

Build Your Own Aquarium:

Home Page
Users start by choosing what type of tank they want
After selecting what kind of fish you want, you can choose a
name and put him in your tank 

Here is a rough sketch of what a tank might
look like. Each fish have needs that are
happiness, hunger, and fun level.
Users have to make sure their fish's needs are
taken care of by feeding and playing with
each fish. You also have to keep the tank clean.

Cheap Eats:

Home Page

The first thing the app needs to do is determine
your location. Users can either entire their city, state
and zip manually or the GPS can do it for them.

Users can start by selecting whether they want
breakfast, lunch, dinner, or just a snack. Then
user type in different tags for what they're craving.
This allows the computer to narrow down certain
restaurants according to the user's needs. Or if the user
doesn't want to enter tags, they can just simply
see what food places are near them.

Here the program will give users different
restaurant options according to the tags
 they entered or  what is nearby.

I asked my boyfriend if he would look over my aquarium app, mainly because he gets as bored as I do and just as easily. He really liked the idea of being able to build your own aquarium. He also suggested that instead of a pirate or pink tank I do Ocean tanks, lake tanks, fresh water tanks, tropical reef, etc. He also said there should have some sort of goal when playing the game, that maybe you could raise the fish to sell them to earn coins and then you're able to buy bigger fish, prettier scenes, etc. He also said that instead of selling them you could breed the fish to make cool hybrids, which I liked that idea. I think it might be cool to do a combination of the two, maybe breed the fish to make cool hybrids and then sell them to see how much they are worth. 

His feedback really helped me a lot. I think people might get bored just building an aquarium and having no goal or purpose. So I think by incorporating those ideas, it would be a really cool app for people to play with!