Week 13

04-22-2015

Project Three introduced
Design Thinking & Mobile
DeviceOrientation API

Introduction

This week is a fun one. We’ve rounded third and are headed for home, so now we get to jump into some really slick stuff. While PHP and MySQL are incredibly deep topics, we’re going to table them for now. Instead, we’ll be looking back to the basics of the web: HTML, CSS and JavaScript. If you’re not terribly comfortable with JavaScript, reach out to me a lot over the next few weeks, I don’t want you falling behind. We’ll also be starting the final project this week. The final project is even more open-ended than the last one and I’m excited to see what you guys come up with. As always, start into the material early and work on it often throughout the week. Reach out to me if you encounter problems.

Design Thinking & Mobile

It’s clear that mobile is the future of the web. For years, Facebook seemed to avoid mobile. Their strategy seemed to be to focus on ways to get folks to do what they normally do on the Facebook desktop site on their phones. It kind of failed miserably. Since the early days of Facebook, they hired designers, developers and product folks from the most successful mobile apps. The most high-profile was their acquisition of Instagram for a billion bucks (yeah, billion). However, they also hired away designers from Apple and some of the most well-known iOS app developers and designers. Clearly, they were gearing up for something big. Many nerds assumed this was because they wanted to launch their own phone. Instead, they’ve leveraged Android to create a layer that replaces many of Android’s key features with Facebook Home. Also note that rather than put Facebook on a phone (which has been their strategy up to this point), they’ve taken the individual bits of Facebook and rethought how they should be configured on the phone. For instance, the scrolling photos on the lock screen replace the timeline.

It’s also interesting because it’s built on top of Android. Google has always promoted the openness of Android. However, Facebook has now used that to build something that keeps Google away from what they need. Google built Android in hopes to get more folks to use the web so they can track more folks and then sell advertising to those folks. Now, Facebook gets that data. Facebook gets to sell those ads.

For an excellent analysis of this, check out http://www.asymco.com/2013/04/10/making-rain/

Now, why does this matter to us (besides “mobile is cool”)? Use the design thinking techniques we’ve looked at. What is the job-to-be-done by Facebook? Does that job make sense on a mobile phone? How would you expect consumers to react? Will they trim their friends list so they don’t see the dog picture from a random kid from third grade on their lock screen? Would they use certain features more on a phone than on a desktop? How would those personalized ads be received? How would you expect Google to react? If Facebook is fishing further up stream, what can Google do?

Project Three, Teaming Up and The Big Idea

For Project Three, you’ll be working in small cross-disciplinary teams. The most successful digital product teams work across disciplinary boundaries to solve problems and build products that delight customers. Up until this point, you’ve all been working in individual silos. No more! Instead, you’re going to work in small teams to develop a web-based app for a tablet or smart phone. I will assign these teams soon.

Here are the guidelines for the teams:

  1. You will meet together for at least two hours a week either using Google Hangout or in person.
  2. You will meet with me as a team when needed. All team members should be present.
  3. As a group, you should discuss your “Resources/Processes/Values (RPV)”. RPV is a framework that Clay Christensen uses to discuss companies. I, personally, also think it’s a great way to capture information about members of a team. For Resources, list what kinds of resources you have access to. This is both hardware (PC/Mac, tablet, scanner, etc.) and skills relevant to this assignment. For Processes, capture what you know how to do with the Resources you have. For instance, an individual might have skills like “good at typography” and “good at layout”. A Process that they can do with those skills might be “I can design Photoshop mockups of interfaces really well”. Finally, Values: what do you care about? Christensen makes a key point on Values: if you’re not spending your time or money on something, you don’t care about it. Stuff that isn’t necessarily directly related to this class is also good to know. Things like, “I care about music, I play bass in a band” is great as well.
  4. All members will carry their own weight. I have an incredibly strong distaste for folks who rely on others to do their work for them. As such, a large percentage of the grade for this project will be based on your work with your group. If you don’t pull your own weight, your peers will ding you. I will notice in weekly check-in meetings. Your grade will be much worse. Play nice, work hard and you’ll do fine.

Once I’ve assigned teams, you’ll need to meet for at least two hours. Come to this meeting with a handful of concepts to present to your team for the project. The guidelines for the project are relatively simple.

Project Three Guidelines

  1. It must be a tablet or smartphone web-based app that is friendly with the iPad/iPhone. I’m sure there are other devices that have nice tech specs out there, but if you want to develop something for the masses, the iOS device is the only one that matters. I know many folks don’t have iOS devices. No worries. If you have a Mac, you can do your testing on the iOS simulator that is baked into XCode which is a free download from the Mac App Store (and also comes free on the installation discs on older Mac OSs). If you have a PC (or have a Mac, but want to test on the physical device), you can borrow an iPad from the AIMS office. Talk to Kate and you’ll need your Banner ID. If you’d prefer to do a short-term lend, the libraries (King in particular) also loan out iPads.
  2. It must make use of at least one HTML5 API exposed through JavaScript. This could include (but is not limited to) the Geolocation API and the Device Orientation API (mentioned later).
  3. The app must be goal-oriented. The app must have a reason to exist. Users must have a goal to accomplish. This could be anything from a game to a weather app to a cooking training app to a productivity tool. It is not a neat tech-demo that looks cool but doesn’t let your users do jack squat. I’d encourage you to leverage the values you have learned about to help drive what the app should be about. So, for instance, if other people in your group express interest in music, maybe you could do some sweet music-related thing.
  4. It must be finished. Whatever you turn in must be finished. Not just ideas, but really working.
  5. It is the culmination. I expect it to leverage many of the things we’ve discussed. This includes the design aligning well with Tog’s Laws. When appropriate, it should leverage PHP/MySQL. If appropriate, it could leverage a service API like Yelp or Rotten Tomatoes.
  6. So Project Three is a lot like Project Two, but in this round you are working in groups, which creates a unique dynamic. Part of your grade on this assignment will be based on how well your group works together.

Start off by introducing yourselves. As you’re meeting with your team, discuss everyone’s concepts. Meet in a room with a whiteboard and everyone should bring their own whiteboard marker. Do not sit down. Everyone should stand and huddle around the whiteboard. Share your concepts. Hopefully, one concept will emerge as great ideas. Discuss them, refine them, etc. Sketch what the app could look like on the whiteboard. If you sketch it to scale, you can get a sense of how big the buttons will need to be for touch, how much you can fit on screen, etc.

Then, as a group, write up The Big Idea in the format discussed in previous weeks (starting in week three if you need a refresher). One individual should note The Big Idea; maybe even capture photos (camera phone is okay) of the whiteboard.

Once your team has the concept down, you should assign tasks to individual team members to complete by next week. Examples might be “design user interface mockup in Photoshop” or “build sample code of using CSS3 3D rotation working with the accelerometer”.

As a team, go ahead and schedule a thirty minute time block with me next week. When we meet, I’ll want to review your Big Idea, sketches and progress on tasks. I’ll want to know what you intend to work on next and I’ll coach you in helping you refine the concepts down to something manageable based on your team size and time left over.

Finally, we’ll all meet physically (for those of you in Oxford) during the last week of classes to see what each group came up with (this is when the assignment is due).

Development: Using the DeviceOrientation API

We’re almost done covering all of the development topics we’ll cover this semester. This week, we’re going to look at another JavaScript API. We’ve already covered the Location API. This week, we’ll look at device orientation. This allows us to know when the device is being moved, what angle it’s being held at and which direction it’s facing. As you can imagine, it’s pretty great.

Artie put together a demo of the key stuff available at http://artiekuhn.com/classes/mu/422/deviceorientation. It won’t look to slick unless you’re using a mobile device that supports this stuff (in other words, don’t bother trying it on your laptop). Before you dive into the code, skim this post to get the idea:

http://www.html5rocks.com/en/tutorials/device/orientation/

Code for Artie's device orientation site

Okay, now jump into the code. You’ll notice that we can measure changes in position, angle and orientation (north, south, etc.).

This week, take the code and do something cool with it. It doesn't matter what it is. Maybe you make your own compass that always rotates to north. Or what if you used the 3D transformations in CSS3 to make text on your screen skew as you turn the device? Or what if you went less literal and made the screen turn red when the device is being shaken and fade to a nice blue when things calm down? Whatever, just kick the tires and make something neat. If you need a primer on CSS3, check out this little cheat sheet Artie put together a while back:

http://artiekuhn.com/html5/css3InHTML5.html

The (no-longer tentative) groups are:

Assignment

:-)