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.

1. WHAT MAKES
A WEBSITE
MEMORABLE
By Kanika Gupta
UX Designer | Photographer | Blogger

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. SIMPLE
DESIGN
GOOD
STORY
PERSONALITY AUDIENCE
KNOWLEDGE

4. SIMPLE
DESIGN
GOOD
STORY
PERSONALITY AUDIENCE
KNOWLEDGE

5. No more than 2-3 main brand colours

6. A simple and easy to identify symbol

7. A unique overall feel

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. SIMPLE
DESIGN
GOOD
STORY
PERSONALITY AUDIENCE
KNOWLEDGE

10. Human-to-human
connections are the heart
and soul of business.
Storytelling is a powerful
technique for building
relationships.

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. Here are 3 favourite brand story frameworks for startups

13. 1.The PSS Story
SuccessSolutionProblem

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. 2.The Underdog Story
Big corporate business
with impersonal
customer service
Small business
passionate about
product and customers
vs.

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. 3.The Higher Purpose Story
A vision going way
beyond the product
Strong company
culture
+

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. Storytelling is medium-agnostic.Tell the story through blog posts,
customer help centres, about pages, videos, or infographics.

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. 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. SIMPLE
DESIGN
GOOD
STORY
PERSONALITY AUDIENCE
KNOWLEDGE

23. “For every design action, there is an emotional
reaction”.

24. What is Emotional Design?

25. When we have two similar coffee products, emotional
design is what makes us choose one over the other.

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. 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. Make it human
Secret Sauce for Emotional Design

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. 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. 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. 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. 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. When something goes
wrong:
Mint adds humour to the
404 page.
Example:
Mint
https://www.mint.com/

35. SIMPLE
DESIGN
GOOD
STORY
PERSONALITY AUDIENCE
KNOWLEDGE

36. A memorable brand can’t be built
if we don’t know what’s
memorable to our customers!

37. Let me give you an
example
!
Company X’ customers
are mainly young
freelance designers
like this cool handsome
young man

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. Now companyY
!
They mainly sell to
40+ corporate salesVPs

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. Doesn’t care much!
about KPI and ROI
Doesn’t care about!
your brand’s Dribble!
profile

42. The best brands have a thorough understanding of the
demographics of their target market, what their interests are, and
how they communicate.

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. 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. Anatomy of Landing Pages

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. Features
CTA 2
Pricing (Motivation for students)
Future plans
CTA 3
https://www.acorns.com/
Example:
Acorns

48. Testimonials (Social proof)
Awards
https://www.acorns.com/
Example:
Acorns

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. Pricing
Mobile Presence
Benefits in form of infographics
Action Button
https://www.uberconference.com/
Example:
UberConference

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. 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. 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. Features
Team
Action button repetition
https://www.supertasker.com/#!/home
Example:
SuperTasker

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. Value Prop
https://stripe.com/
User Benefits
Features
Primary Action button focusing to
make users more interested
rather than Signup
Example:
Stripe

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. 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. THANKS.
KANIKA GUPTA (UX)

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. Template for creating Website Personas:
http://aarronwalter.com/design-personas/