You’ve got a great idea in mind. You and your co-founder just sit down and make a product roadmap. One of the critical questions you are very likely to go through is: what is the proper frontend-to-backend resource ratio?

80-20 frontend backend mvp

Our MVP rule.

80% Frontend vs 20% Backend is our golden time investment ratio.

We love backend architecture. However, we’ve also worked with many clients and MVP products. Our learning is simple. You should spend 80% of your time on the frontend of your product, and here’s why:

 

The frontend tells people who you are

Atomic Signup Mockup MVP

Atomic has many high-fidelity mockup templates to go with its web app.

The frontend is the main gate to your product whether you’re building a mobile app, a website or a console game. A consistent UI style enhances the character of a product, as you define the look and feel you want to create for your users. Do you want your product to look more simple or more expressive? It takes a lot of time and effort to test the options and find the most suitable one.

All interactions with users happen on the frontend. This is true for a client pitch or your own in-house product. Your product UX is the killer element that gets your users addicted to your app. It goes beyond graphic design: it’s the critical question of how your product tells a story and how users interact with your product. That said, your product will require the matching layout, copywriting, navigation and usability to put together and articulate your story.

The refinement process never ends: you need to constantly collect feedback and keep improving your frontend. The good news is that high-fidelity UI and mockups are getting more convenient. You don’t need to teach yourself Illustrator or Photoshop from scratch. Instead, we recomment testing some online tools. It becomes pretty addictive!

Mockup Tool: Atomic

Why: It has lots of templates and the mockups look gorgeous. The mockups also have great navigation transition features.

The frontend landscape changes rapidly

Firefox Chrome Responsive Design Test

Even if you’re mobile, don’t forget to check FireFox and Chrome!

The only thing that’s changed is everything, especially in the mobile world. It’s not just the iPhone that has a new version every year, Android devices are always coming out. Even web browsers have constant updates. Users demand your apps to work despite all these changes.

The major challenge is to continuously support your frontend in the ever-changing OS cycle. As Android and OS devices are getting updated more frequently, you’ll need to update your front-end more frequently to keep up with new requirements and patch bugs in older versions.

In addition, you need to work on customization on different front-end clients. The correct use of style and default user behaviours is essential to make your users love your app on different devices and platforms. Drilling down into platform/device-dependent issues may take up a significant amount of your time.

All in all, you need to act fast to adapt to the changing OS and devices to ensure a consistent experience.

Testing Tools: Ranorex (test automation across platforms), Calaba.sh (Android & iOS native apps, open sourced), Selenium HQ (Firefox extension or complete IDE, record, edit, and debug tests)

 

Saving time from your backend for frontend

MockupWorld PokemonGo PSD Template

We found this PSD template on Mockup World

Now you may be wondering how exactly can you allocate 80% of your time on your front-end.

Oftentimes, popular products share similar components: for instance news feed, followers, chat, push-notification, etc. Do not spend extra time repeating yourself, there’s no need to. By using services like BaaS, you can use merely 20% of time to build a common backend that communicates with your front-end clients across multiple platforms.

In addition, many BaaS related solutions provide hosting services for your product at a low price. This means you would not only save time from developing your backend, but also for hosting, deployment and maintenance in the future. All these workloads shifted to BaaS means that you can focus on building and optimising your frontend to keep your users happy.

Backend Options: Firebase, Kinvey, Backendless. All of them have their own strengths with different features such as push notification and instant messaging. Most BaaS providers would also provide a hosting service, this would help make your deployment and maintenance much easier.

Open-source backend Options: Parse, BaaSBox, Dreamfactory. All these open source alternatives help you build your backend infrastructure. You’ll have host on other hosting service provider such as Amazon Web Services (AWS). Of course, you can always try our in-house open-source product: Skygear, which offers hosting.

Either way, it is going to help you build your backend at a much faster pace without losing your focus on your important frontend.


If you find this post interesting, subscribe to our newsletter to get notified about our future posts!