SnapUp Competitive Analysis

Snap UpShelf Talker

The CarKey PeopleKapta

Call to ActionIn Header

Call to ActionIn Body

Video OnLanding Page

NO

NO

NO

NO Located below the fold

NO

Responsive

YES

YESYES

YES

YES YES

C l e a r “ C a l l t o A c t i o n ”, immediately visible

The highlighted “Get Quote” Button in the sticky header keeps the “Call to Action” visible throughout the website.

In the mobile view the menu is located at the top of the site. It is not collapsable, which can be in i t ia l ly overwhelming, visually.

The next section starts just above the fold to inform the user that they can scroll down for more content.

In order to fit the content in a portrait format, the landing page image is removed.

Desktop View Mobile View

1.1

1.2

1.3

1.4

1.5

1.1

1.2

1.3

3.4

3.5

2.1

2.2

2.3

Clear and highlighted “Call to Action”

Transparent and animated arrow guides the user to scroll down, and automatically scrolls down when clicked.

Once in mobile view, the header menu with a menu button.

2.1

2.2

2.3

Desktop View Mobile View

CarKeyPeople Competitive Analysis

C l e a r “ C a l l t o A c t i o n ”, immediately visible

The highlighted “Get Quote” Button in the sticky header keeps the “Call to Action” visible throughout the website.

In the mobile view the menu is located at the top of the site. It is not collapsable, which can be in i t ia l ly overwhelming, visually.

The next section starts just above the fold to inform the user that they can scroll down for more content.

In order to fit the content in a portrait format, the landing page image is removed.

Desktop View Mobile View

1.1

1.2

1.3

1.4

1.5

1.1

1.2

1.3

3.4

3.5

2.1

2.2

2.3

Clear and highlighted “Call to Action”

Transparent and animated arrow guides the user to scroll down, and automatically scrolls down when clicked.

Once in mobile view, the header menu with a menu button.

2.1

2.2

2.3

Desktop View Mobile View

Kapta Competitive Analysis

1.3

1.1

1.5

1.2

1.1

1.1

1.2

1.3

1.3

1.5

A clear call to action can es t ab l i s h use r pa t h . By providing a “Request a Quote” button, users who come to the l a n d i n g p a g e r e a d y t o purchase, or who are ready a f t e r v i e w i n g t h e v i d e o provided, can get to purchasing quicker. And users who wish to read more about SnapUp will be able to return to the top of the page to learn what the next step is, as soon as they’re ready to purchase.

The “Explore More” button will guide the user, by automatically scrolling their screen to the information below. They will still have the option to scroll down themselves. The right amount redundancy can assure the user path without cluttering their experience.

Highlight the “Contact Us” button can draw the user to inquire for purchase quicker.

The original design has a header with a height of 184px. When viewed on a laptop, the header encroaches on the users view. The header can be reduced to 142px with out shrinking or loosing any of the elements withing the header.

By dividing a section of text or an image, the user is subtley informed there is more below.

Min-Width: 768px

3.1

3.2

3.53.33.4

3.1

3.2

3.3

3.4

3.5

Max-Width: 325px In order to maintain legible size, and a suitable “hit area”, the buttons must take up more of the screen. To avoid crowding, its recommended to remove the video in the mobile format. With the convenience of a mobile device, users are less likely to view the web site in a setting where they can play the video with sound.

To maintain legibi l i ty, and purpose, labeling tags should be enlarged.

A hideaway menu will allow the convenience and functionality of a menu, without crowding the small screen. Using a “hamburge r bu t ton” i s a recognizeable tool, for quick and easy learnability.

For the narrower formats some elements have to be rearranged to prevent shrinking at the cost of reducing font size.

Some elements link the Contact Us sect ion and the How SnampUp Works should be divided and stacked.

2.1

2.1With the portrait view of a tablet, the landing page options should be stacked rather than side by side.

Max-Width: 768px Min-Width: 325px

SnapUp Desktop Wireframe

1.3

1.1

1.5

1.2

1.1

1.1

1.2

1.3

1.3

1.5

A clear call to action can es t ab l i s h use r pa t h . By providing a “Request a Quote” button, users who come to the l a n d i n g p a g e r e a d y t o purchase, or who are ready a f t e r v i e w i n g t h e v i d e o provided, can get to purchasing quicker. And users who wish to read more about SnapUp will be able to return to the top of the page to learn what the next step is, as soon as they’re ready to purchase.

The “Explore More” button will guide the user, by automatically scrolling their screen to the information below. They will still have the option to scroll down themselves. The right amount redundancy can assure the user path without cluttering their experience.

Highlight the “Contact Us” button can draw the user to inquire for purchase quicker.

The original design has a header with a height of 184px. When viewed on a laptop, the header encroaches on the users view. The header can be reduced to 142px with out shrinking or loosing any of the elements withing the header.

By dividing a section of text or an image, the user is subtley informed there is more below.

Min-Width: 768px

3.1

3.2

3.53.33.4

3.1

3.2

3.3

3.4

3.5

Max-Width: 325px In order to maintain legible size, and a suitable “hit area”, the buttons must take up more of the screen. To avoid crowding, its recommended to remove the video in the mobile format. With the convenience of a mobile device, users are less likely to view the web site in a setting where they can play the video with sound.

To maintain legibi l i ty, and purpose, labeling tags should be enlarged.

A hideaway menu will allow the convenience and functionality of a menu, without crowding the small screen. Using a “hamburge r bu t ton” i s a recognizeable tool, for quick and easy learnability.

For the narrower formats some elements have to be rearranged to prevent shrinking at the cost of reducing font size.

Some elements link the Contact Us sect ion and the How SnampUp Works should be divided and stacked.

2.1

2.1With the portrait view of a tablet, the landing page options should be stacked rather than side by side.

Max-Width: 768px Min-Width: 325px

SnapUp Tablet Wireframe

1.3

1.1

1.5

1.2

1.1

1.1

1.2

1.3

1.3

1.5

A clear call to action can es t ab l i s h use r pa t h . By providing a “Request a Quote” button, users who come to the l a n d i n g p a g e r e a d y t o purchase, or who are ready a f t e r v i e w i n g t h e v i d e o provided, can get to purchasing quicker. And users who wish to read more about SnapUp will be able to return to the top of the page to learn what the next step is, as soon as they’re ready to purchase.

The “Explore More” button will guide the user, by automatically scrolling their screen to the information below. They will still have the option to scroll down themselves. The right amount redundancy can assure the user path without cluttering their experience.

Highlight the “Contact Us” button can draw the user to inquire for purchase quicker.

The original design has a header with a height of 184px. When viewed on a laptop, the header encroaches on the users view. The header can be reduced to 142px with out shrinking or loosing any of the elements withing the header.

By dividing a section of text or an image, the user is subtley informed there is more below.

Min-Width: 768px

3.1

3.2

3.3

3.63.43.5

3.1

3.2

3.3

3.4

3.5

3.6

Max-Width: 325px In order to maintain legible size, and a suitable “hit area”, the buttons must take up more of the screen.

To a v o i d c r o w d i n g , i t s recommended to remove the video window in the mobile format, and replace it with a s imp le bu t ton . W i th t he convenience of a mobi le device, users are less likely to view the web site in a setting where they can play the video with sound.

To maintain legibi l i ty, and purpose, labeling tags should be enlarged.

A hideaway menu will allow the convenience and functionality of a menu, without crowding the small screen. Using a “hamburge r bu t ton” i s a recognizeable tool, for quick and easy learnability.

For the narrower formats some elements have to be rearranged to prevent shrinking at the cost of reducing font size.

Some elements link the Contact Us sect ion and the How SnampUp Works should be divided and stacked.

2.1

2.1With the portrait view of a tablet, the landing page options should be stacked rather than side by side.

Max-Width: 768px Min-Width: 325px

SnapUp Mobile Wireframe

SnapUp WrapUp

•Add buttons, and highlight Contact Us button in header for a clear Call to Action

•Design views for tablets(768px) and mobile(325px)

•Add collapsable menu to mobile view