UI Case Study — Landing Page for a sleep tracking app
A well designed landing page plays a vital role while marketing a product or a service. It’s the first page users are directed to and can make or break a user’s perception for the same. The information presented on the landing page needs to be specific and useful to the users — letting them know exactly what they are looking for. A clumsy page with a lot of information can be distracting and takes away from the main purpose of it i.e, to grab the attention of the potential users, inform about the product and convince them into taking actions.
Overview
SleepTracker, as the name suggests is a sleep tracking app which keeps track of your sleep cycles and helps you sleep better by curating tunes as per your liking and through daily reminders resulting in a healthier lifestyle. SleepTracker was conceptualised for a personal project for learning by implementing what I had learnt.
Main purpose of SleepTracker’s landing page
One of the main purpose of the landing page of SleepTracker was to direct users into taking an action — preferably downloading the app or subscribing to the newsletter. The landing page was meant to serve as a gateway to explaining the features offered in brief, gaining trust through testimonials, well curated and useful content in the form of blogs which could then lead to downloading the app by the users and/or subscribing to the newsletter.
Colour Palette
Since it’s a sleep tracking app, the colour palette was kept dark to give an overall nighttime feel to the design and complimentary colour was used for the CTA buttons for them to stand out.
Design of the landing page:
As per the requirements, the landing page had the following sections —
- A clear hero section with a CTA
- Simple explanation of the main features offered by the app
- User testimonials
- Featured blog posts
- A newsletter sign-up form
- Another CTA to download the app
- A footer.
Hero section
The hero section of the page was made simple (going with the overall design of the page) with a distinct Call to Action to download the app accompanied by a flat illustration. The headline was kept concise with a large heading and a comparatively smaller subheading to explain the headline further.
The main features
On scrolling down, one could see the features offered by the app written in short and precise sentences which allowed the user to go through them without having to waste time trying to understand it’s features. Along with the text copy, icons were added to aid easier understanding.
User testimonials
People connect with real user stories and resonate with their experiences. Thus, the user testimonials were provided to gain the trust of the users.
Featured blog posts
Blog posts which can be useful and interesting to the target audience was displayed to grab their attention.
Newsletter Signup Form
The signup form for the newsletter was placed right below the blog posts. The intention was to grab the attention of the users with relevant blog posts and strategically place the newsletter signup form right underneath it to eliminate any distractions. Moreover, to make the sign-up process easier, less time consuming and hassle free and to ensure better conversion rates, only the email was asked from the users.
The final CTA
Finally, another Call To Action was added in the end which showcased the availability of the app for Android and iOS users in Google Play Store and App Store respectively in the form of buttons which direct users into their downloading the app with just a click.
This was pretty much the whole design thinking that went behind creating SleepTracker’s landing page. This was one of the very first designs and my main focus was to keep the design as simple as possible yet include all the essentials of a landing page and make it user friendly. It was fun experimenting with the colour palette, especially. Learning something and then implementing it is quite a journey and I thoroughly enjoyed it!
