Designing a switch to app experience for Licious | From Ignored to Installed

In today’s generation, providing a seamless and user-friendly experience is essential for the success of any online platform. I recently got the chance to work on the “Switch to the App” project for Licious. I want to share the details of this project. It involved the implementation of a new modal to encourage users to download or switch to the app for a smoother user experience. This blog article aims to put light on the development process, the issues with the current pop-up, and the revisions that resulted in an efficient design.

The Problem with the Existing Pop-Up

The initial pop-up version used in m.web felt more like an advertisement rather than a valuable prompt to switch to the app. Positioned at the top of the screen, it often went unnoticed or was mistaken for a random pop-up. The lack of prominence and the blending of white colour made it less visually appealing and ineffective in conveying the app's benefits.

Version 1: Initial Observations and Improvements

Version 1 had several iterations using our design language during the initial phase. Through this process, we gained valuable insights that greatly influenced the design. For instance, adding the Licious logo dramatically decreased the chance that people would mistake it for an unrelated pop-up, and adding a background overlay made the design stand out.

Another important finding was how useful it was to remove the cross and skip buttons because many users have a tendency to click on them without reading the information and there is a possibility that a user may already have the app installed, we also chose to utilize the switch to app text in the CTA rather than install. In addition, we understood how critical it was to give the user some benefit so that it encourages them to install our app.

Version 2: Enhanced Visual Elements and Compact Design

In version 2 we looked to enhance the user experience even further by building on the knowledge gained from version 1. We added visual components to emphasize the importance of installing the app. A few iterations consumed a significant amount of screen space, so we removed negative space and made the sheet more compact. By making sure it didn’t take up the entire screen, we ensured that users could seamlessly continue surfing. Additionally, we included an icon to attract user attention and boost engagement.

Version 3: Minimalistic and Clean Design

In version 3, we concentrated on achieving a minimal and professional appearance, taking the design enhancements a step further. We even tried animating a few of the visual elements, which were eye-catching but also could introduce technical errors in development and increase the chances of taking it for an advertisement.

By adopting a cleaner approach, we aimed to eliminate distractions and provide a seamless user experience by moving forward with a minimal version of it. We used check marks as bullet points, letting the viewer know it is correct and safe. As for the check mark’s shape, we decided to use the round one rather than the box one because the box one would give the impression of a button and the overall design is quite boxy so by using the round one, we were able to break the rhythm.

We applied the golden ratio principle in the design to ensure its effectiveness so that we can figure out how the viewer’s eye would move around the design after checking it shows that we were able to make it straightforward as the path of the golden ratio covers the cta plus it ends near then logo and benefit area.

Results and Metrics

After the final design is developed the data was collected and showed that the “Switch to the App” bottom sheet performed better in comparison to the old top panel install pop-up, we saw a substantial 64% boost in app installs from the website on average. This 29% rise serves as an example of how the bottom sheet redesign has impacted user behaviour and rates of conversion.

Conclusion

The “Switch to the App” bottom page was improved through revisions and careful consideration of feedback from the team, going from a barely noticeable pop-up to an effective invitation for users to download and switch to the Licious app. The development process from version 1 to version 3 shows the value of eye-catching design, user-centred improvements, and the usage of analytics to gauge performance. We were able to increase app installation and raise the number of customers using our app by designing a simple and convincing user experience.

Thank you for reading ~