Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WHAT MAKES	

A WEBSITE
MEMORABLE
By Kanika Gupta	

UX Designer | Photographer | Blogger
“People will forget what you said, and what you did, but
they will never forget the way you made them feel”.
– Maya Angelou
SIMPLE 	

DESIGN
GOOD 	

STORY
PERSONALITY AUDIENCE	

KNOWLEDGE
SIMPLE
DESIGN
GOOD 	

STORY
PERSONALITY AUDIENCE	

KNOWLEDGE
No more than 2-3 main brand colours
A simple and easy to identify symbol
A unique overall feel
Logo
Simple graphics (same style followed everywhere)
Single colour for all action buttons
Unique style of showing metapho...
SIMPLE 	

DESIGN
GOOD
STORY
PERSONALITY AUDIENCE	

KNOWLEDGE
Human-to-human
connections are the heart
and soul of business.	

Storytelling is a powerful
technique for building
relatio...
Brand storytelling is:	

!
The reason why your company came into being	

What motivates your team to wake up and come to w...
Here are 3 favourite brand story frameworks for startups
1.The PSS Story
SuccessSolutionProblem
The example of Dropbox:	

!
« Drew Houston, Dropbox’ founder, was tired of	

forgetting his USB so he thought of a cloud-b...
2.The Underdog Story
Big corporate business	

with impersonal	

customer service
Small business	

passionate about	

produ...
The example of Snapchat:	

!
« Snapchat entered the market with a clear goal: Fighting
privacy invading networks like Face...
3.The Higher Purpose Story
A vision going way	

beyond the product
Strong company	

culture
+
The example of Buffer:	

!
« Buffer is a social media scheduling tool.Yet, they are also	

known for their extreme transpa...
Storytelling is medium-agnostic.Tell the story through blog posts,
customer help centres, about pages, videos, or infograp...
FreshDesk is a customer support
platform.	

They discuss about how they got the
product idea in their About page.
Example:...
Clarity provides a marketplace for
advice seekers and experts to
connect and share business advice.
The company recently l...
SIMPLE 	

DESIGN
GOOD 	

STORY
PERSONALITY AUDIENCE	

KNOWLEDGE
“For every design action, there is an emotional
reaction”.
What is Emotional Design?
When we have two similar coffee products, emotional
design is what makes us choose one over the other.
Look at Flickr. 	

They have a unique way of
greeting, every time you
login.	

!
Today, they greeted
me in Arabic :)	

!
I...
These details trigger an emotional response, and if used purposefully and fittingly,
they will help to form a personality t...
Make it human
Secret Sauce for Emotional Design
Maslow’s hierarchy of human needs (left) and the hierarchy of emotional design
(right). (Image:Aarron Walter)
Emotional de...
Elements of Emotional Design
Positivity 	

Increase ability to move
forward.
Surprise	

Do something
unexpected and new.
U...
FreshDesk is a customer support platform.	

The main emotion targeted is happiness.
The image, copy everything points towa...
MailChimp, an email marketing service is a classic example of
software with a personality!	

!
Freddie Von Chimpenheimer I...
Tumblr is a blogging platform.	

!
Engaging method: Surprise.	

Everytime the page is loaded; a new
background is shown.	
...
When something goes
wrong:	

Mint adds humour to the
404 page.
Example:
Mint
https://www.mint.com/
SIMPLE 	

DESIGN
GOOD 	

STORY
PERSONALITY AUDIENCE
KNOWLEDGE
A memorable brand can’t be built	

if we don’t know what’s	

memorable to our customers!
Let me give you an	

example 	

!
Company X’ customers
are mainly young	

freelance designers	

like this cool handsome	

...
Let me give you an	

example 	

!
Company X’ customers
are mainly young	

freelance designers	

like this cool handsome	

...
Now companyY	

!
They mainly sell to	

40+ corporate salesVPs
Now companyY	

!
They mainly sell to	

40+ corporate salesVPs
This might be	

memorable to them:	

testimonials of other	
...
Doesn’t care much!
about KPI and ROI
Doesn’t care about!
your brand’s Dribble!
profile
The best brands have a thorough understanding of the
demographics of their target market, what their interests are, and
ho...
Understanding the target market is critical because it provides
direction for the tone and reach of a marketing campaign, ...
Questions to answer:	

!
1.Who AreThey?	

2.What’sTheir Most Pressing Issue, Problem, or Desire?	

3.Where DoThey GetTheir...
Anatomy of Landing Pages
User Need
Action button (CTA1)
Solution: Product image on different platforms
User Benefits
Clients (Building trust)
Proof ...
Features
CTA 2
Pricing (Motivation for students)
Future plans
CTA 3
https://www.acorns.com/
Example:
Acorns
Testimonials (Social proof)
Awards
https://www.acorns.com/
Example:
Acorns
Problem (directly resonates with the users)
Solution
Features talked in terms of User Benefits
Action button
Story via vide...
Pricing
Mobile Presence
Benefits in form of infographics
Action Button
https://www.uberconference.com/
Example:
UberConfere...
Value proposition
High contrast Action button
Features + Benefits + ContextualTestimonial
Product Image
Clients (Building t...
Features + Benefits + ContextualTestimonial
Clients
Sign up form embedded in page itself
Use of word ‘Free forever’ clearly...
User Need
Action button (CTA1)
Feedback
How to use the product
Image in a different perspective (drawing attention)
https:...
Features
Team
Action button repetition
https://www.supertasker.com/#!/home
Example:
SuperTasker
Problem & Solution
https://basecamp.com/
Problem & Solution illustrated well
Very clear Action button
Form directly used o...
Value Prop
https://stripe.com/
User Benefits
Features
Primary Action button focusing to
make users more interested
rather t...
Value Proposition
https://www.shopify.com/
Clear free trial period
Features
Since free, only asks for email address to Get...
Landing page best practices	

!
Here’s a checklist for creating landing pages:	

!
1. Limit conversion goals to one per la...
THANKS.	

KANIKA GUPTA (UX)
• http://alistapart.com/article/personality-in-design	

• http://www.slideshare.net/lillayla/actionreaction-emotional-desi...
Template for creating Website Personas: 	

http://aarronwalter.com/design-personas/
Upcoming SlideShare
Loading in …5
×

How to attract People to your Website

615 views

Published on

There are hundreds of websites lying on Internet but what is the thing that makes a website memorable or different from others.
Here, is the formula for attracting people to your Website.

Published in: Design
  • Be the first to comment

How to attract People to your Website

  1. 1. WHAT MAKES A WEBSITE MEMORABLE By Kanika Gupta UX Designer | Photographer | Blogger
  2. 2. “People will forget what you said, and what you did, but they will never forget the way you made them feel”. – Maya Angelou
  3. 3. SIMPLE DESIGN GOOD STORY PERSONALITY AUDIENCE KNOWLEDGE
  4. 4. SIMPLE DESIGN GOOD STORY PERSONALITY AUDIENCE KNOWLEDGE
  5. 5. No more than 2-3 main brand colours
  6. 6. A simple and easy to identify symbol
  7. 7. A unique overall feel
  8. 8. Logo Simple graphics (same style followed everywhere) Single colour for all action buttons Unique style of showing metaphors (easy to relate to Dropbox) Example: Dropbox https://www.dropbox.com/
  9. 9. SIMPLE DESIGN GOOD STORY PERSONALITY AUDIENCE KNOWLEDGE
  10. 10. Human-to-human connections are the heart and soul of business. Storytelling is a powerful technique for building relationships.
  11. 11. Brand storytelling is: ! The reason why your company came into being What motivates your team to wake up and come to work everyday How your product came into being What types of customers find value in working with your brand and why A transparent view into the people behind the company Something that your entire team, at organisational levels, embraces A look into who you are as a company
  12. 12. Here are 3 favourite brand story frameworks for startups
  13. 13. 1.The PSS Story SuccessSolutionProblem
  14. 14. The example of Dropbox: ! « Drew Houston, Dropbox’ founder, was tired of forgetting his USB so he thought of a cloud-based file hosting system that would solve his problem. » ! ! ! ! Success is pretty self explanatory The Problem The Product as the solution
  15. 15. 2.The Underdog Story Big corporate business with impersonal customer service Small business passionate about product and customers vs.
  16. 16. The example of Snapchat: ! « Snapchat entered the market with a clear goal: Fighting privacy invading networks like Facebook with an app where your messages aren’t kept in a database» ! ! ! The Underdog The Big Dog
  17. 17. 3.The Higher Purpose Story A vision going way beyond the product Strong company culture +
  18. 18. The example of Buffer: ! « Buffer is a social media scheduling tool.Yet, they are also known for their extreme transparency and journey toward a new ways to operate as a company» 2 elements that are visionary and big parts of Buffer’s culture
  19. 19. Storytelling is medium-agnostic.Tell the story through blog posts, customer help centres, about pages, videos, or infographics.
  20. 20. FreshDesk is a customer support platform. They discuss about how they got the product idea in their About page. Example: FreshDesk http://freshdesk.com/about
  21. 21. Clarity provides a marketplace for advice seekers and experts to connect and share business advice. The company recently launched a series of stories from actual customers. Example: Clarity https://clarity.fm/customers
  22. 22. SIMPLE DESIGN GOOD STORY PERSONALITY AUDIENCE KNOWLEDGE
  23. 23. “For every design action, there is an emotional reaction”.
  24. 24. What is Emotional Design?
  25. 25. When we have two similar coffee products, emotional design is what makes us choose one over the other.
  26. 26. Look at Flickr. They have a unique way of greeting, every time you login. ! Today, they greeted me in Arabic :) ! It’s an easily overlooked detail, one that the service would work without flawlessly. Yet this detail is a big part of Flickr’s particular design character that would be missed if it wasn’t there.
  27. 27. These details trigger an emotional response, and if used purposefully and fittingly, they will help to form a personality that people will respond to positively when interacting with the product. ! This positive attitude will often lead to people sharing and even advocating for your product with their peers. ! This technique of connecting with users on a personal level is also referred to as “emotional design.”
  28. 28. Make it human Secret Sauce for Emotional Design
  29. 29. Maslow’s hierarchy of human needs (left) and the hierarchy of emotional design (right). (Image:Aarron Walter) Emotional design, is the pleasurable layer that is put on top of a functional, reliable and usable product.
  30. 30. Elements of Emotional Design Positivity Increase ability to move forward. Surprise Do something unexpected and new. Uniqueness Differ from other products in an interesting way. Attraction We all like attractive people, so build an attractive product. Anticipation Leak something ahead of the launch Exclusivity Offer something exclusive to a select group. Be responsive Show a reaction to your audience, especially when they’re not expecting it.
  31. 31. FreshDesk is a customer support platform. The main emotion targeted is happiness. The image, copy everything points towards happiness. It induces positive emotions in customers and create an interest to dig more. Example: FreshDesk http://freshdesk.com/
  32. 32. MailChimp, an email marketing service is a classic example of software with a personality! ! Freddie Von Chimpenheimer IV is the face of MailChimp and the embodiment of the brand personality (Fig 3.4). Freddie’s stout frame communicates the power of the application, and his on-the-go posture lets people know this brand means business. ! Brand traits: Fun, but not childish. Funny, but not goofy. Powerful, but not complicated. Hip, but not alienating. Easy, but not simplistic.Trustworthy, but not stodgy. Informal, but not sloppy. ! Voice: MailChimp’s voice is familiar, friendly, and—above all —human. MailChimp cracks jokes (ones you can share with your mama), tells stories, and communicates with the folksy tone that you might use with an old friend. ! Copy examples: Success message:“High fives!Your list has been imported.” Error message:“Oops, looks like you forgot to enter an email address.” Critical failure:“One of our servers is temporarily down. Our engineers are already on the case and will have it back online shortly.Thanks for your patience.” ! Engagement methods: Surprise and delight:Themed login screens commemorate holidays, cultural events, or a beloved individual. Easter eggs create unexpected moments of humor that may convey nostalgia or reference kitschy pop culture. Anticipation: Freddie’s random funny greetings at the top of each main page create anticipation for the next page to load. These greetings never provide information or feedback.They are a fun layer that never interferes with functionality or usability. Example: MailChimphttp://mailchimp.com/
  33. 33. Tumblr is a blogging platform. ! Engaging method: Surprise. Everytime the page is loaded; a new background is shown. The picture is pulled from any person’s blog. ! The name of the blogger is shown at right bottom corner Tone of voice:Very casual. Feels like you are talking to some person. Example: Tumblrhttps://www.tumblr.com/
  34. 34. When something goes wrong: Mint adds humour to the 404 page. Example: Mint https://www.mint.com/
  35. 35. SIMPLE DESIGN GOOD STORY PERSONALITY AUDIENCE KNOWLEDGE
  36. 36. A memorable brand can’t be built if we don’t know what’s memorable to our customers!
  37. 37. Let me give you an example ! Company X’ customers are mainly young freelance designers like this cool handsome young man
  38. 38. Let me give you an example ! Company X’ customers are mainly young freelance designers like this cool handsome young man This might be memorable to them: good & innovative design, a dribble social media link, references to freelance work, good looking mobile version of website…
  39. 39. Now companyY ! They mainly sell to 40+ corporate salesVPs
  40. 40. Now companyY ! They mainly sell to 40+ corporate salesVPs This might be memorable to them: testimonials of other enterprise customers, strong focus on KPI, ROI and efficiency, a professional, formal customer service
  41. 41. Doesn’t care much! about KPI and ROI Doesn’t care about! your brand’s Dribble! profile
  42. 42. The best brands have a thorough understanding of the demographics of their target market, what their interests are, and how they communicate.
  43. 43. Understanding the target market is critical because it provides direction for the tone and reach of a marketing campaign, along with the overall identity of a brand, while helping to create an organic, human connection between a business and its audience.
  44. 44. Questions to answer: ! 1.Who AreThey? 2.What’sTheir Most Pressing Issue, Problem, or Desire? 3.Where DoThey GetTheir Info (Channels)? 4.What Benefit ofYour Product SolvesTheir Problem? 5.Who do they trust?
  45. 45. Anatomy of Landing Pages
  46. 46. User Need Action button (CTA1) Solution: Product image on different platforms User Benefits Clients (Building trust) Proof by showing numbers https://www.acorns.com/ Example: Acorns
  47. 47. Features CTA 2 Pricing (Motivation for students) Future plans CTA 3 https://www.acorns.com/ Example: Acorns
  48. 48. Testimonials (Social proof) Awards https://www.acorns.com/ Example: Acorns
  49. 49. Problem (directly resonates with the users) Solution Features talked in terms of User Benefits Action button Story via video https://www.uberconference.com/ Example: UberConference
  50. 50. Pricing Mobile Presence Benefits in form of infographics Action Button https://www.uberconference.com/ Example: UberConference
  51. 51. Value proposition High contrast Action button Features + Benefits + ContextualTestimonial Product Image Clients (Building trust) http://www.invisionapp.com/ Video drawing attention to Action button Example: Invision
  52. 52. Features + Benefits + ContextualTestimonial Clients Sign up form embedded in page itself Use of word ‘Free forever’ clearly mentioned http://www.invisionapp.com/ Example: Invision
  53. 53. User Need Action button (CTA1) Feedback How to use the product Image in a different perspective (drawing attention) https://www.supertasker.com/#!/home Animated arrow drawing attention to action Example: SuperTasker
  54. 54. Features Team Action button repetition https://www.supertasker.com/#!/home Example: SuperTasker
  55. 55. Problem & Solution https://basecamp.com/ Problem & Solution illustrated well Very clear Action button Form directly used on page (No extra clicks) Example: Basecamp
  56. 56. Value Prop https://stripe.com/ User Benefits Features Primary Action button focusing to make users more interested rather than Signup Example: Stripe
  57. 57. Value Proposition https://www.shopify.com/ Clear free trial period Features Since free, only asks for email address to Get Started Separate action button for members Example: Shopify
  58. 58. Landing page best practices ! Here’s a checklist for creating landing pages: ! 1. Limit conversion goals to one per landing page. 2. Make sure every element on the page supports the conversion goal (Conversion goals can include everything from making a purchase to requesting free information). 3. The call to action should stand out from the rest of the content. Consider contrast colors to accomplish this. 4. Keep the attention ratio low. Ideally, 1:1 [The attention ratio of the landing page is how many links there are on the page compared to the number of conversion goals (which should always be one)]. 5. Provide social validation, possibly in the form of testimonials. 6. The higher the risk, the longer the content should be (Long copy is better when the product is new or complex, and more explanation is necessary). 7. Break up long content with subheadings, bullets, and formatting to make it easier to read. 8. Don’t forget to A/B test! 9. Use a landing page for inbound marketing campaigns, rather than sending visitors to the homepage; where there is lot of information that leads to confusion. Instead, landing pages can be used to focus the visitor’s attention on the information we want them to see.
  59. 59. THANKS. KANIKA GUPTA (UX)
  60. 60. • http://alistapart.com/article/personality-in-design • http://www.slideshare.net/lillayla/actionreaction-emotional-design? utm_source=slideshow02&utm_medium=ssemail&utm_campaign=share_slideshow • http://www.smashingmagazine.com/2012/07/the-personality-layer/ • http://www.huffingtonpost.com/kari-henley/what-are-the-top-10-posit_b_203797.html?ir=India&adsSiteOverride=in • http://www.quicksprout.com/the-beginners-guide-to-online-marketing-chapter-3/ • http://www.forbes.com/sites/jaysondemers/2013/08/27/6-steps-to-decoding-your-target-audience/2/ • http://www.forbes.com/sites/jaysondemers/2013/11/12/the-top-7-characteristics-of-successful-brands/ • http://getmentalnotes.com/# • https://medium.com/@uxnoah/my-top-3-favorite-web-applications-asana-medium-mailchimp-ec7c2dff9d53 • http://thestoryoftelling.com/brand-story-services/ • http://www.slideshare.net/Customericare/our-startup-branding-journey-what-makes-a-brand-memorable?qid=4a954528- b243-404a-8240-cff33c1cfdde&v=qf1&b=&from_search=1 • https://medium.com/@WebdesignerDepot/the-ultimate-guide-to-designing-landing-pages-that-convert-66c740dbadee References
  61. 61. Template for creating Website Personas: http://aarronwalter.com/design-personas/

×