Landing Page

The landing page is designed to promote the Android application which provides a voice assistant while driving.

·   ·   ·


After the supervisor from a startup company reviewed my resume and portfolio on a job site, he decided to hire me as a freelancer to create this landing page. This landing page is intended to promote the company’s Android application, Omnie, which is a personal voice assistant that offers a smarter and safer way to use phones while driving. While driving, users can prompt the voice assistant to bring up navigation, play music, call friends, or even send text messages. Its features are safe, simple, and user-friendly.

Company: 3sDrive (startup)

Role: UX/UI Design, Responsive Web Design

Time: 2018/9-2019/2 (part-time, freelance)

·   ·   ·

Reviewing the Design

I reviewed the original design to understand its faults, and I have three main suggestions for improvement regarding the design.

Problem 1: The image does not align with the spirit of their brand.

The original front-page image features ice, snow, and heavy-duty vehicles, giving me a strong, heavy, and cold feeling. Maybe they want to highlight their durability; however, it does not align with the spirit of their brand, which is meant to focus on being safe, simple, and user-friendly.

The original design does not align with their brand.
Problem 2: “Read more” should not be the most visible button.

The most visible button on the front page, also known as a call-to-action (CTA) button, is the "read more" button. I can understand why the company would want users to continue reading about the application, but it doesn’t help convert purchases of the product. The purpose of a landing page is to convert users, which allows potential customers who enter the page to make purchases and pursue downloads, community tracking, and more. Therefore, I think the most important button is the "Download" button. In addition, I recommend that the CTAs should be more directive with statements such as "Download it now!" or "Try it now!"

Problem 3: The conflicting color scheme does not align with the spirit of the brand.

Since the brand’s mission is to be safe, simple, and user-friendly, the website should make users feel relaxed. However, the original color scheme is green and reddish-orange, which is conflicting. Therefore, when choosing colors for the re-design, I chose colors that were harmonious instead of conflicting.

The color scheme of the original design is conflicting.
·   ·   ·

Imagining the Re-design

Solution 1: Primary image on the landing page

To solve this issue, we need to focus on the product, which is safe, simple, and user-friendly. Therefore, I chose to use an image of a straight road surrounded by grass to imply that the product is safe and simple. Additionally, I present their advertisement slogan as a dialogue to align with the voice-related product.

Solution 2: The arrangement of CTA buttons

I propose that there should be three CTA buttons for the landing page:
1. A button that encourages users to download the Android application
2. A button encouraging users to follow the company’s social media accounts
3. A button that allows users to read the entirety of the text on the landing page

I re-designed the landing page according to these three CTAs. Because the “Download it now” button is the most important, I used a pink to purple gradient color that helps it stand out. I also put the social media link at the top of the navbar, but in a simple text form with no distinct colors or backgrounds. Finally, I used a downward-facing arrow with the “Read more” button to cue users to read the whole page.

Solution 3: Color scheme

To avoid harsh, clashing colors, I chose to get rid of the green and reddish-orange color scheme. I chose to utilize a green-blue color, which symbolizes safety and simplicity, as the primary color. I also used a pink to purple gradient color as an accent color.

Re-design of the front page
·   ·   ·

Re-designing the Landing Page

Up Next