Napkin Idea to Finished Product
Have you ever had an idea for an app, service or product that you thought was going to change the world? There are so many people with great ideas but for most it’s hard to know where to even start.
One of the biggest misconceptions I hear from people is ‘I’m not a developer; I don’t know how to write code.’ While it’s true that a digital presence — like a website — is a requirement of most new business ideas today, it shouldn’t stop you from bringing your ideas to life.
Why?
I wrote this article to inspire and motivate you by sharing a story about how the founder of Anxiety Box took an idea written on a table napkin to a finished product. That product is now helping users fight back against their anxious feelings.
The Anxiety Box Idea
In November of 2018 the Founder of Anxiety Box came to us with a high level idea and some mockups sketched out on the back of a table placemat. The idea itself was straightforward: help people fight their anxiety using an exercise where you close your eyes, imagine a box and put all your worries inside.
During our first meeting, we talked about things like:
- The backstory to Anxiety Box and the motivation behind it
- How is this different from other anxiety exercises/apps that exist today?
For the remainder of the article I am going to talk about 3 steps to help you get started on bringing your own ideas to life. Keep in mind that these steps are by no means comprehensive or prescriptive but rather a guide to help you get started.
Step 1: Build your Minimum Viable Product (MVP)
Idea Refinement
Before you can test your assumptions, which we will see later in step 2, you need to build something tangible that you can put into the world. This allows you to start collecting feedback to validate your idea and test assumptions. During our first meeting we went through an exercise in refinement where we talked about the concept, how he came up with the idea, it’s potential users, etc.
The goal with this initial exercise is to break down the idea into its smallest form while still delivering value.
Ask yourself things like:
- Is everything on this list absolutely necessary for initial launch?
- Are features critical or just nice to have?
We continued to refine the idea with these types of questions until we felt like we got it down to it’s very essence.
We were now ready to start executing.
Phase 1 | Discovery, Design and User Experience
Includes:
1. Customer discovery
2. Wireframing
3. Workflow
4. UI Design
Customer Discovery is a critical first step you should take to help you gain an intimate understanding of who your target customer is. You need to understand their pain points and how your solution solves them. We call that the value proposition. You need to discipline yourself to ask questions and listen. Refrain from talking about any possible solutions you might have.
Stick to past and present questions, such as:
- Tell me about a time you felt anxious?
- How do you deal with your anxiety today?
In addition to surveying strangers, we read blogs and looked at which products currently existed on the market today.
Based on all the data collected we decided that we needed to design an exercise that was quick and readily available. It had to be something that you could use right before a big exam, presentation or before takeoff.
Justin Wilcox is a great resource for getting started on customer discovery.
https://customerdevlabs.com/2013/11/05/how-i-interview-customers/
Wireframing lets you focus on functionality and sketch out screens quickly. You should be asking questions like:
- What actions a user should be able to take on a particular screen?
- How they’re going to interact with the product through its interface?
Also remember to keep them simple. Wireframes should be black and white, look like pencil sketches and quick to change. In fact, a pencil and paper is the best place to start, IMHO.
Workflows are a series of steps/paths the user takes based on their interaction with the products interface. You can use your wireframes to begin mapping out a high level workflow that will navigate users through your product. You should be asking questions like:
- When the user presses this button, what happens? What screen are they taken to?
- What happens after the user successfully completes steps X?
It can feel a bit like a maze but this maze cannot contain any dead-ends. If a user gets stuck at some point in the workflow, their chances of quitting altogether are greatly increased. Once you have something solid down on paper or the whiteboard, you can bring that to life using a free tool like Adobe XD. Adobe XD even lets you view your wireframes on mobile devices as if the app was installed on the device.
UI Design
Let’s review what we have thus far
- We understand who are customer is and their biggest pain points
- High level product functionality has been identified
- Wireframes have been created outlining product functionality and actions the user can take
- A solid user workflow complete with screens that map out all the paths a user can take while using the product
UI Design is all about making it look pretty! The bar is set pretty high these days from companies like Apple and Airbnb. Luckily there are so many free resources available to help you get started and draw inspiration from.
Pinterest is one of my favorite places to draw inspiration from whether your build a mobile application or a full scale website. There are also a lot of great looking modern website templates from colorlib that are either free or under $50.
Our design approach for Anxiety Box
- Use warm feeling colors
- Gradient progression that ended in a solid color on the last screen
- Visually and subconsciously show exercise progress.
Phase 2 | Build Something Real
Includes:
1. Technology Choice
2. Create High Level Features and User Stories
3. Development
4. Analytics
Technology choice is a big decision, so take some time and evaluate your options. There are a lot of great free tools and resources available on the internet backed by companies like Google and Amazon geared towards getting you up and running as quickly as possible. Make a list of pros and cons.
One of my favorites is Firebase from Google. It has everything you need to get up and running, such as:
- A robust SDK built for specifically mobile and web
- Quick and easy user creation and management + build in support for federated logins such as Facebook
- Severless functions that remove the overhead of hosting your own server and let you focus on just the code itself
- An intuitive, modern and scalable database
The Best Part: It won’t cost you anything until your idea takes off. Good problems right?
There are also a lot of conflicting opinions on which technology is better or the best. Rather than asking the question:
- What’s the latest and greatest technology available?
you should ask something like:
- What is the best technology available that helps me solve the problem?
Focus on the problem you’re trying to solve and work backwards from there.
We knew that we wanted to bring Anxiety Box to mobile and also to the Apple Watch. We looked at both hybrid (Flutter) and native technologies but after some discovery we found that in order to interface with the Apple Watch we needed to build a native solution.
Development is arguably the most expensive step. This is because there is more to it that just writing code. There are servers to setup, tests to be written, user accounts to manage, etc. Try to minimize as many design changes during the develop phase as possible. Making design changes during the development phase can be very time consuming and costly. Thankfully we ironed out most of the design choices in Step 1
Create high level features and user stories before you or anyone else starts writing any code. Start with listing out everything you’re going to build. From that list, identify some feature candidates. Think of a feature as a bucket that smaller pieces of functionality can be put into (user stories).
For example:
- F-123 | Share app with others
Next, list some user stories under the feature
F-123 | Share app with others
- US-001 | Allow the user to share the app via text message
- US-002 | Allow user to share via Facebook
- US-003 | Allow user to share via Twitter
But how do you know if some functionality is a feature or user story? If you think it’s going to take more than 2 weeks to build and you cannot break it down into anything smaller, consider that it might be a feature. This is a good starting point.
If you want to go more in depth on features and how to efficiently break them down, you can read an article I wrote called Test Driven Refinement
Analytics allow you to complete your feedback loop. What do I mean by that? You spent countless hours in the design + develop phase and now you’re ready to put it out into the world to test your assumptions. But how do you measure the markets response?
Useful analytics:
- Bare bones implementation tells us information like location, number of unique users, daily sessions and a lot more
- Screen tracking allows us to map out a users behavior, show drop off points
- Event tracking allows us to track user interactions like buttons and downloads
For Anxiety Box, we utilized
- Number of unique users and daily sessions
- Event tracking on the share button to see how many of our users were sharing the app
- Screen tracking to view drop off points
Step 2: Test Your Assumptions
Everything we have done up this point is still just an assumption. Yes we did customer discovery. Yes we asked a lot of questions and listened. Yes we iterated on some prototypes. But it’s still safe to assume that everything you think you know is wrong.
So how do I test my assumptions?
Start with going back to the customers you interviewed in the first place. They’re the ones with the problems you’re trying to solve. Show them your solution and ask them things like:
- Does this help solve your problem?
- Is there anything you would change about this?
You need to collect as much feedback as possible from as many customers as possible. One thing to consider is not to make product changes based on data collected from a small subset of your sample size.
For example:
If your customer sample size is 10 and 1–2 of them are asking you to implement something but the other 80% of customers are not, it might be more of a nice to have and not a critical feature. By trying to make everyone happy you can lose focus on the core of the product and burn up a lot of precious time and resources.
Step 3: Analyze & Iterate
Let’s talk about each one of these individually
- Product Release Iteration| this can be your initial product release or you’re 20th iteration. Each product iteration will be based on what you learned in the actionable insights phase.
- Market Reaction| now that your product is in the wild, it’s time to put our assumptions to the test and see how are customers are reacting.
- Actionable Insights| collecting data like user behavior and drop off points using analytics we can derive actionable insights that influence the next iteration of the product.
Whats next? Iterate!
You might have already noticed but what we have created a feedback loop that allows us to quickly iterate and refine our product. Use the actionable insights that you derived and go back to step 1.
Summary
I truly hope that this article has inspired you in some way or another to take a step closer to sharing your idea with the rest of the world.
We would love to discuss your ideas with you! Drop us a line anytime with any questions, comments and feedback you might have. Happy creating!
About the author:
Matthew Attou is the founder of XR Design Studios in Detroit MI, working with entrepreneurs, startups and enterprises to bootstrap their ideas and bring them to reality. We are a collective team made up of designers, engineers and thinkers.
Reach out anytime to chat about how we can help you get your ideas off the ground.
