Design Process: Maintenance vs Problem Solving

Lo-Fi Wireframe Sketches

I’m currently designing a new digital product that is quite complex. My design is trying to manage all of the complexity and, where reasonable, simplifying the UI. Somewhere along the way, though, my work seemed to focus more on maintaining my wireframes rather than solving design problems.

To shake things up a little bit I decided to step back and create low fidelity sketches. The sketches helped me quickly focus on the essential design challenges and the results were fantastic. I updated the wireframes with the fresh ideas and the design is really coming together. Hooray for lo-fi sketches.

Improving Instagram

With all of the Instagram news lately, it’s hard not to think about it. It’s not clear what sort of impact Facebook’s acquisition will have, I’m hopeful that much will not change. If anything were to change, I hope it’s some of the experience design.

I think the Android app is good. Sure, the app is a direct port of the iOS version, and it doesn’t make use of the latest ICS Android design patterns. All that is obvious. In order to get a little deeper into the structure of the app I conducted a practical  task analysis of the image capture & upload process.

Here it is:

Instagram Task Analysis by Amha Mogus
The green boxes represent an action, such as taking a picture or hitting the upload button that a person needs to take in order move forward. Basically, someone can take a picture and upload it in 3 button presses (4 if you apply a filter). That’s very quick, simple, and that is why this app is a huge success.

For the most part this flow is solid. The notable exception is re-taking a picture, which has more to do with the navigation patterns employed. There also seems to be an opportunity to improve or optimize the image capture & upload process.

For devices that have larger screen sizes (e.g. 4.3, qHD) a lot of screen real estate goes unused while taking a picture. One way to utilize that underused space would be to incorporate some of the image editing functions. Perhaps the screen can display a list of most used filters and allow one to upload the image from that screen and avoid edit screen altogether.

Here’s an example:

Instagram Wireframe by Amha Mogus

The screen on the left, image capture, relies primarily on the action bar design pattern. The next screen, edit photo, also uses the action bar. These sketches leverage contextual cues better than what’s in production, and organize functionality in a more logical fashion. Also, you can upload an image directly after having taken it.

Hopefully this is the sort of stuff we’ll see from the acquisition. More soon.

Going Offline: A Story

This entertaining article is the first post in a 6-part series where the author, a cartoonist/writer, writes about his experiences of going offline for 4 months. I enjoyed the series and the cartoons.  I attempted a similar experiment (though I only refrained from all social media for 6 weeks) earlier this year. The experience, and the insights one gains from such experiments are really rewarding. Give it a try sometime. Meanwhile, enjoy some of the cartoons.

Image from the Center for Cartoon Studies.

By James Sturm

Design Exercise: Educational Aquarium

During my Cognitive Science class today, the class was given a 10-minute design exercise to explain the importance of situated cognition. We were told to design a solution that would teach children about an aquarium. Beyond the time constraint, we were free to design and highlight any aspect of aquatic life.

This is what I came up with:

Design outlining one possible way of creating a 'smart' aquarium

  • Goals
    • Highlight complex relationships, such as the food chain
    • Provide detailed information about the animals, in-place
    • Provide a connection between the animals in the fish tank, to cultural artifacts such as movies or food item
  • Summary
    • Using a touch screen, children would be able to interact with the aquatic environment. For example, when a child touches an area where a fish happens to be swimming, information related to that fish would appear on the surface of the fish tank.
    • I try to visualize complex relationships on the fish tank. An LCD appears to the right of the fish tank, in order to provide more information and/or feedback to the students.

Not bad for 10 minutes. =]

Sketchboards @ Adaptive Path

A really good and speedy way to develop user experiences:

Drawing & Sketching

One of my hobbies throughout the years has been drawing. From time to time, I get the drawing bug and I put pencil to paper and lose myself for a number of hours. Fortunately, I decided in 2000 to centralize my artwork and put everything into a sketchbook. I scanned in some of my previous work:

[nggallery id=3]

With recent talks by Google and Razorfish, I realized how important sketching could be during the design process. My drawings now have an outlet, which is exciting. Most of my current projects include a few of my sketches (which easily help articulate an idea, especially during group work). Moving forward, I’ll continue to hone my rapid-sketching skills.