What Type of App Design is Right for You?

Last week, we talked about the benefits of designing your app before you build it. Save money? Get to market faster? Maybe even get some funding while you do it? Sounds pretty good to us.

But how do you get started with designs? First, you’ll want to create wireframes – which map out exactly HOW your site is going to work. And from there, you have a couple of options.

Option #1: Custom Design

What is it?

With custom design, you’ll hire a trained designer who will take your wireframes and turn them into something beautiful. This means they’ll come up with the right color scheme, button style, imagery, and placement on the page to make the user experience seamless. Generally, when working with a designer, you’ll iterate multiple times before you get to your final product – starting with high-level sketches, a landing-page mockup, and then more final designs. The ability to provide feedback at every step in this process ensures that you’ll land exactly where you want with your final product, and is easy to hand off to development.

Is this right for me?

Do you have enough budget to cover custom design? Do you have enough time before you have to get to market? Do you feel that your product needs to strongly communicate a unique brand image? 

Is this right for my product?

Is your product a little bit more complex than the average app? Is UI going to be key to the user experience? Are you anticipating that your features might need a little more explanation, or guidance? Or do you really need to differentiate yourself from competitors in the market?

The Net-Net

Pros: By working with a designer, you’ll get exactly what you want. It’ll feel “right”, to you and your customer, and you won’t have to re-work anything down the line. A quick and easy handoff to development means little iteration will happen during programming (speeding up time and keeping costs down).

Cons: Can be expensive depending on how extensive your design is, and will take longer.

Option #2: Off-the-shelf UI

What is it?

Off-the-shelf UI components are essentially packages of visual elements that can be used by your developer to create your site. What does this mean? A package will include your theme colors, a particular style of buttons, headers, and links, and templates for app elements like dashboards, forms, messaging, and beyond. Each package is a little bit different, and will either focus on a particular style or type of app (e.g. a more data-driven package will have better templates for dashboards and graphs, a more standard package might have more templates around messaging and form submissions).

Some examples include: Bootstrap / Bootstrap UI, Agile UI, Telerik, CoreUI, and Now UI Kit.

(Note: these examples are all free off-the-shelf UI components. While there are paid versions that are a little bit more customized, the free, open-sourced ones are going to be better quality since they’re more frequently updated).

With off-the-shelf UI, your developer will be the one implementing the design, which means there can still be a fair amount of back and forth about things like exact placement on a page – depending on how closely the package templates mirror your wireframes. And you’ll need to be a little bit more involved in those decisions than with a designer (whose wheelhouse it is to know the right answer).

Is this right for me?

Do you have a tight budget? Do you need to get to market really quickly? Do you have a pretty clear vision for what you want your site to look like, and is it fairly streamlined?

Is this right for my product?

Is your product pretty intuitive to use, with a fairly small feature set? Are the calls-to-action something your users will easily understand? Is your product more like a utility than an experience (i.e. doesn’t require as strong of a brand image)?

The Net-Net

Pros: Cheaper and faster, can work really well for simpler applications.

Cons: Requires more iteration with your programmer (who is likely not a designer) and may cause some re-work (both in the initial phase, and down the line when you’re ready to further customer your product). Also offers less customization for your individual brand.

Ready to go ahead with designs? Don’t miss our post on how to find a designer.

Design Getting Funding Saving Money

Why Graphic Designs Matter: 3 Reasons to Design Your App Before You Build It

If you’re a startup founder, you’re probably pretty concerned about three things when it comes to building your product: saving money, getting to market fast, and selling a product people actually want. You might be strapped for cash, and anxious to ship a product before your funding (or, ehem, stamina for juggling a side hustle and a full-time job) runs out.

At this stage, it can be really tempting to rush into developing your web or mobile app right away – because the sooner you program, the sooner you can start making money, right? Unfortunately, that’s usually not how it goes. And while it may not be a silver bullet, doing web & mobile app designs first has a lot of perks.

1. Doing graphic design for your web or mobile app can actually save you money and time.

Don’t be deterred by the up-front costs of hiring a UI/UX designer (i.e. graphic designer) for your app. Creating designs for your app actually helps you save money in a couple of ways:

  1. It’s an easy, low-cost way to test assumptions about your product.
  2. It reduces iteration when it comes to web development.

Test before you invest.

If you’ve been with The Startup Hacker for a while, you’ll know that we sing the praises of market research. Constantly. Because it’s that important. Do it often, and do it early (we’ll talk about this more later).

But while there are lots of really successful ways to do this at every stage of your product’s lifecycle, when it comes to testing the usability of your app, it’s A LOT easier for your customers to react to something they can actually see.

While some early market research will identify what pain points you need to address, it can be really hard to get good feedback on the nitty-gritty user interface (UI – i.e. the pretty stuff that customers see) unless you have designs that clearly illustrate the vision. You’ll be amazed at how many things you thought were critical turn out to be “nice-to-haves”, or even cumbersome and unintuitive when they’re mapped out on a page. And the more you can cut from “need-to-have”, the leaner, meaner, and lower cost your MVP will be.

There’s no reason to build out features your customers don’t actually want. Getting some customer feedback on the interface they’ll be using before you build it will save you the trouble and expense of having to re-vamp your product substantially after launch.

Plus, it’s much cheaper & faster to change designs than code, which means that by the time you actually build your app, you can build to what you KNOW (rather than what you hypothesize).

Beautiful designs = beautiful code.

A really good web app design can take a while to create, but that’s a GOOD thing. It’s critical to get your graphic designs locked down BEFORE you build. Your app designs are for your web developer what a 3D rendering of a home’s interior would be for a builder – and a beautifully done graphic design (paired with good wireframes) can eliminate 90% of the back-and-forth with your developer, as well as the bulk of the changes you’d probably end up requesting (all of which takes time and money).

What happens if your designs aren’t done? Here’s a snippet of what you might run into in development:

  • You realize you’re missing a page for contact information. Now you have to go back to designs, and add the page in (which takes time).
  • You decide to add a new button, and have to go through several iterations to figure out where it should go – which requires re-working the code to move other buttons around (which takes more $$).
  • You realize you haven’t really thought through how users will move through a particular flow, and that the current UI is clunky. Now you have to re-work the entire thing, which generally means your code is messier and more prone to bugs (takes time and $$).

This kind of re-work can turn development into a slog. It’s not good for your morale, your developer’s code quality, or your pocketbook.

(psst…don’t forget to wireframe as well – this will help you avoid a lot of the same pitfalls. Sign up for our email list to get our step-by-step guide to wireframing and more!)

But wait, that’s not all – onto #2…

2. Designing your app first can get you funded sooner.  (without investing a lot of your own capital up front).

Let’s face it – building a product from the ground up can be expensive. And it can be hard to bootstrap all the way, which means you’re often looking for funding BEFORE you start development.

Believe it or not, you can actually sell a team & investors on a design-focused vision really effectively – whether or not you have a working product. All without having to invest a lot of your own capital up front. I don’t know about you, but when we were starting our first business, this was key! Software development can get expensive pretty quickly, and it’s a lot easier to bring the product of your dreams to market when you have the cash to do it.

But there’s a catch-22: investors would rather fund a working product.

The key here is to sell the sizzle, not the steak.

As we discussed earlier, it can be really hard for people to understand exactly what your product does without visual designs. And we’ll let you in on a little secret – showing off really complete, well-executed designs has basically the same impact as a demo with a working backend. So by doing your designs up-front, you’ll demonstrate that you’ve not only done your research, you’ve thought through the ins-and-outs of your product, and have the design sizzle to polish it off.

Because a product demo is often no more than designs with a little bit of code behind the scenes to “fake” how the product works, designs alone (paired with an awesome PowerPoint presentation) have just about the same effect. And we’ve seen companies like The Black Tux (one of our early consulting success stories) do just that.

3. App designs let you test what your customers want early – which means more product success after launch.

We talked earlier about how you can save money and time by testing your graphic design with customers. We’d all prefer not to re-work app features after launch – we have more important things to focus on like marketing, scaling, and adding new features.

But beyond that, there’s another, possibly more important consideration. If you don’t get some feedback from customers now, you risk losing them very soon after you launch. In fact, according to TechCrunch, 1 in 4 users will open an app only once. And 90% will stop using your product if it has poor performance. Those are pretty high stakes!

Now, in an ideal world, you’d catch any issues during beta testing – but first impressions are lasting, and if your app feels clunky, poorly thought out, or is missing something important, that’s the first thing people will read about when they’re checking out your product.

To sum it up: Saving time and money? Getting funded without too much personal investment? And a better, more lucrative product launch? Sounds like a no-brainer.

So do yourself a favor: design your app first.

Ready to get started with designs? Check out: How to hire a designer, What type of app design is right for you, 3 ways to get the best product from your designer

P.S. There’s an important component of “Design” that we haven’t talked about here – which is designing WHAT the product is, not just HOW it works. This is just as important as designing before building – and we’ll talk about that next month on the blog. For teasers and free materials on our upcoming series “Mistakes Startups Make – and How to Avoid Them”, sign up for our mailing list.