This week I am working through the process of designing a new mobile app and mapping out the app’s early product-market research strategy while working with another founder who is working to re-brand a mobile app that that is planning to launch in the next few months. A while back I wrote an post titled ‘How Much Will It Cost To Build My Startup App MVP? Part 1 – What Is An MVP?’ and it is about time that I add the second installment so today I decided to write about the process of making decisions about tools, techniques, and code that I have used so far as I tackle designing an MVP app over the coming weeks. Whether you have been designing and building mobile apps for many years now or you are considering building your first mobile app I hope this will help you out. I have learned a lot over the last week as I have looked at building a new mobile app for the first time since probably around 2009 when I was advising a pre-product mobile startup founder.
If you are not looking to design and build a mobile app MVP, I will cover designing and building a web app or software app MVP in a future installment in this series.
My laptop of choice is a MacBook Air. I’m pointing this out for two reasons. First, I recently upgraded to OS X Yosemite and iOS 8. There is a new feature called Handoff which allows users to open something on their laptop and mobile at the same time. I can work on the same app Second, Apple’s app ecosystem is better when it comes to designing a mobile app. More on that later. There are some great tools that I could use on a Windows or a Linux laptop too, but for this project the best tools do not exist for PC or Linux (e.g. one running Ubuntu).
When I start a new project I always ask the best people I know what they would do if they were in my position. A few years ago someone might have told me to use Illustrator and Photoshop along with a wire framing tool like Balsamiq. This time around I did some very rough wire framing using Balsamiq, but I have moved on from Photoshop because it isn’t really the best tool. I never tried out Illustrator, but it is a really powerful tool that could probably get the job done this time but it isn’t the best tool for the job.
Balsamiq comes with a free trial and costs $79 (one time license purchase ocst). I like Balsamiq because it has a lot of stock templates (wireframes that cover various existing product templates). It also has customizable drag and drop elements like a smart phone and popular buttons which allows you to get your app idea worked out really fast. You can export your work as a .PSD file and then open it in your design tool of choice. I try to use it as paper and pen because I can just save my work to a project folder when my time is up and pick things up right where I left off. You could do some of the more advanced things that you might want to do with Balsamiq since it is a powerful tool, but I prefer to just use it for quickly sketching out wire frames. You could probably skip this one. The reason you would use Balsamiq is often because you want to create something very low fidelity that you will be handing off to a designer. If you are a developer or non-technical founder then Balsamiq is a good place to start. If you are a designer then Balsamiq is probably not for you. Depending on how things go with Flinto (see below), I may just use it for mobile app prototyping going forward and skip Balsamiq. Check back for an update.
Here is an iPhone app wire framing tutorial that captures the essence of how the tool works.
You can download Balsimq (Windows or Mac) here: http://www.balsimq.com/download
The next tool that I am using is called Sketch which is currently on version 3 and costs $99. Sketch is an app that you can download from the Apple App Store. There is a free trial so you can try it out before you buy it (get that via the product website HERE). There are several compelling reasons for using Sketch instead of Photoshop or Pixelmator (a great Photoshop alternative for Mac users). One of them is Sketch’s iOS Mirror feature which lets you preview your designs on your iOS devices while you work on them. This feature is similar to OS X Yosemite’s Handoff feature that I mentioned earlier so you can probably achieve the same result using another design tool, but it might not be as smooth of an experience. While this is mostly for look and feel, it is very helpful. I will cover two apps that you can use for modeling user interactions and application flow so that you can create a functional prototype of your app. There are some additional features that help you to design and scale your work to different smart phone sizes as well as different resolutions (ex: 5K). Sketch is not for lego type design so if you are looking for pre-designed buttons and stock elements this is not the tool for you. It is also designed with design for iOS apps in mind which makes it a lot easier to get going quickly. You will probably find it to be similar to Illustrator so if you are a designer then you may still prefer Illustrator. This is really a tool for people who are working on mobile apps that are slightly more focused on user experience than on pixel perfection. I am definitely in that camp. I will ask a designer to jump in for the pixel perfect level of detail.
Here is an iPhone app UI design tutorial that captures the essence of how the tool works:
You can buy Sketch in the App store or via their official site here: http://bohemiancoding.com/sketch
Depending on how much time you have, you could also work out the user interaction design for your mobile app or just create a navigable functional prototype of your app. A functional prototype means something that allows you to click on a button and navigate to the next page (this is a very narrow definition). This includes animations and interactions that come to life through I plan to spend some time working on the user interactions and potentially creating a functional prototype of my app idea. There are two tools that I plan to experiment with here:
Pixate is an $8.34/mo SaaS based app (two months free with an annual plan) designed to help you create sophisticated animations and interactions. The next tool that I will show you, Flinto, is similar. You can use it to create all kinds of effects. For example: You can create a scrolling effect just like you would get on a fully developed app, just without any code.
Here is a tutorial demonstrating Pixate being used whle designing a mobile app’s user interaction.
There is no download, just go to Pixate.com to sign up for a free trial of the app.
Flinto is a tool similar to Pixate. Flinto is $20/mo on a SaaS model and comes with a 30 day free trial. It allows you import your .PSD file and start connecting things to achieve a a functional prototype really fast. The way it works is this: you map a button to your design’s button then link the button to the next screen. Like Pixate, you can model scrolling and other features without writing a single line of code. I fell like Flinto is a bit easier to use and more intuitive. Best of all, there is a feature that lets you send an SMS message to anyone’s mobile phone that has a link to click on from within the Flinto. By clicking on the link that person (or you) can download a browser shortcut button for your prototype app that opens a web page version of your mobile app prototype. This is really helpful if you want to quickly get a functional prototype in front of people. Depending on how things go with Flinto, I may use it instead of Balsamiq for mobile app prototyping in the future.
There is no download, just go to Flinto.com to sign up for a free trial of the app.
OmniGraffle is a $99-199 downloadable design and mockup tool that is probably more of a blend of Illustrator or Sketch and Flinto, Pixate or Balsamiq. There is a 14 day free trial. OmniGraffle has been around for a long time and is popular. There are versions available for Mac and for the iPad. You can use to create designs as well as functional prototypes. This is a tool that is definitely worth checking out.
Here are a few prototyping apps that were not included in my original article, but that may be worth taking a look at. Unless I note otherwise, these are not going to change my choice about which tools to use.
POP App (Prototyping on Paper)
This is an freemium app that you can purchase in Apple App store, in the Google Play Store, or in the Windows Store that is similar to Flinto. It is worth pointing out that this is the first app that I have mentioned that is a native mobile app. With POP App you can take a photo of a hand sketched wireframe and map navigation, create clickable buttons, etc. It offers dropbox integration and is free for up to two team members. It looks worth trying out.
Axure is a tool for creating prototypes of apps and websites that you can use on a Mac or a PC, but since the an individual user license ranges from $289-$589 for a single user I am going to pass. It looks like a really powerful tool. One feature includes HTML file generation which I means you could probably compare it to Illustrator and Dreamweaver from Adobe.
Fireworks is a mockup tool by Adobe available on a SaaS model. I have not used it, but I know people who do and they like it. More about Fireworks here.
Napkee – A tool for interactive mockups that is open source. I have not used it, but it claims that it is a companion to Balsamiq.
Other Options? Google Docs was suggested by one person. I tend to avoid Google docs for something that needs to be of a high quality level because of some instability issues that I have encountered. It could be a great option instead of Balsamiq if you want to quickly sketch something up, but it lacks the elements that come built in with Balsamiq. Tools like Visio Pro and creately were not considered since this article is focused around designing and building a functional prototype, not around how to map out a workflow of an app. Those tools are better for enterprise apps.
Sketch 3 or OmniGraffle – for the initial design of a mobile app (Recommended).
Pixate or Flinto or Balsamiq or Napkee or Mockingbird or OmniGraffle or Fireworks or Axure – for mobile user interaction design (Recommended).
POP App – for mobile/tablet centric prototyping efforts.
– for prototyping of mobile apps and websites.
Mockingbird – very similar to Balsamiq, but on a SaaS model for $9/mo.
Scott Klemmer’s Human Computer Interaction class (online, free via Coursera) is worth checking out.
I will try to add some additional material here.
Previous | Next (Coming Soon)
I am just getting started and will be getting help along the way so check back soon for updates. This is the second post in my series titled: ‘How Much Will It Cost To Build My MVP?‘ In my previous article I discussed what an MVP is and isn’t. In the next few posts I will be talking about the strategy involved in early customer research and product-market fit testing. I also plan to cover the web app and software (e.g. not web based) MVP models in more detail.
Need A Startup Lawyer?
Need Help With Your MVP or With Finding Someone To Design or Build It?
If you are a startup company or software company that needs help with your MVP or with finding someone to build it or with other things related to your early stage startup then check out my startup packages page (HERE). You can also Email Me (firstname.lastname@example.org) or reach me using the Chat button in the lower right corner of the screen if I am online. MOST OF THE TIME a free initial consultation that lasts around 30 minutes is enough to get someone on the right track, but if more help is needed I can provide it.