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.
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.
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.
Original Design and Wireframes - Why it does not work
- Too many buttons that want to achieve too many goals at the same time
- All center justified result in a busy visual layout that is hard for user to pick out what they want
- Each section seems to be a different product.
- Long span of text, hard for user to focus
- User couldn't figure out what this product does without divd deep into the video
- busy background picture almost blend in app interface screenshot
- The button in screenshot looks the same as actual functional button on landing page - User clicks on and actually leads to no were
- Copies does not standout on background therefore it is hard to present product feature.
Key feature from stakeholder
"What is Horizon"
How it works
Why choose us
Why travel like this
"The charity campaign for Seattle"
What value here
How it related to Horizon the product
"Donate to support us"
Why choose us.
What value do we bring to you
Who supported us - you should join
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.
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
- 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.
- Call to action whenever can.
- 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
Responsive High Fidelity Prototype
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
- 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
Meet your new friends!
Secondary Page - Payment and donation
Payment page showing donation amount
- 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.