User Interface Designers: Create Crude Prototypes in 15 Minutes

PopApp is a really simple tool, for iPhone and Android, that lets you:

  • Draw-out your idea for an app
  • Take photos of those drawings, and
  • Stitch them together.

The result is a crude prototype and lets you see and feel how your app might look and work.

We use it often (with final screens that our mobile designer has created in Photoshop) in user testing: before we write a single line of code, get a sense of how users might interact with the app, what they might find confusing, etc.

FitnessBuddy – Great App, Can Be Even Better

Some of us here at the office use FitnessBuddy for our workouts.  Great way to get some guidance when you hit the gym.  The app helps you choose a workout plan, shows you how to do each exercise (in a highly visual animated gif-like style), and more.  They recently released a new version with lots of changes, including:

  • Some kind of audio guidance feature (wasn’t immediately understandable to us)
  • More step-by-step tracking for a workout (“do this workout” button
  • Slightly updated user interface: buttons, icons, typefaces.

Overall, there are some improvements, but we think there is room for a lot more.

 

For example, here’s the screen you see after tapping a particular workout.  We think there’s too much unformatted text here (if we recall correctly, there was less text in the previous version).  Text fills almost the entirety of the screen (iPhone 5), and most folks simply don’t read (old, but good information).  Further, the text is likely only useful to first or second-time users.  Repeat users (like us) have to swipe down to proceed.First thought would be to cut-back on the text, if possible.  Next thought would be to format it in such a way that it’s scannable (using bullets, paragraphs, boldness, etc.).  Another thought would be to hide most of the text and intuitively enable the user to reveal more, if they’re interested.

 

Photo-3

In the following screen, we see a list of exercises that comprise the workout.  We find the images to be especially valuable here, and we’re not sure why they’re so small.  They could be significantly increased in size (probably 30% or so without even changing the app design), which we think would be a big improvement in the user experience (again, most folks don’t read and the images convey most of the information, at a glance, especially if the users, like us, have done the same workout many times before).

 

Photo-2

Lastly, here we’ve tapped on the “Barbell Bench Press” exercise, and we’re shown how to do it.  Great.  We’re also presented with a whole bunch of icons, which aren’t especially clear.  What do they do?

The top-right icon, for instance, shows an actual video of how to do the exercise.  It’s a really useful feature! And one of us used the app for one year before we knew it existed (we tapped the icon by mistake one day).

FitnessBuddy may want to consider:

  • Removing / consolidating some of the features
  • Re-organizing the features visually on the screen in such a way that what they do becomes more apparent.  Grouping them logically, for example.  Introducing a global menu system, for example.
  • Improving the icons / adding labels.

Photo-1

Overall, we find the app very useful.  We think the company can significantly improve the user experience, accelerate new user adoption, and increase engagement with some additional investment in user interface design.

Use These Mockups: Lots of Design Patterns in Balsamiq Mockups (BMML) format

For those of you that use Balsamiq Mockups, here are a bunch of templates I created that you might find handy.
Download them all in one ZIP file (90KB).

I find myself re-using many of these elements when I design applications (especially the boring/tedious/must-have features, like Forgot Password, Sign In, 404 page). Enjoy!

The following mockups are included in the ZIP file:

Home Pages

Home Page, Members Only Mockup
Home Page, Downloadable Product Mockup

Feature Tour

Feature Tour Mockup

Pricing, Upgrade, Downgrade

Pricing Page Mockup
Upgrade & Downgrade Mockup
Upgrade “Thank You” E-mail Mockup

Read-Only List of Items

Read Only List of Items Mockup

Editable List of Items

Editable List of Items Mockup
Add Item Mockup
Edit Item and Delete Item Mockup

Invite Friends

Invite Friends Mockup
Invite Friends Via E-mail Mockup (Popup)

Settings / My Account Page

Settings / My Account Page Mockup

Sign In

Sign In Page Mockup
Sign In Popup Mockup

Forgot Password Process

Forgot Password Page Mockup
Password Reset Email Mockup
Reset Password Page Mockup

Miscellaneous

404 Page Mockup
Log / History Page Mockup
Downloading Page Mockup
Windows System Tray Mockup
Windows Tour Mockup