Prototyping Mobile Apps Without Having to Learn How to Code


I recently gave a presentation on building mobile app prototypes without coding. This came from my own experience of fully prototyping the SpotOn mobile app without writing a line of code. The benefit of it was immediately apparent when all the stakeholders could touch and play with what seemed to be the real app. Having something that could run on the phone is so much better than looking at screenshots on the computer or looking at wireframes or documentation.

Why is this a better approach? For one this brings a whole new meaning to rapid prototyping. Being able to eliminate what used to be a key player in the iteration loop (the developer) made developing the app so much faster. I would screen the screens, load them up in a prototyping tool, start clicking around, find problems, immediately fix them and retouch the screenshots, rinse and repeat.

Another benefit is that there are so many people who have skills and ideas who cannot code. Now they too can start building their ideas and proving their concepts rather than just talking about it. Having something that is clickable on the phone is priceless compared to having sketches on a napkin or even a powerpoint presentation.

What do you need to do this? My current favorite tool of choice is this brand new app called FieldTest. Load this URL on your phone. You can click around some of the buttons to get an idea of how the app works. Keep in mind no code was actually written. I uploaded a bunch of screenshots to the tool and wired it all together using their user interface. I can then send people this link and have them open it on their phones. They can click around and get a sense of how the app will work.

I strongly encourage designers to try this approach as it will really improve their workflow.

Popularity: 6% [?]

Designing For iPad

No Comments

A couple weeks ago I gave a talk titled ‘Designing for iPad’ at WindyCityGo, a mobile conference in Chicago. It was about my experience designing my iPad app BizTome.

Here’s a video of the talk along with my slides.

Designing for iPad by Pek Pongpaet from ChicagoRuby on Vimeo.

For more presentations from that conference, please go to the WindiCityGo website.

Popularity: 5% [?]

Quick & Dirty iPhone App Wireframes

No Comments

People pay lots of money for various wireframe tools. There are wireframe tools for all flavors of OSes but none of them have really appealed to me. In my work, my deliverables are not wireframes so my advice may not apply to all. However I think even people who do deliver wireframes can benefit from this simple technique. It’s so easy anyone can do it. Even if you are used to using wireframe tools, you might want to give this a shot because of how fast you can test out your ideas.

All you need are three things:

  • iPhone
  • paper pad
  • pen

You start out by drawing a rectangle the size of the iPhone screen. Then you just start drawing your UI within that rectangle. Draw how your app would look like. If you have many screens, draw those screens too.

Next take pictures of those screens, making sure that each screen fills up the entire camera view. Now, just load up the Photos app and pull up those screenshots. Viola you have a ghetto wireframe that you can see on your phone, You can move your thumbs over it and see if it feels right. You can swipe and go to the next screen. You can swipe back and go back to the screen you came from.

This is a super quick and dirty way to mock something up and test out some theories. What I have here took less than 5 minutes and the great thing is that anyone can do this. I had 3 screens that I wanted to think through. Doing this made it feel more real and I was able to improve upon the designs. Putting it on the phone got me thinking about things I wish I could do with the app that I wouldn’t have thought of if I was just staring at it on the computer screen.

You might say, that’s great Pek, but I can’t draw to save my life. In case you haven’t seen my chicken scratch, but I can’t really draw either. If you don’t feel confident in your skills then you can rely on something like this

I think this useful when you want to get slightly higher fidelity than the sketches but that higher fidelity comes at the cost of additional time.

Popularity: 11% [?]

How 1 in 5 People on Facebook Play CityVille

No Comments

In case you’ve been living under a rock, CityVille is Zynga’s latest social Facebook game. It’s gotten over 90 million users in just 30 days. It has recently hit 100 million users. With Facebook’s population at over 500 million users, that means about 1 in 5 people on Facebook play CityVille. That’s just insane.

I’ve been meaning to take a better look at it. I played very briefly (a few minutes) early on, but haven’t been back since today. When I logged back in, I had no less than 54 CityVille messages of friends asking me for stuff or sending me gifts.

CityVille looks like they’ve taken all they’ve learned from Farmville, FrontierVille, and combined it with the very successful genre of city building like SimCity. But what has made the game hugely viral is that it’s over the top social.
In 10 minutes of gameplay, I counted no less than 13 attempts to get me to share some sort of accomplishment or gift with my social network. Although I refused most, I ended up gifting some friends and accepting neighbor requests.

Here are some examples of sharing activities that are built into the game:

  • Send gifts to friends
  • Share XP (experience) with friends
  • Invite friends to play
  • Share coins
  • Ask friends to open business in your city
  • Tell friends about my new business
  • Share town news with your friends

Another strategy they use which I think is even more effective is they require you to be social in order to progress. Here are some examples:

  • Rewards for visiting neighbors. This isn’t a requirement for progressing, but you get extra rewards.
  • Asking friends for things to complete tasks
  • Hire friends for city employees

As you get more and more invested in the game, you are more likely to ask your friends for help even if you were not inclined to.

Basically CityVille has a huge viral coefficient meaning that people who play are going to get more than one person to play with them.

Popularity: 4% [?]

Does Your Organization Value User Experience

1 Comment

User experience has become a buzzword lately. Companies are coming around to it and realizing it might be pretty important. They say they care about user experience but do they really? Here are some good ways to tell if they are just paying lip service and trying to cross a line item to make them seem more competitive.

What is the ratio of designers to developers?
Are they actually putting their money where their mouth is? If design and UX are truly important, what does that headcount actually look like? At my previous company Roundarch, the ratio of engineers to UI designers, graphic designers, IAs and basically anyone to do with UX was about half and half. That was one of the main reasons I joined that company. They truly believed in well designed software. Typically at most organizations, it’s 100 engineers and a designer if that. Sometimes it’s outsourced completely. I think it’s OK to recognize that UX is not a core competancy and bring in help but too often it’s brought too late into the game.

Where is the design process?
Is design just veneer? Is “Design” considered something you paint on at the end? Does the organization engage a designer at the end of the software development process? Many times, design is something that slapped on sometimes by a contract designer. A good indicator of whether a company cares about UX is whether they put the design at the forefront of a software development project. Design is just more than veneer; it’s how something functions. Thus a well designed product is well thought out.

Software as a feature checklist.
I consulted for a company where the sole focus of software development was the feature checklist. If the software did that feature, the task was complete and you moved on to the next feature. That’s the fastest way to make software that’s gonna suck and that no one will want to use. UX really needs to be thought as screens and flow and how user interacts with it. You need to figure out the best ways to accomplish a task, and not just the fact that you CAN accomplish that task.

How important is the designer?
And by designer, I don’t mean the graphic designer, but the UX guy who really gets the product and the customer. If they’re opinion often gets shot down because the CEO thinks “it looks better” a certain way then it’s going to be an uphill battle trying to make the UX better.

As more and more organizations come around to the idea of user experience, it can only be a good thing. Products are going to get better and more software projects will succeed. It is not enough that software gets delivered but users have to use it and have it feel like it does solve their problem through a great experience.

Popularity: 4% [?]

Older Entries