FROM ZERO TO A REAL APP IN EASY 5 STEPSJune 20 2019 7 mins read
“The faster you launch your project, the faster you earn money. That's all that matters.”
Have you ever imagined how smooth and financially effective launching your new app or website can be? Let’s take a look at what your development process from zero to a real app should look like.
The main objective
- The goal: Save money and see returns faster
- The goal: Specify your idea and minimum viable product - MVP
- The goal: Make the main idea of the app/website clear to everyone involved
- The goal: Create a clear visualization of how the app will look. This is an assignment for a graphic designer.
- The goal: Make the user experience friendly.
Coding and programming:
- The goal: Launch the project as fast as possible without any mistakes
1. IDEA CREATION
The goal is simple. Both the business and development team must be on the same page.
I recommend focusing on these 3 points during app development
- MVP - Minimum viable product for entry to the market
- Middle term vision (1 year)
- Long term vision (3-5 years)
Just a small reminder: Be sure that your product/project has a clear value proposition.
Long term vision
First, is necessary to write down your long term vision. This is a general direction helping you to choose the right technologies for development. Also, thanks to that, you will know how many dev teams you will need in the long term and what type: iOS, Android or Web development team or all of them?
It's important to have a plan for the functionalities and tools that you want your website or app to include, but these should be prioritized into pre-MVP and post-MVP sprints.
Middle term vision
During the creation of the middle term vision, you should take into consideration three main things:
- What will you focus on in the first year?
- How fast will you progress?
- How do you finance all of the business and software development?
Have you already answer the questions above? Perfect!
These answers help you allocate the right amount of resources from the beginning. Maybe it will be enough to start with the web app version. On the other hand, thanks to your long term vision, you can also start preparing the data and backend for API integrations into other mobile apps which you plan to build in the next phase.
Minimum Viable Product - MVP
An MVP is crucial for a successful start. Why?
- Robustness and number of functionalities directly influence the length of the development time before entering the market. This is the phase when your budget is mostly without any income and you are just spending.
- On the other hand, the lack of the most important functionalities can lead to a loss of users trust.
A lot of companies use MVPs to gather better feedback from the market, gain initial users and find early adopters who purchase their basic product.
It’s always a good idea to look for external consultation on your MVP from user researchers, UX designers, and people that aren’t directly affiliated with your product and team. These people will bring an unbiased view, strong feedback, and different experiences.
Is this the end of the process
The next step is sketching and one very common habit is to sketch already during the idealization. So let's jump directly to the sketching of the concept.
2. SKETCHING CONCEPT
Hand sketching is a fantastic way how to translate your ideas onto paper. A clear UX sketch unites the team. When everything is on paper, almost everyone in the company is able to imagine the app correctly.
What I personally recommend is to add short notes to explain the functionalities to the CEO or the people who do not live in the “development world”.
Can you understand the purpose of the website or app now? (https://www.getharvest.com/apps-and-integrations/iphone)
It is not necessary to have perfect shapes or a beautiful sketch. In this phase, it’s most important to understand how the app will work.
Here are 40 brilliant examples of sketches.
I always recommend to have one day for the concept creation, then a rest day, and then evaluate the idea again. This phase is perfect for making adjustments because it costs you almost nothing in comparison to making changes in the next phases of development.
When you have agreed on the main concept, it’s time to move on.
Tip: If you want to learn more about sketching, there is a great course on Udemy.
Note: a sketch is mostly for the business or product owners to confirm the idea for the whole team.
Wireframes are normally created by a UX designer as a template for graphic designers to add the graphic elements to. Great wireframes should be much more detailed than sketches and with more screens.
Why is wireframing so important, especially for bigger projects?
- Wireframing reduces the overall cost of the project. During this process, you can still easily adapt or change the interactions of your page with 0 budget spent on graphic design, coding, and programming.
- Clear visualization of what every element and screen will do. It is much easier to specify the action visually with wireframes rather than only a word document.
- Wireframes protect you from unwanted surprises. Have you ever had a misunderstanding with a web designer or worse with software developers? Proper wireframing makes it easy to avoid that problem.
- You can begin testing with your target audience. The sooner you get feedback from potential customers the better.
A UX designer should work on your wireframes and consult with the product owner to minimize misunderstandings of functionality and purpose.
In some cases, such as smaller projects, you can skip directly from sketching to graphic design. It always depends on the quality and clarity of the sketch. Be aware that each change made in the graphic design process is more expensive than changes made during wireframing or sketching.
Note: Wire frames are created especially for graphic designers because you want to ensure that the whole user journey will be perfectly smooth.
4. DESIGNING THE GRAPHICS
The goal of a graphic designer is to catch the users attention emotionally and support their smooth user experience.
Secondly, the designer’s goal is to create a visual consistency across your whole project.
Airbnb is a very nice example of how to build a visual language. Here is a sample of how they do it.:
It is very important is to have a font size that is legible and buttons have to be purposeful and clear as to what will happen when clicked. Create enough space between elements - especially on mobile - some people can have reaaaally huge fingers.
What are some other tips for design?
- Illustrate active and inactive elements and the difference between them.
- Illustrate motion effects and how it will change after an interaction.
- Illustrate buttons and always use the same style so users always know that this element is clickable.
- Stay with one graphic style and do not mix 2D with 3D if there is not a special meaning behind it.
- If you use shadowing, keep it the uniform across the web.
Tip: Find out more about Visual hierarchy on Interaction design.
Finally, we have the design! So let's code!
Note: Graphic design is mostly for coders and developers to know exactly what they will really do.
5. CODING AND PROGRAMMING
For launching any project, I prefer to code the frontend but program only the most important parts of your MVPs.
Why? If you don’t focus too much on the programming, you can launch your prototype much faster - and that's the point. The faster you know user’s reactions, the better it is for your project to begin improving…
And of course:
“The faster you launch your project the faster you earn money. That's all the matters.”
"So let's do it! Get ready to impress your first users with your brand new app!”
Now it's DONE! CONGRATULATIONS!
After the launch, a never-ending cycle begins:
- UX, UI, marketing and sales testing
- UX, UI, marketing and sales optimization
- Continuous development + adding other features
...more about that in another article. Stay tuned!
Read other useful articles or if you need specific answers to your questions give us a shout.
Director of Strategy