Archive for the ‘iPhone App Design’ Category

How to Build a Fantasy App by Using Magic (Strategic Design 4)

Wednesday, January 25th, 2012
plato-bust.jpg-tm

"I endorse this message" — Plato

The strategic design of our next app, Languages, continues apace.

In the last post we gained an understanding of our personas’ experience without an app. We now need to imagine how an ideal app could make this experience 100% better, without worrying about bothersome constraints such as money, technology, time, or reality. It’s time to build a Platonic app (Plato, as you’ll recall, thought that all physical things are fail and that their is an ideal, perfect form of all things floating in heaven). Construction materials include aether, fluffy-golden clouds, and joyful thoughts.

It is essential to have a vision of an ideal app so that we know to what our imperfect app should aspire. You have to have a clear understanding of the ideal if the real is going to approximate it.

Here’s how it works. We look at our three experience domains (solo, social, and travel), look at all of the experience nodes in those domains, and then yell out ideas for how an app could improve those nodes 100%. Jeremy then writes these ideas on a sticky and posts them in our “ideal assistance” section beneath each experience node. The aggregate of all these ideas is our fantasy app.

Right

Please pardon the calligraphy and the shaky-cam.

For example, when we examined the “social” domain, we determined that when you’re in a business meeting in Milan and an Italian colleague says “sono molto dispiacentissimo” you want to be able to nod your head and find out what that means without him knowing that you have no idea what he said. You don’t want to look like a fool. So we wrote down “incognito,” indicating that the ideal app could feed you definitions on the sly (of course this sounds impossible; but stick around). We also determined that an ideal app would feed you definitions extremely quickly, because you don’t want to spend five minutes in the street figuring out what “Achtung! Achtung! Ein Auto kommt!” means.

Once we have posted all of the characteristics of our Platonic app on the wall, we go through and draw a big, red x over all features that (1) are beyond our means or (2) would bloat 1.0. We call this step “killing the baby.”

Finallynow1

Killing the baby is a traumatic experience for some.

So, of the two feature examples above, we put a big, fat, red x on “incognito” due to technical constraints. But we kept the idea of quick definitions because we felt that it was doable and essential.

What we’re left with is the list of features that will appear in Languages 1.0.

Mapping out the User Experience (Strategic Design Part 3)

Thursday, January 19th, 2012

early_map

Back to Languages.

So we are describing the process of strategic design, in which we figure out the company’s goals, the user’s goals, and the intersection of the two. The purpose of this is to create an app that exists at that point of intersection. First, we established Tapity’s goals for the Languages app. Then we developed user “personas”—fictional users with concrete characteristics. Now we can move on to the next step of strategic design: user experience mapping.

Now that we have our personas, we need to map out their current experience without an app. This helps us create an app that is tailored to the user’s actual experience. Those who skip this step risk creating a list of features that sound helpful in the abstract, but are not helpful to users in their actual experience.

First, we need to decide what the major experience domains are. An experience domain is simply an area or realm of experience. In the case of Languages, we decided that they were (1) “solo,” (2) social, and (3) travel. Solo involves any linguistic situation in which it is just you and the language; reading a foreign book, for example. Social encompasses any situation involving discourse between you and someone else. And travel explains itself.

We put a big sheet of paper up on our Tapity-blue wall and then demarcate the three domains. We then place our personas on the far left of the paper. Now we’re all ready to map our our personas’ experiences across the three domains.

Finally1

We first turn to Emily, our student, and analyze her solo experience. She studies French. So we decide that she (1) looks up French words for her workbook exercises, (2) looks up words for writing essays in French, (3) looks up words while reading Les Misrables, and (4) uses a physical French-English dictionary. We put up stickies with drawings to represent all of this.

Finally-2

We then repeat this process for all of our personas across every domain. We try to cover all possible experiences in order to get the fullest possible picture of what we’re dealing with. The wall gradually fills with stickies.

Finally3

Now the appless user experience is storyboarded.

Next time, if our app could do anything, how could it produce an ideal user experience?

Mobile Accessibility: First Impressions

Wednesday, December 21st, 2011

Accessibility Icon

On December 5-6, I attended the M-Enabling Summit in Washington, D.C. The purpose of this conference was to consider how to make mobile devices and applications accessible to persons with disabilities and the elderly. I am new to the accessibility field, and I want to share my initial impressions and take-aways from the standpoint of an app designer:

Nothing about us without us. The siren call at the conference from those with disabilities was “Nothing about us without us!” People with disabilities are used to being thrown a bone here and there so that corporations can say they have “done” accessibility. What is really needed is what good designers provide: development of apps (and devices) based on a thorough user experience analysis that is based on thorough input and feedback from actual people with disabilities and elderly people. Design of this sort comes naturally to good designers, but we do not always have clients willing to pay to do this kind of design work for people with disabilities or the elderly. For businesses who really want to do some good by these folks, have the user experience design done right for them, which also means with them.

Government mandates needed? There was a definite tension between those who want to ensure accessibility through government regulation and those who say that well-meaning government regulation in this field actually stifles innovation and progress in this area. The most sensible argument of the pro-regulation folks is that the market for users with disabilities and the elderly is too small or too fragmented for businesses to cater to it without being required to do so. The most sensible argument of the anti-regulation folks is that mobile devices themselves are a huge boon to the disabled and elderly, and we did not get them by government mandates. One thing both camps can agree on is that the more the market for users with disabilities and the elderly users can be identified and quantified, the better off everyone will be. With a reported 6 billion mobile subscription in the world and probably at least 1 billion of those held by the elderly or persons with disabilities, I think understanding this market in order to cater to it is a promising direction.

Apple, awesome. Third, Apple is way ahead in this area. Just open the Settings app on an iPad or iPhone, tap “General,” then tap “Accessibility.” Explore what is there. Amazing. Check out Apple’s iOS Accessibility Overview. To tell the truth, much of the conference was about trying to provide for Android, Blackberry, and Windows Mobile what Apple has already provided in iOS. The other mobile OS companies hardly seem to be trying in this area. One interesting comment came from Paul Schroeder of the American Federation for the Blind. He said that in a way Apple has hurt us because the other device manufacturers can now say, “they can always just choose an Apple device.” If that is the attitude (and it seems to be), the implication is that the market is not big enough to make it worthwhile to supply such accessibility features. Again, I think that perception could change. And note that the disabled community wants to have the same range of choices in mobile devices that everybody else has. Can’t blame them for that.

Got a lot more to say. Plan to follow up with some more posts.

Personas: some assembly required (Strategic Design 2)

Wednesday, November 23rd, 2011

Now we’ve established how Languages serves our business goals, identified the market, and sized up the competition. We’re convinced that the app is a good idea. The preliminary investigation ends. We can now pull out the microscope to analyze our potential users.

We first have to identify all of their relevant characteristics. We have a leg up, in this regard, because I happen to be a linguaphile. I’ve studied various languages seriously (Espanol, Italiano, Deutsch) and have dabbled in many more (Latin, Greek, Swedish, Old English). I’ve studied languages over an extended period of time and in many academic contexts. I’ve used all sorts of translation dictionaries, physical, digital, and mobile. So I basically embody many of our use-cases (not the business one, unfortunately).

After thinking about it, doing some research, and banging around ideas, we come up with a list that runs the gamut of user characteristics. It looks something like this:

Screen Shot 2011-11-23 at 1.26.56 PM

We identify which of these characteristics we should focus on. We decide to not worry about the professorial use-case, reasoning that foreign-language professors either won’t need Languages or will demand something much more academic and rigorous than we want to provide. We put asterisks beside the characteristics that we deem important.

We take the salient characteristics and click them together into several personas. These personas, on the one hand, embody the important user-characteristics; but they also help us think about how our app fits in the context of a real person’s life. Personas bring us out of the abstract and into the concrete. And we find that abstract thinking is the death of good UX. Concreteness, on the other hand, forms the foundation of good design.

We then come up with this:

Screen Shot 2011-11-23 at 1.40.58 PM

Now we’re designing for “actual” people. We can now barrel ahead into the next stage of strategic design: mapping out the user’s experience.

We’re going to need a wall for this.

DSC_0655

The Preliminary Investigation (Strategic Design 1)

Thursday, November 17th, 2011

scotland_yard_investigator

Everyone knows that they have a great idea for a killer app that will revolutionize the world and make billions. Be that as it may, between the idea and the reality falls the shadow. Build a better FourSquare and the world will not beat a path to your door. The streets are littered with the corpses of Google killers and social camera apps. Let’s not be those guys.

So for this to work we have to begin our strategic design phase with four questions.

How does the app serve company goals?

gradesLogo

Our baby.

In our case, designing in-house apps is our first love. We happily help clients develop apps with design of the highest caliber; and this is Tapity’s primary source of income. But we are starry-eyed entrepreneurs at heart. And as such we have to constantly develop products that we can call our own. We are parents who want biological children. This is one of the primary reasons why we are designing Languages.

How big is the market?

Not all markets are created equal. Steve Jobs recognized that creating products with universal appeal makes good business sense. Hence, iTunes, iPhoto, iLife, iPad, et al. So a message for Don Quixote: maybe it’s best that you stand down on that piano tuner app and start questing for some vast and untapped market spaces.

In the case of Languages, it turns out that the market is much larger than you’d think: Sonico Mobile has learned from its iTranslate success that there are millions of iPhone users clammering for translation apps. Globalization is on the rise. The world is flattening, and so forth. And in this environment of tightening digital, economic, and political networks, it helps to understand what the guy next to you is saying.

Who’s the competition?

HesGoodButNotTHATGood-ROTJHD

Entrenched competition in this sector. Better look for some uncontested space.

Ideally, your app would exist in a blue ocean market—a market with zero competition. When we created Grades we were creating a whole new product category that had never existed before, like the iPad, but on a much humbler scale.

Sadly, in the case of Languages we do have myriad competitors. But the good news is that the translation dictionary domain really isn’t a red ocean. Although there is a glut of products, there are still huge openings for a new product in many fields: price point, design, real-world metaphor.

Consider it a pink ocean, I guess.

Is it feasible?

Can we make it happen? In the case of Languages, yes. Sonico has excellent programmers. They’ve also acquired the dictionary databases. We’ve got the gear and the wherewithal. Now we just need to get started!

Our Secret Sauce

Thursday, November 10th, 2011

And now our discussion of Languages must pause for a brief interlude.

Screen Shot 2011-11-09 at 7.52.49 AMThree years ago Jeremy began blogging about how to design great iPhone apps. Since then he and we have been flailing around, trying to discover the perfect process. After three years of reading, researching, head-scratching, and good old-fashioned trying, we’ve developed the recipe for great iOS design—our secret sauce. We’ve learned many lessons from the gurus and Buddhas who went before us. But we’ve also tailored their insights to the iOS universe. And we will demonstrate this tailored process in our development of Languages.

The sauce breaks down into three steps: strategic design, interaction design, and visual design.

Strategic design

stratego-1

Long before you start placing buttons and pushing pixels, you have to ask some fundamental questions: Why in the world am I making this app and who cares? The purpose of the strategic design phase is to find answers to those two questions.

Strategic design requires that you to ask, “How does this app help me meet my personal or company goals? What’s in it for me? What’s in it for my business?” But strategic analysis also involves much more than gazing into the mirror pool of your soul. You must also survey the app’s market and pick apart the competition.

Additionally, you have to zero in on your potential users. We assemble a comprehensive list of user characteristics. We then click these together, lego-like, into several personas that cover all the most important characteristics. Next, we map out the user’s current experience without an app. Then we fantasize how an ideal app could better this experience. This leads us to a set of features, which we then whittle down to what is doable.

Interaction design

This is a TV remote.

This is a TV remote.

Once you know your app’s scope and the personas you’re designing for, you can begin wireframing. We generally use OmniGraffle to create preliminary sketches of the interface. During this process we constantly keep our personas’ goals in view. One of us takes the lead to create a rough draft. We then show one another what we did and debate and iterate, debate and iterate until we’re both convinced that we have the perfect design. We also interact with users to get further insight.

Wireframing requires a vividly experiential and empathetic imagination. This is because you have to constantly imagine how the user would experience and interact with the buttons and bars and elements that you’re cobbling together.

Visual design

Screen Shot 2011-11-10 at 10.55.09 AM

Once we are satisfied with the interaction design, we begin the process of beautification. We fire up Photoshop and create the “skin,” the graphics.

But visual design entails much more than applying makeup to the wireframes. It allows you to improve the interaction design by making the interface clearer. Color, line, shape, and texture bring certain elements to the fore, deemphasize other elements, and guide the user’s eye. This can make the interface even more intuitive.

And the other purpose of visual design, for us, is to take a functional app and make it more than that—to make it absolutely delightful. Subtle touches, neat little quirks, real-world themes, Easter Eggs—these are all things that come in during the visual design stage that add a factor of delight.

What our next app does

Friday, November 4th, 2011

We’ve announced that our next product will be called Languages, created in partnership with Sonico Mobile. I’m sure you’d like to know what this app does. But first, a story.

Once upon a time

Screen Shot 2011-11-04 at 10.54.59 AM

Build a universal app.

The idea occurred to Sonico after their success with iTranslate. Drawing from Google’s translation engine and featuring a crisp UI, iTranslate garnered millions of downloads, rocketing into the stratosphere of the most-downloaded apps. Clearly they had done something seriously right. Part of this something was universality: apparently apps that serve translation needs have massive universal appeal. And, if well-executed, universal apps, such as Angry Birds and iTranslate, can get an insane number of downloads.

Sonico’s CEO, Alex Marktl, told us that, as the months passed and Sonico studied their analytics, they discovered something interesting. A high percentage of iTranslate users were primarily translating one word. Furthermore, these users had to (1) type in the entire word before getting a translation and (2) had to wait for iTranslate to pull the translation down from the internet. So, although Sonico will continue to improve and push iTranslate as the premier translation app, Alex felt that there must be an app that can better serve the one-word use-case.

Words, Words, Words

Well, there are tools for finding the meaning of words. They’re called dictionaries. And the App Store does have a bunch of these. But they had several problems. First, they were generally either online and cheap or offline and costly. One of the best translation dictionary apps, Larousse, costs $5.99. Others range as high as $19.

pacmoney

Most of the translation dictionaries on the App Store are too expensive

Another problem was that all of these dictionaries had only one language-pair. So you break open the piggy bank to afford a down-payment on a dictionary that only helps you with Espanol, or whatever. None were like iTranslate, which features myriad language pairs.

And the final problem was that none of these apps were as well-designed as they could have been. Some, like Larousse, were functional. But none had the wow factor. None went that extra mile or had that extra dash of pizzaz. None of them used a real-world metaphor.

And so…

The idea was conceived: an offline translation dictionary with around twelve language pairs and a killer UI—all for a killer price of $1. Our responsibility is the design. And we are extremely excited about that because we want to innovate this space into the future. We want to create an app that will set the standard and define the genre. Basically, we want to create the translation dictionary app.

Link: 7 Keys to Unlock an Apple Design Award

Thursday, October 27th, 2011

Screen Shot 2011-10-26 at 2.12.43 PM
Ever since winning an Apple Design Award I’ve been thinking about how we can use the ADA judging criteria to help us build better apps. The result is an article that was recently published on UX Magazine, entitled 7 Keys to Unlock an Apple Design Award. I would love to hear your thoughts on the article!

Learning from Steve Jobs

Thursday, October 13th, 2011

Steve JobsFolks all over the world are shocked by the passing of Steve Jobs, even though we all knew it was coming. I think the shock is from the realization that the Edison of our time is gone. As we recover from the shock, it is fitting that we ask, what can we learn from Mr. Jobs? On one hand, the combination of creative, marketing, consumer, and industrial genius that resides in a Jobs (or an Edison or a Disney) cannot be studied and mastered. On the other hand, I believe we can learn and master aspects of Jobs’ pattern of genius.

The best summary I have seen of what we can learn from Steve Jobs is Guy Kawasaki’s post: “What I learned from Steve Jobs.” The fact that Guy knew Steve directly is notable, but I think it more important that Guy is a great learner and does a terrific job of articulating what he has learned. So I highly recommend his post.

Well worth a view is “A Tribute to Steve Jobs,” hosted by Charlie Rose. His first interview with Eric Schmidt at the beginning is particularly good. Schmidt’s emphasis on Jobs’ ability to marry art and technology is very insightful.

At Tapity, we hope that our focus on designing apps that respect, delight, and serve the people who use them will demonstrate that we have learned a little bit from Steve Jobs.

Design from another world

Saturday, August 20th, 2011

Let me introduce myself as the newest member of the Tapity team. I’m the dad of Jeremy and Josh, and I come from the world of mixed-use land development. In that world, I fought hard for great urban design—the land development equivalent of user experience design. To my amazement, spending time and money for great design is as hard a sell in the mobile development world as it was in the land development world! But also in both worlds, design is very inexpensive in comparison to development, and a lot of money can be wasted developing projects that were not well-designed. So, in the land development world, you get contrasts like this:

Strip Mall versus Baxter Town Center, Fort Mill, SC

Strip Mall versus Baxter Town Center, Fort Mill, SC

Can you spot the development that delivers the better user experience? And in the mobile app world, you get contrasts like this:

Unnamed App versus Voices 2 by Tap Tap Tap

Unnamed App versus Voices 2 by Tap Tap Tap

Which app would you rather tap? So I am all about promoting the importance of great design for creating great apps. I have also been intrigued by the design process that creates great urban design and how that kind of process might relate to app design. But more on that in another post.