Cloud Servers & Mobile Devices

cloud1

While it wasn’t essential that the students understand everything going on in the background to design the app, it was important that they at least realize there’s stuff behind the scenes that make all this magic work.

I broached the subject by discussing how they would find their friends on the app, to share lists, and comment on each other’s lists. We had to go through the entire process of inviting a friend to see your list. Most of the students were familiar with Instagram, so they had a general idea, but they never thought about the step-by-step process:

  • If the friend has the app…
    • Search for the friend’s username, or enter the friend’s username
    • Have the app send an invitation to your friend that you want to be “friends” on the app
    • Have your friend accept or reject the invitation
    • If the invitation is accepted, add that friend to your list of friends
    • If the invistation is rejected, don’t add that friend
  • If the friend doesn’t have the app…
    • Contact the friend online to get the app
    • Make sure you tell your friend your “username”
    • Wait for the friend to install the app, and “friend” you (as above)

The students came up with several ways to contact their friends online: email, texting, Skype, TextFree, WhatsApp, Instagram, Kik, and several ways offline: phone call and speaking with the friend face-to-face. I will implement that feature over the next few days.

I asked the students to come up with more app names, since the last set of names were mostly taken, and asked them to start designing an icon for the app. Some of the students are very artistic and the result would be very cute if we could use the icon they create.

Colorful backgrounds

backgrounds1

A few days later, I implemented the colorful backgrounds (about a dozen patterns, and about two dozen color choices), and showed it to the students. I thought some of the patterns were too distracting from the text on that screen, but the kids loved it. They asked for the ability to add their own backgrounds – maybe in a future version.

The students were concerned that the app needed an FAQ section. They wanted a “search-based” help – type in some words, and then it returns help related to the query. While that’s a good idea, I felt its important for the app to be self-evident, and not require help. The best apps don’t need any help; some have an introductory video (like Angry Birds).

One student was concerned that his little sister would mess with his wish list, so he wanted to password protect the app with a login. The design of a login screen doesn’t take much time, but it opens up lots of other questions: what happens when you forget your password, what do you do if you don’t have an email address to send the password to, should your parents have access to your list if they don’t have your password, and so on. I decided to push that feature out to a future version.

We weren’t making much progress on the points I needed to cover, and only a handful of students attended that day, so I moved on to an easier topic: name of the app. We still didn’t have a name, and we needed one. Here are some they came up with:

IMG_1251

Nothing that great, but it was a start. When I checked, most of them were used by other apps, or the domain name (website) was unavailable.

First Demo

demo1

I was excited to show the class the demo of the app so far. I figured they would be amazed at how quickly it all came together, and how their ideas were reflected in a real app. They were underwhelmed.

“It’s boring” was their first comment. So I told them its up to them to figure out how to make it more exciting. We discusesed the idea of incremental development – they come up with ideas to improve each screen, I do it, and we try again and again.

Here’s the original sequence of actions to add a gift:

Search for a toy (such as FURBY):
addToy1

Look at the results that were found for FURBY, and select one:
addToy2

Press on the picture for a few seconds, and press SELECT GIFT:
addToy4

A new screen appears where you can fill out the toy’s name and its description:
addToy5

When its all set, select who you want to send your wish list to:
addToy6

The students kept commenting on how boring and not fun it looked, and they thought they needed to redesign all of the navigation menus. Following their design, here’s how the navigation menu looked:

menuRedo2

They came up with some alternative designs like this:

menuRedo1

But the class voted to keep it the way it was. The FRIENDS menu was similar:

friends1

They really liked the right icon. The face with sun-glasses showed whether or not a friend can see your wishlist.

Here’s what they proposed for the app to be less boring:

  • Be able to set the screen color or use a cool patterns
  • Be able to set the top & bottom navigation bar colors
  • No borders between list items when its a navigation menu
  • Better icons on the bottom navigation bar
  • INBOX instead of HELP on the bottom navigation bar

Sending the list to your parents

IMG_1250

Once the kids have created their wish list, they need to send it to their parents.

Getting that concept across to the students wasn’t all that easy. I thought the kids would see that the main purpose of the app was to create a list and send it to the people who will buy the gifts (for them). They completely forgot about this part of the app.

Most kids thought they could push a button and the list would magically go to their parents. They didn’t realize that we needed their parent’s email address. They also wanted a way to send their list to their friends (who didn’t get the app, or who don’t have an iPhone or iPod).

I tried working with them on the logistics of how to do this (send the parents a link to the website, and have the parents see the list at the website), but this was lost on them. They didn’t really “get” the idea of cloud storage (where their lists are stored), or how do send the email (with the web link) to the parents. I also found out that many of the students did not have email enabled on their mobile device.

We switched gears and talked about list re-ordering: will they want to change the order of the items in the list. Re-ordering was one of the primary reasons I thought the app was a good idea – I saw my own daughter change the priority of gifts on her hand-written list constantly. We agreed on the standard Apple method of reordering the list – put the app into EDIT mode, and then drag each item into its proper order.

We were meeting about three times per week, so my primary task after we met was to implement what they came up with. I was working about 10 hours per day, six days per week, programming the screens on the app, how the app communicated with the cloud and the cloud infrastructure. After 3 weeks or so, I was getting close to showing them the first demo of the app, but I still had a slew of outstanding issues to resolve with them.

Searching for toys

SearchScreen1

The class today was devoted to how to search for a toy and add it to their wish list. Leading the students from the concept to the layout was a journey though how much magic people attribute to the Internet.

The students had the perception that they could type in “Lego Toy”, and it would add the exact lego toy they wanted to their wish list. I lead them step-by-step though what actually happens when they search for something on Google:

  • You type in your search query. You press SEARCH.
  • Google returns a list of websites.
  • Based on a 2 line description in the list of websites, you choose one by clicking on it.
  • You see that website, and determine if its what you are looking for. If so, you take some action.
  • If not, you return back to your Google results and try something else.

Each of these actions had to be programmed into our app. We started by laying out the initial search screen. It would have a box at the top, and a SEARCH button. Several of the students mentioned that it should be a “safe” search, i.e. not return websites that were inappropriate for kids. (Their parents trained them well).

The next screen would show the websites that were found, and by pressing on one of the returned items, it would the subsequent screen would be the actual website. I explained to the students that pictures should not be included with the search results, since the pictures might not be kid-appropriate.

The students said that if they found the toy they were looking for, there should be a big button on the screen that says “ADD TO LIST”; otherwise, they should be able to go back to the list.

One student asked “What if they don’t know how to read?” In working with kids (in building an app), I learned there’s no such thing as a stupid relevant question (there were many irrelevant questions). From that question, we talked about the target market – the age group the app designed is for. What grade level should the app expect kids to have? What words do the kids not know yet? For example, most students did not know the meaning of the word “via”. If you play with the app, you’ll see that the sentences assume a 5th or 6th grader.

When selecting the toy to ADD TO LIST, they wanted to include a picture of that toy in their wish list. If there’s only one picture on the website, the ADD TO LIST button is easy. What happens if the website has several pictures of the toy – how do you pick which picture to use?

One solution was to have another button “SELECT PICTURE” and then press the picture on the page that they wanted to use. That meant selecting a gift required 3 actions: press ADD TO LIST, press SELECT PICTURE, then touch the picture they wanted to use. Working with an app should be easier than that, so we decided a kid would press on a picture for a few seconds to accomplish all three actions at once.