The development of any new digital product can be a lengthy and expensive process. In the desire to make quick progress, it’s all too easy to launch straight into full development without the preparation needed to make it succeed. This can cause a whole range of problems down the line, not to mention the stress and frustration when you have to change requirements mid-flight. This causes delays, burns cash and in the worst cases, can mean the final product misses the needs of your intended users.

To avoid this, it’s important to get organised before a single line of code is written. Among the various things to produce, you need: product validation, concept development, fundraising and an in-depth scope of what needs to be developed. Unless you are a skilled product development specialist, this can be a daunting task. The best place to start, to help define all of these things, is with the creation of a Concept Prototype.

In this case study we will demonstrate the value of Concept Prototyping as a quick and affordable pre-development step. We will show how Torafugu, an insurance analytics business, utilised it in order to transform their great idea into a viable product.

This process achieves all of a product’s pre-development aims at remarkably little cost. By building a real user flow, the product is validated. The process of designing that flow develops the concept of the product. Seeing something real produces the first stage of an in-depth scope and lastly, but most importantly, having a real, professionally-styled demonstrator is critical to proving a concept to potential investors. All of this is possible without a single line of code from expensive programmer resources.

The Idea

Torafugu’s core idea was a simple yet potentially disruptive one. Is it possible to captialise on the growing popularity of wearable devices to offer individuals bespoke life insurance premiums based on their daily activity levels? Torafugu came to us with three primary goals in mind:

  1. To turn their idea into to something tangible, which they could validate with potential clients.
  2. To move their idea beyond a simple User Story quickly and affordably.
  3. To provide something to present and put into the hands of people in the hope of securing a place in the Berlin Startup Bootcamp Accelerator.

With both time and money tight they required something which could be produced and iterated quickly with little overhead. It also had to have no ongoing commitment or loss should they need to pivot their business model to suit the needs of their potential customers, both insurers and users alike.

Conceptualisation & Wireframing

When they came to us, Torafugu had little more than a User Story and a need to showcase something without over-engineering it. The first step in the process was a simple telephone meeting in order to understand exactly what they needed. We could then create a plan as to how this would be reflected in a prototype that would best express the idea effectively and efficiently. The initial user story they put forward was as follows:

“The user lands on a ‘compare the market’ style platform looking for a life insurance quote. The likely trigger for someone like this would be purchase of a house, arrival of kids, etc. Once they have been shown their initial premiums they will have the option of connecting a wearable dongle and then be shown adjusted quotes based around the daily activity tracked by their Fitbit (or similar device).”

During the initial meeting we also made efforts to discern exactly how and where the prototype would be demonstrated. This was important to allow us to design it with the appropriate level of fidelity, an aspect of presentation many people forget. Once we had gathered all of the relevant information we went to work creating a plan for how the prototype would take shape. We decided to create a closed loop prototype mimicking an iOS phone app which would allow the Torafugu team to demonstrate the following user journey:

  1. “Start” Screen
  2. Life insurance quote details screen (with information prefilled)
  3. Unadjusted Prices Screen of various insurers and cost of life insurance. This screen will also have a button prompting user to connect their wearable device (such as Fitbit, etc.) to adjust quotes based on daily activity.
  4. Connecting Device Pop up
  5. Device Successfully connected pop up
  6. Adjusted Prices of quotes seen in screen 3
  7. High activity user (10% discount)
  8. Mid activity user (5% discount)
  9. Tip Screen example (“take 200 more steps per day to further reduce your premium”)
  10. Back to “Start” Screen

This closed loop user journey gives the sales team an opportunity to create a story around which they demonstrate the app to the target audience. It does so in a manner which ensures they cover all of the key features, but more importantly provides a natural exit point once the journey is complete in order to finalise the demonstration, making more efficient use of the time they spend giving each demonstration.

Upon approval of the proposed user journey, it was time to begin wireframing the user interface. Wireframes are an initial skeleton that just show the flow and interface elements, without extraneous detail. The process of creating wireframes allows us to work out the mechanics of the user experience without getting bogged down in the overall aesthetic of each screen. The importance of visual simplicity at this stage is that it allows us to focus our and the clients attention purely on the core UX without distraction. Once this is complete and signed off by the client it will form the skeleton of the UI Skinning.

 

 Torafugu Wirefrmaes

UI Skinning

With the wireframes in place next we move onto skinning the UI – that is, creating the look and feel with colour and style. As we already have the skeleton of the user experience locked down in the wireframes we can focus entirely on correctly styling the UI for its given target market. Again, this is not a simple process and is something many less-experienced developers cut short. We researched the likes and dislikes of the identified end users. In addition to this we took an in depth look at colour psychology and how we utilise colour to evoke the desired emotional and perceptual response from users. Finally, we assure that the UI accurately reflects any existing branding guidelines the client may already have in place. If there is no existing brand, we can help them to create something which they can build upon in the future.

Torafugu-Skinned.png

PROTOTYPE Creation

Once the skinned UI is signed off, the final step in the process is to create the prototype itself. There are many prototyping tools available on the market with varying degrees of complexity. We will choose a tool depending on the interaction requirements of the prototype. Due to the simple nature of the interactions on this particular project we opted for MarvelApp, which has proven itself to be one of the simplest for new users to pick up and demonstrate the prototypes built within it. Once built the prototype can be viewed in multiple ways. Primarily we simply set the client up with their own account and had them download the MarvelApp iOS app. Once logged in they were able to launch the prototype and use it in exactly in the same manner as any fully developed app. This can be an incredibly powerful sales tool as to the viewer the app looks and functions as if it were real, so they can get a real sense of the product. In addition to the app, we can also run it in a device emulator within a browser allowing it to be shown on a large screen or projector. This is great for hands on demos, when the product needs to be demonstrated to multiple people at once during a presentation.

Finally, once the prototype has been created we can easily switch out screens for new designs and rework user paths with very little overhead, meaning that the prototype can grow and evolve with the product.

want to know more?

Simply fill out the form below and a member of our team will be in touch to provide you with a live demo and see how Concept Prototyping can help Validate, Sell or Develop your product idea.

Name *
Name
TF-Mockup_1.jpg