Designing for a mobile app landing page that converts.
Counter is a new app from Vend that lets retailers turn their iPhone into a mobile barcode scanner, making inventory counts fast and simple.
The app is made by Vend, the world’s leading point of sale and retail management platform, but is actually a stand-alone product, one that is free, and that serves as a tool for advanced retailers and as an introduction to some of the cool things Vend does to help make retail easy.
Our job with the Counter landing page was to tell the story about the benefits of the stand-alone app while also letting people know that while it did not require them to be Vend users already, Vend would be a good thing for them to maybe check out :)
So, the primary goal of the page was to sell the free app to inventory-based retailers who are looking for a free inventory-counter solution, with success measured in how many people then download and use the application.
This post is to give a little insight into the design process we undertook, and how we have worked through the challenges in delivering a landing page that converts.
Defining and prioritising a list of goals.
Before getting our hands dirty with the design tools, we started the process by defining the objectives and goals that we wanted to achieve with all the stakeholders. It is vital we are absolutely clear about our specific target audience and together set our overarching goal.
Often this stage will result in multiple goals generated from different project stakeholders. We resolve this by jotting down a list of the most important goals of the page and creating a very concise hierarchy of the actions we want page-visitors to take:
- Learn Counter’s major benefits.
- Discover it’s ease of use and free download.
- Finally, download the app.
Once we defined this, we had a clear plan for what to achieve and we proceeded to explore concepts and design ideation.
Conceptualization: the hands-on user-experience approach.
Having the list of goals in our minds, we downloaded the beta version of the app and tried using it from a retailer’s point of view to get the most out of it. By using it ourselves we learnt that the app is highly intuitive with only three simple steps to follow. As a result, we decided to adopt this as the page user journey concept to see if we could section the page and make these three steps the way a user navigates the page.
- Scan barcodes with the app.
- Save the performed inventory counts.
- Send the counts to my inbox.
This concept made for a great match between the marketing page and the app experience, and gave us a strong simple structure.
Initial design: doodling on papers.
We began the design by getting our initial ideas on paper, mainly wire-framing. Starting out with the idea that there are no wrong answers, doodling provides the freedom to explore every wild idea with no limits, and it works well to start with the out-there ones:
· What if the iPhone image animates along with parallax scrolling?
· What if there was only a single title with minimal subtitle for every section?
· What if we lose the wordy-detail and blast the site with mainly visuals?
· What if the page is bombarded with loads of animated objects being scanned on the first load?
· What if the site navigation is hidden?
As part of this step in wire-framing, I also focused my research on relevant pages where these ideas were done well. The great thing about this is not only to research design trends, but also to test other people’s sites and learn how they solved these problems. We gained a lot of value out of this journey as there are many live “prototypes” for us to test and to understand what makes a good and usable page. Ultimately, we filtered all the goodies and created a couple of wireframes that could potentially work well with the Scan/Save/Send concept.
Design development.
This is the stage when we began to explore and experiment with colours, typography and illustration styles.
The most challenging part of the process was to decide and refine a colour palette that could complement the Counter App’s existing green identity, which was quite a tricky green to work with. From our research we were feeling that we’d like to try something bright and bold, but it was pretty much impossible for us to match any bright colours from a different hue to the cool green. Instead, we decided to adopt an array of green shades for every section background, from bright to dark. As a result, it gave us the bold block colour feel in a way that complemented the branding identity of the app.
Design Execution: form follows function.
With such a strong simple navigation concept, we had an open slate to play around with interactive elements to add interest. For instance, we could fix the iPhone image position on scroll, or have the green background fade gradually from light to dark when scrolling across sections. Even fancier, we could synchronise the mobile screen image transitions to the background.
Despite the big dreams we kept in mind that the design mechanism options had to also fit into realities around timeframe possibilities, technical capabilities, and the other constraints that can visit a project. Considering the amount of time and resources that we had realistically, we decided to bring the interactivity back to basic forms. Even though the importance of fancy interactivity for good UX has always been a debatable subject in the design paradigm, questionable impact wasn’t the compelling reason for us to lose it as we still aim to continue developing it in phase two to test efficacy. We let the form follow the function for now, ensuring that the end result drives high download conversion.
Designing at Vend.
At Vend, we advocate the idea of designing for a business purpose, not simply designing for visual pleasure. We scrutinize every problem meticulously, even a stand-alone landing page like this for Counter. We believe that a good design process from the ground up will gradually transform the design into one that corresponds to the design brief accurately.
Despite the various challenges that downscaled the interactive effects, we managed to make last minute amendments without having to amend the design massively. Perhaps without a proper design process, we wouldn’t have had the opportunity to do so. The end result is highly functional and beautifully simple. The landing page converted to the targeted goal of 2500 download in just 6 weeks since it was launched without any paid-advertising campaign. Further, over 600 leads were captured from the landing page.
The site is now live and can be viewed here. This was a site timeboxed to a week of design development and deployment, so there’s always plenty of room for improvement and we are more than happy to receive any feedback from design talent out there!
