Turning Website Into App

Moses Kim
Shakuro Writes
Published in
9 min readDec 14, 2017
Image credit: Zach Meany

If you are producing something and trying to make your living off of that, the first thing you do is let people know you are out there. At some point, that is not enough and that’s where a beautiful outdoor sign can help. But then, all signs are beautiful and you have to start over again. This was the case in the website industry. What used to be an optional perk, later became a staple, and today it’s a prerequisite.

Websites have evolved. From single-page ones to massive web applications, clusters, and cloud environments. But the industry didn’t just grow in complexity — it also developed usability, consumer performance, and user experience unseen before. In no small part, this was possible due to the rise of the mobile technology.

Once cell phones became smartphones and the edge between a computer and a phone began to blur, we came to realize that portable digital devices are pretty much the only computers we recreationally need.

As stated by Impact in 2017:

  • 80% of internet users own a smartphone.
  • Mobile apps account for 89% of mobile media time, with the other 11% spent on websites.
  • Average smartphone conversion rates are up 64% compared to the average desktop conversion rates.
  • By 2018, 8 in 10 email users will likely access their email accounts exclusively from their mobile devices.

There is no reasonable cause for any consumer-facing business to neglect mobility as the main digital information delivery media. If you had already been running your website in 2007, there’s no doubt one of the first things you did when you got your hands on the first iPhone is open your business website on it to see what your clients will see.

Most of the modern business owners kind of grew up with the internet being an accessory and with that mindset, the idea of being on people’s phones is not a bizarre one. However, there are several ways to build your presence on the mobile platform throughout different screen resolutions and operating systems.

Responsive web is still a workaround

Responsiveness is the concept based on the idea of a website knowing what screen size it is being displayed on and adapting to it like a chameleon without a significant drop in functionality and performance.

Responsiveness elicited a response 💡 among web designers and developers and at first sight, it makes perfect sense why: same design — different grids, same code — different implementations.

But as it turned out over time, responsive design fulfills entirely neither the capabilities of a website nor the potential of the platforms it is being designed for. In other words, you just crop the functionality of a website to fit the resources and the estate of the mobile platform. It’s still a website, but it can’t access the device’s native features which harm the performance of the website.

Image credit: Alex Woltz

This is not what we call versatility. More of a workaround. Responsiveness is a prerequisite for any modern website, but it is not a competitive gain whatsoever. If there is a way to leverage the full potential of your business and a device, it has to be a native mobile app.

Mobile app is genuine as they come

Ever since portable smart devices became capable of supporting complex computation, they gave birth to a specific digital entity in mobile applications. If responsiveness tries to find the balance between fitting the necessary assets within the limited estate and usability, the mobile-first approach uses the specific touchpoints to create a seamless and fully-immersive user experience (UX).

How to turn your website into an app

It was the rise of UX that took usability to another level and created a discipline that pierces through everything these days, from product ergonomics to the UX of titles and headlines in texts.

On top of that, there are a few things that aid the solidity of your business in the eyes of the potential customers. One of them being pervasiveness. The more options you provide, the more likely you are to hit the spot. I’m talking about these:

Usually, business is a hell of a learning curve and you come to realize you can do more with your online presence if the experience you provide is a delightful one. You can start with a website, gain traction, see what users appreciate the most and transmit that core functionality into an app.

The real question is how to do that transition so that you don’t lose your audience, retain your distinctive features, and innovate at the same time? In other words, how to turn your website into an app?

Carbon copy app

If you could just convert your website into an app, that would’ve been a nightmare. Like there aren’t enough low-quality, cheap, and poorly designed apps already. Any type of automatic conversion resource available is most likely, a scam. Not in the sense of taking your money and fleeing, but in the sense of complete garbage of a product you receive.

The amount of functionality your website may feature does not necessarily mean all of that has to be in the app. With that said, you have to know how to play it safe and not eliminate the features that users appreciate. For example, Photoshop was initially a digital retouching tool that later grew into the #1 raster graphics editor. It’s hard to say what percentage of Photoshop users is creating visual content, as opposed to just tweaking photos. Of course, the entire robustness of the Ps interface and algorithms can’t be copied into a mobile app or even a web version. I believe Adobe Creative Cloud will soon have to justify its bold naming and transition to the cloud technology.

For the time being, the official Photoshop mobile app has design capabilities completely eradicated, turning the household-name Photoshop app into a mobile photo editor.

Image credit: Daniel Klopper

Core feature app

We’re getting closer now. As an owner, you know the strongest sides of your business, as well as the weaker parts that need assistance. There has to be no problem figuring out the core functionality of your website that you’d want your app to inherit. You’ll have to put it all into perspective and maybe sacrifice something in favor of better user experience.

The iOS app we built for Vulcun, and eSports platform required a thorough approach to handling user data and stats. At easy access, we only kept the ones that make the most difference. This allowed us to speed up the app experience and not clutter the UI with minor details.

Image credit: Dribbble

Your startup took off somewhere. Whatever made it stand was the core of the app and its main worth. The ability to recognize that worth in the environment as ultra-competitive as digital product market is the key factor in your chances to skyrocket with your application. Don’t stick to what got you there. Always look for the ways to introduce new value in the old familiar dressing.

After all, people will only react if you provide them with meaningful experience or tangible value.

Design & Implementation

Making a website into an app is not really “making an app out of website”. Neither in design, nor in implementation, is it a transition. The transition happens in business logic, philosophy, and principles that do have to be kept as signature features of your business. It is more about converting your website UX into an app, or maybe even enhancing it.

There are different types of apps: native, cross-platform, and hybrid. We’ve covered the topic of choice extensively in one of our previous posts.

Interface

In terms of usability, mobile apps are completely different from websites. Everything runs differently: UI interactions, navigation, content dispositions, and etc. Embracing the mobile-first approach will save you a lot of time on iterations and revisions.

We specifically train our designers to be versatile regardless of the platform and operating system they design for. Each platform has its own limitations and strengths. The key to staying on the users’ phones is making an app that seems familiar and consistent.

There is a reason why all apps produced by Apple share the same look, feel, and overall behavior — once you unbox them, the experience is new but the logic is familiar.

Once the core features are settled, it won’t be a problem for a good designer to put together a platform-specific, consistent, and at the same time, custom application.

Image credit: UI8

However, mobile app interface does not only take from you as it might seem, it also gives plenty. For example:

  • Tabs. The bottom tab is a staple in mobile design. The control panel it can be might emphasize the most important aspects of your app and display the items you want your users to gravitate towards.
Image credit: Steven Parisi
  • Meaningful animation. We did an in-depth study of this matter a while ago. I’ll just say, animation opens multiple choices to aid performance, conversion, and empathy.
Image credit: Dribbble
  • Tactile experience. One thing smart phones teach you right away is the fact that you can touch the software and everything in the app. The more in control you are, the stronger your attachment to that behavior.
Image credit: Anton Aheichanka

Navigation

Mobile navigation has a lower patience threshold than website navigation. The elements have to appear almost intuitively, everything has to be arranged in easily-accessible and unintimidating lists. The UI navigation has to be optimized for swiping as the primary input gesture. In general, the navigation has to be simple and understandable.

For example, before the major update late in 2017, the PlayStation official app was a mess in terms of navigation. Mainly because they wanted to retain the logic of the console UI and didn’t consider the mobile app to be a highly-touted product.

Image credit: HowToGeek

The design update changed that and brought more of a native application experience while adding a lot more socializing features.

Image credit: Engadget

Takeaways

Your website won’t be replaced by your app. So if it’s an “either-or” situation, something must have gone wrong. Viral apps have websites. Popular websites have apps. In order to get as much publicity as possible, you need to appeal to as many users as possible. With the same level of quality and charisma spread across all your means of being online, you can create an immersive presence and augment your actual operation.

Like we said earlier, turning your website into an app means adjusting your mindset to enter the specific market with the existing product and a brand new shell.

We’ve accumulated enough experience in revamping web projects, redesigning sites, and creating the whole new web and mobile apps in different industries. We’ll gladly accept the challenge of turning your website into your app (or visa versa) and guarantee a great journey as well as a beautiful outcome.

Originally published at Shakuro.

--

--

Moses Kim
Shakuro Writes

Creative producer. Former UX writer and researcher.