Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Lean Mobile UX Lessons To Keep Your App From Sinking Like The Vasa Ship

For many months, your entire team has worked their butts off to create an awesome mobile app. Finally, with your team exhausted and excited, it’s showtime! But then, your dream app turns into the ultimate nightmare: Eager customers download the app, use it once and never return.

All the sacrifice and months of hard work — wasted. What went wrong?

Your app has become another victim of the latest trend1, joining a whopping 41% of today’s apps that are abandoned after only a single use. This trend has many parallels with the story of the 400-year-old Vasa2 ship. The most impressive warship of the day, Vasa floundered and sank just one mile into its maiden voyage due to fundamental design issues.

The salvaged Vasa ship in the museum in Stockholm3
The salvaged Vasa ship in the museum in Stockholm (Image: Greg Nudelman4) (View large version5)

In this article, we’ll explore how the lessons from the Vasa ship can help you keep your mobile project from sinking right out of the port.

Create A Clear, Compelling Vision Link

Although the Vasa ship was ultimately a failure, it was unquestionably a magnificent one. The builders dared greatly.

So, before talking about all of the things that went wrong with that project, let’s touch briefly on the one thing that went right: The builders of the ship had a grand vision that told a riveting story of royal conquest and pride.

Even today, 400 years later, their vision is spellbinding. It is expressed in beautiful craftsmanship, the gaily painted mythological statuary, the fearsome armament and the overall appearance of the ship.

Even today, Vasa presents a grand vision.6
Even today, Vasa presents a grand vision. (Image: Greg Nudelman) (View large version7)

When it comes to vision, your mobile project should be no less compelling.

You must have a clear vision of what you are building — and the benefits the app will provide — before you decide how to design and implement the app.

Fortunately, expressing a vision for a mobile project is fairly simple. You can do it in as little as 20 to 30 minutes, using just a handful of sticky notes to create a storyboard that describes the app’s primary use case.

A good example is the “Be a Hero” storyboard from my book $1 Prototype8:

Be a Hero app storyboard from $1 Prototype book9
“Be a Hero” app storyboard from $1 Prototype book (Image: Greg Nudelman) (View large version10)

This storyboard presents a powerful use case: A person wants to support the typhoon relief efforts by sending funds to a charity of their choice. The benefits are clear: The person donating the supplies gets to feel like a hero, and the survivors of the disaster get the urgent help they need to start rebuilding their lives.

According to Fortune11, the number one reason most startups fail is that they make a product no one wants. To make sure your mobile project doesn’t become another statistic, formulate a vision that people can get excited about.

Before doing any actual design or development, take the time to document your vision as a storyboard. Then, show it to both potential customers and your stakeholders to ensure that the response from all key people is enthusiastic.

Your vision must communicate a clear, compelling benefit; otherwise, the app will not be worth building. Once your vision is in place, it’s time to start designing and prototyping your solution.

Test Early, And Inform Executives Link

When plans for Vasa were first presented to the King of Sweden, he made two fatal modifications. One was to arm the ship to the teeth with heavy 24-pound cannons. The second was to make the ship thinner in order to make it faster.

Many would assume that such detailed design guidance meant that the king personally oversaw the construction. This was not the case. The king made only a single visit to the docks.

In fact, the first stability test was not performed until after Vasa was afloat and fully equipped. As Wikipedia tells it12:

Thirty men ran back and forth across the upper deck to start the ship rolling, but the admiral in charge stopped the test after they had made only three trips, as he feared the ship would capsize.

Despite the failed stability test, it was too late to do anything about the launch. No one wanted to bring bad news to the king, who insisted that the ship be put to sea as soon as possible.

In the end, we can say that the king got exactly what he wanted, but not what he needed — an impressive ship that sank just one mile offshore.

Nothing is wrong with executive feedback or changes to a proposed design. Both are absolutely essential and are a part of any significant project. What was lacking here was early concept testing and a timely feedback loop.

Just as your vision and prototypes need to be adequately tested at every step of the design and development, communicating the test results to the right people is equally important. Key people need to be part of the solution, or else they will become part of the problem.

As a designer, your job is to provide timely feedback to executives. Clearly communicate any product issues early, while they can still be addressed, to ensure that the best design moves forward.

How do you ensure that you get the executive feedback early? That’s where a minimum viable prototype can be extremely helpful.

Create An MVP: Minimum Viable Prototype Link

I had a chance to visit The Vasa Museum recently before my talk at From Business to Buttons 201513, a conference in Stockholm.

In the museum, next to the salvaged Vasa, sits a 1:10 scale model of the original ship as it looked on the fatal day of the launch. Such a model would have been ideal in refining the design: Anyone would have been able to see how making the ship thinner and taller and adding heavy cannons on top would compromise its stability.

The 1:10 scale model of the ship in Stockholm's Vasa Museum14
The 1:10 scale model of the ship in Stockholm’s Vasa Museum (Image: Greg Nudelman) (View large version15)

However, this 1:10 scale model was built after Vasa sank, making it useless, except as a lesson to us: Build a model of your mobile product, get executive feedback early, and refine the design before investing in development.

Fortunately today, building a model of your app is extremely easy — you do not need wooden planks, any special equipment or software. Even better, your design and your prototype can be one and the same.

All you need is a pack of 3 × 5-inch plain sticky notes:

Sticky notes mobile prototype
Sticky notes mobile prototype (Image: Greg Nudelman)

For example, here’s a minimum viable prototype for the Be a Hero app:

Final minimum viable prototype of Be a Hero app made with sticky notes16
Final minimum viable prototype of Be a Hero app made with sticky notes (Image: Greg Nudelman) (View large version17)

With this simple prototype, you can quickly and easily test and refine all of the basic design aspects of your app: the information architecture, the interaction design, the copy, etc. You can even test the icons and transitions.

The lean process is all about experimentation. By creating a minimum viable prototype to set up your experiment and going directly to potential customers for testing, you significantly speed up the process of experimentation and feedback, both internal and external.

In essence, you institutionalize failure in its cheapest and most expedient form.

Early continual user testing of your prototype reduces the likelihood of any fatal design issues when your app launches, vastly increasing your chances of success.

Early Design Tweaks Make All The Difference Link

While the Vasa disaster is quite famous, many people do not know about Vasa’s sister ship, the Apple. The builders of Apple made two important modifications: they installed lighter guns on the upper deck and widened the ship’s hull by 1 meter (just 10% of Vasa’s original width).

These simple tweaks made all the difference: The Apple sailed successfully for over 30 years.

To ensure the success of your own mobile project, test yearly and expect to make a lot of iterations in the beginning, until the design settles somewhat. Investing time and energy into a high-definition pixel-perfect design right from the start would be counterproductive.

Rather, keep the fidelity of the prototype appropriate to the state of the project. The key foundational aspects of the design (information architecture, interactions and copy) are best tested using quick and cheap minimum viable prototypes made with sticky notes.

In the case of the Be a Hero app, for example, the sticky notes prototype of the home screen underwent five iterations before the team came up with a design that performed well:

Five iterations of the MVP for Be a Hero app18
Five iterations of the MVP for Be a Hero app (Image: Greg Nudelman) (View large version19)

Only after the team had perfected the key elements of the design did they invest the extra time required to create the high-fidelity prototype:

Finished design for Be a Hero app20
Finished design for Be a Hero app (Image: Greg Nudelman) (View large version21)

Keeping the fidelity of the prototype appropriate to the state of the project helped the Be a Hero team move quickly and solve most problems early in the design process, enabling them to create the final design in just three weeks.

Don’t know about you, but that sounds like a lot of sunken ships were avoided for the cost of a pack of sticky notes — something even His Majesty the King of Sweden would surely approve!

Ensure Smooth Sailing For Your Mobile App Link

You have now seen how the history of the Vasa ship can help you avoid a major disaster with your mobile project if you follow a few simple but profound lean UX guidelines.

Before you begin, put your vision in place as a storyboard. Take the time to test it with potential customers and stakeholders — ensure that they are as enthusiastic about your idea as you are.

Once your vision has been approved, begin the design in lockstep with user testing by using a minimum viable prototype made from sticky notes. From this point, continual rapid prototyping and customer feedback should form the core of your mobile design process.

Along the way, don’t forget the importance of two-way communication with executive management and other key people on your team.

By including all of the key people in your feedback loop, you ensure that everyone on the team feels that their ideas are given due consideration from the start. This minimizes the likelihood that anyone will insist on last-minute changes that you cannot adequately test or implement.

Remember to make the fidelity of your prototype appropriate to the stage of the project. Do not invest time and effort in high-fidelity prototypes before you are comfortable with the key aspects of the design. Rather, stick with low-fidelity prototypes for as long as possible, testing design tweaks quickly, and continually incorporating insights back into your prototype.

Lean, rapid prototyping coupled with a continual feedback loop will help your team work smoothly, incorporate new ideas and build a mobile app that not only survives its maiden voyage with flying colors, but sails successfully for many years to come, striking fear into the hearts of competitors.

(da, ml, al)

Footnotes Link

  1. 1 http://www.comscore.com/Insights/Press-Releases/2014/8/comScore-s-US-Mobile-App-Report-Available-for-Download
  2. 2 https://en.wikipedia.org/?title=Vasa_(ship)
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2015/08/01-vasa-front-opt.jpg
  4. 4 http://leanmobileux.com
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2015/08/01-vasa-front-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/08/02-impressive-vasa-vision-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/08/02-impressive-vasa-vision-opt.jpg
  8. 8 http://www.designcaffeine.com/overview-the-1-dollar-prototype/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/08/03-be-a-hero-storyboard-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/08/03-be-a-hero-storyboard-opt.jpg
  11. 11 http://fortune.com/2014/09/25/why-startups-fail-according-to-their-founders/
  12. 12 https://en.wikipedia.org/?title=Vasa_(ship)
  13. 13 https://youtu.be/3nHmvixai40
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/08/04-vasa-model-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/08/04-vasa-model-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/08/06-be-a-hero-final-mvp-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/08/06-be-a-hero-final-mvp-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/08/07-be-a-hero-homescreen-iterations-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/08/07-be-a-hero-homescreen-iterations-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/08/08-be-a-hero-final-finished-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/08/08-be-a-hero-final-finished-opt.jpg

↑ Back to top Tweet itShare on Facebook

Advertisement

Greg is a UX strategist for Fortune 500 firms. His 4th book, The $1 Prototype and the new Lean Mobile UX blog can be found at http://leanmobileux.com.

  1. 1

    Thanks a lot for this article. And the story of Vesa. This reminds me a lot of my previous workplace where there was not enough iterations of the product we released and too many decisions were made by people who were too far from the main course of production and development. Thus a lot of additional work had to be done each time.

    Taught by experience and after reading this article – I feel mofe confortable in creating new stuff and not worrying about it’s future ;]

    5
    • 2

      Thank you — that’s exactly the point of MV Prototype — to be able to innovate with confidence and drive the cost of iteration to practically $1.

      Hence why the book is titled
      “The $1 Prototype: Lean Mobile UX Design and Rapid Innovation for Material Design, iOS, and RWD”
      http://leanmobileux.com/1dollar_prototype_book/

      Glad you enjoyed the article!
      Greg

      0
  2. 3

    Gerben van Dijk

    September 15, 2015 5:03 pm

    Great article, but the authors website is a UX nightmare.

    4
    • 4

      Gerben, How is it a nightmare? :-)

      The correct link is http://leanmobileux.com That’s the new Lean Mobile UX blog I’m launching shortly. People interested in this topic can sign up for an upcoming webinar in October.

      Thanks,
      Greg

      0
      • 5

        1. Lacks direction. I was lost as to what I should be looking at.
        2. Too much unorganised content (probably in an attempt for better SEO)
        3. No clear CTA (or too many of them)

        That’s how it is a nightmare. Full points to the article though. Thank you.

        0
        • 6

          Greg Nudelman

          October 6, 2015 7:27 pm

          OK, I think I understand now. It was actually the same call to action repeated 3 times. “By popular demand” I removed the other 2 CTAs, let’s see how better/worse this page converts now. Check it out:

          http://leanmobileux.com/

          Oh, and thanks for the feedback!
          Greg

          0
  3. 7

    Great article, is this app available I love the concept!

    0
  4. 8

    Floundered? The term is “foundered”. The ship didn’t turn into a fish. Who proof read this?

    -6
    • 9

      Greg Nudelman

      October 6, 2015 7:18 pm

      Good catch, I’m impressed — 4 separate editors and proofreaders looked at the article.

      0
  5. 10

    Really love the idea !

    0
  6. 11

    Great article with a beautiful reference, very informative for people that have no experience with UX. Although I was expecting a bit more in-depth article, since sketching and paper prototyping is lesson no. 1 in any UX/design class or tutorial. It would be nice perhaps to write an article about actual UX principles to keep in mind when prototyping instead of just the process. Or a heavier focus on how to properly test prototypes. But that could be just me, since UX is something I really enjoy learning about :)

    -1
  7. 13

    When it comes to having a clear vision, it all starts with WHY. HOW you’re achieving that and WHAT you are actually delivering are the means to spread the message.

    http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action

    0
  8. 15

    Failure is the key to success and that too early..

    0
  9. 16

    Matthias Labsch

    September 22, 2015 2:13 pm

    “To ensure the success of your own mobile project, test yearly and expect to make a lot of iterations in the beginning, until the design settles somewhat.”

    Just be sure: “test yearly” or “test early”?! Yearly testing doesn’t make any sense in the prototype phase of a project in my opinion. Test as early as possible instead shouldn’t be a point we have to discuss, it should be mandatory …

    0
  10. 18

    Hi,
    Just wanted to share that there are some platforms available in the market which could be used for prototyping, improving user experience of your app, and also usability testing. One of the such that i am using from a long time is CanvasFlip.
    They have some very interesting features to hang around with like Timer, Layer and so on.
    I think author should review the same and provide a comparison between the similar players

    -1

↑ Back to top