horizon title page.png

HORIZON

new-home-mockup.jpg

HORIZON

 

The Product

Horizon is a startup focusing on facilitate finding places to stay and live among friends, friends of friends, and the communities to which you belong

The product encourage traveler/host to create their own travel communities based on organization, affinity groups, interest, hobbies and life styles.

This travel network will eventually becomes your private travel club, you can then stay with friends you love, groups you share interest with and meet up trustworthy new friends within a larger organization.

 

The Challenge

  • Redesign Landing Page 

The startup is looking to redesign their old homepage for a new campaign, trying to attract more new users while promoting New "Stay A Night Give A Night" Seattle specific charity campaign.

The challenge comes in when campaign goal is different from what the app really does.

Horizon is a traveler/host community and the goal of the product is to encourage building traveler communities of similar interest, shared association and groups, while the campaign "Stay A Night Give A Night" is calling for Seattle local to host and therefore the payment received ($14.5) is donated to local charity. 

How to design a simple landing page that is conversational and that serves the one product goal, while still promote the campaign. 

 

My Role

Lead designer of the product working closely with engineers, stakeholder and product manager. Work covering short period of user research, analysis of current site, narrow down key feature, user flow, sketches, wireframes and high fidelity prototype.

This landing page is currently in production and will ship by the end of March 2018.  

Option 3.jpg
 
 

User Study

horizon users.png
 

Original Design and Wireframes - Why it does not work

 
 

Original Wireframe

  1. Too many buttons that want to achieve too many goals at the same time
  2. All center justified result in a busy visual layout that is hard for user to pick out what they want
  3. Each section seems to be a different product. 
  4. Long span of text, hard for user to focus

 

 

 
home_page_-_secret_clubs.png
 

Current Homepage

  1. User couldn't figure out what this product does without divd deep into the video
  2. busy background picture almost blend in app interface screenshot
  3. The button in screenshot looks the same as actual functional button on landing page - User clicks on and actually leads to no were 
  4. Copies does not standout on background therefore it is hard to present product feature.
 
screencapture-horizonapp-co-2018-03-18-21_09_29 copy.png
 
 

User Flow 

 

Key feature from stakeholder

  • "What is Horizon"

How it works

Why choose us

Why travel like this

  • "The charity campaign for Seattle"

Why Charity

What value here 

How it related to Horizon the product

  • "Donate to support us"

Why choose us.

What value do we bring to you

  • "Sponsors"

Who supported us - you should join

Untitled-1.jpg
 

Sketches and Brainstorming

 

Campaign Centered Landing Page - Targeting specific user group

  • Focusing on promoting the special campaign "Stay a Night" giving the payment to local charity
  • Following campaign comes the real product goal and feature
  • Mainly calling for hosting in Seattle, no obvious value for potential users
  • Hard to see the value of Horizon as a product even if charity campaign went well, the real product feature and what Horizon really want to achieve is not revealed to users.
Untitled_Artwork (4).jpg

Product Centered Landing Page - Less obvious campaign

  • Focusing on introducing Horizon as a product first.
  • Campaign comes the second highlighting the special community and calling for action to sign up as host in Seattle.
  • This structure may seems very confusing since there is a switching of purpose here. To serve these goals, a lot more buttons will be needed to direct user to different pages 
Untitled_Artwork (1).jpg
 

Wireframe

Focus

  • Keep the landing page short to keep user focus on key feature
  • When a special campaign's goal is different from main product goal. Product should be introduced and explained first before any campaign promotion jump in.So user will not be confused by what this product really does.

Be conversational

  • Call to action whenever can.

Be Visual

  • Horizon serves user from two different side - Travel and host. Therefore there are at least two "call to action". To reduce the explaining text on landing page, the "how it works" should be summarized in tabs that direct user to a different page of each topic.
  • More image, fewer words, talk in bulletin
General User 2.jpg
 

Responsive High Fidelity Prototype

 

Desktop HD

desktop HD.jpg

Android Phone

android phone.jpg

Iphone 7+

android phone copy 2.jpg

Ipad Air

iPad air.jpg
 

Secondary Landing Page - Hosting

Secondary landing page allow user to answer to the "call to action" on main page without distracting then come to a page dedicated to one feature

Wireframe

  • A mixture of illustration and picture.
  • General stock photo might turn customer away. But Illustration is a communication tool add clarity to a complex idea and  link concepts to the words.

Join a community

List your space

hostingnsketch-03.png

Meet your new friends!

hosting landing page wireframe.jpg
 

Secondary Page - Payment and donation

Payment page showing donation amount

Wireframe

  • Straight-forward form requiring least and most important information
  • A clear break down of donation amount and service fee, making sure user understand how much their payment goes into charity
  • A detail explanation on "thank you" page showing where donation is going to encourage user to learn more and share experience.
twin button copy.jpg
payment page.jpg