"Add Website to Home Screen" Cross-platform Pop-Up
An organization approached me and requested a solution to utilize their website as a mobile app as well. They were maintaining both their website and mobile app at the same time and instead wanted to sunset the mobile app since both platforms provided the same information. I discussed that we could allow mobile web browsers to add their website to a homescreen, and let it behave as if it were an app.
Brand: MRCC
Objective: Educate MRCC's visitors to install the 'new app' while the old app was being sunset, allowing their internal team to only maintain their website going forward.
Challenge: While mobile app stores a centralized hubs for applications, a web app must be installed from the website itself. I needed to understand how most popular mobile browsers handled this, along with code that would reasonably serve platform-dependant instructions for first-time visitors, and not repeat visitors.
Solution: Create Android and iOS specific graphics that through JavaScript are served to users when they visit the website for the first time. If the web app is installed, or the instructions are dismissed, a cookie is created to prevent the message from being served again.
Results: MRCC was able to cut down on costs of maintaining their App on both Android and iOS, and is now able to maintain their website, and those who prefer an app can continue using it through this simple-to-understand installation process thanks to the visuals and behind-the-scene code that does the heavy lifting.
Safari (iOS)
Chrome (Android)
JavaScript code checks the browser's user agent to make sure it does not display the message on the wrong browser. After closing the message, a cookie is created that prevents the message from popping up again.
about kevin
Kevin is an interdisciplinary visual, product and UX designer looking to create fantastic
aesthetics while giving a great experience.
In his free time he enjoys exploring new web development methods, hiking, longboarding and
movies.