The presentation discusses the importance of strategically using design trends to elevate websites from mediocre to memorable experiences, as illustrated by the cupcake versus muffin analogy. It emphasizes that content is the foundation of any site, and that emotionally intelligent design, especially catering to women consumers, can enhance usability and engagement. Ultimately, the effective application of trends can create a 'cupcake site' that captivates and retains users.

1. Presentation delivered
on October 25, 2012
CYNTHIA
SAVARD SAUCIER
UX specialist
@CynthiaSavard
@TP1
The Cupcake Effect
Or, how clever use of current trends can turn a “muffin site” into a
“cupcake site”

2. Warning!
Using a trend merely to earn bragging
rights is dangerous and costly!

3. What is the difference
between a muffin and a
cupcake? Why is one
almost double the price
of the other?
$2.50 $4.50

4. 3. Sprinkles
2. Mix
1. Base
Anatomy of a cupcake

5. 3. Sprinkles: Wow! factor
2. Mix: Design
1. Base: Content
Anatomy of a website

6. 3. Wow! factor
3.1 Capture attention, surprise, entertain
3.2 Emotionally-intelligent design
2. Design trends
2.1 E-commerce website design
2.2 Responsive design
1. Content trends
1.1 Polite design
1.2 Design for women

7. The base is content.
Even the most
attractive websites will
have little value without
content!
1. The base

8. Clippy is the best
example of “impolite”
design.
1.1 Polite design

9. Impolite design
Clippy claims to know what you want to do.
He monitors your actions, but does not remember your preferences.
Even if you close his window, he keeps coming back.
He’s the guest that never knows when to leave, no matter how many
times you ask him to...

10. Despite
25,000 hours
of user testing,
Mr. Clippy was such a spectacular
failure,his demise was part of the
SALES PITCH
for Microsoft XP.
Whitworth, B., 2005

11. What should be done:
1. Ask permission
2. Offer a choice
3. Explain the options
4. Respect the final choice

12. 1.2 Design for women

13. Why?
A woman is the CEO of her family.

14. As the CEO
She is responsible for 58% of online purchases
80% of product purchases
She-conomy.com 2009

15. However...
1% believe that electronics manufacturers have their needs
in mind when developing products.
believe that brands only consider the female market for
71 % cleaning and beauty products.
Consumer Electronics Association (CEA)

16. This leads to catastrophes like:
A rain cape and a shoulder bag, you say?

17. Even today, many
companies make the
mistake of creating
inappropriate sites for
women.

18. Tech tips?
In the Tech Tips section
of the Della website,
we find the following
“tips”:
Find recipes
Counting calories
Guided meditations
Wow, they got everything right!

19. For more information,
How to speak to women
check the reference
section at the end of
this presentation.
1. Human vs. text
2. Scenarios vs. characteristics
3. Different navigation
4. Function vs. emotion

20. Certain industries use
personas - which is
Warning!
great - but we must
avoid the classic “busy
mom on the go”
persona. Avoid using stereotypes.
Rather, choose an
ARCHETYPE.

21. Point #4 is my own
personal addition to the
Buchanan test
Holly Buchanan test.
1. Do you feature a woman outside of the home?
2. Do you feature a women in a role other than “mother”?
3. Is she NOT doing yoga?
4. Is she eating something other than salad or yogurt?
Congratulations!

22. Really?
I can’t do that!

23. The mix comprises all
aspects of the layout.
In the case of web, this
means design and
technological choices.
2. The mix

24. 2.1 E-commerce sites

25. This study was
published by the
The 100 most profitable
excellent website for
Smashing Magazine.
websites online
were analyzed.

26. Although you can have
between four and eight
steps, without
impacting optimization
On average,they have
5 STEPS
of the purchase
process.
in the purchase process.

27. Today,
81 %
of companies think that
their e-newsletter is
ESSENTIAL.

28. Dear 81% of companies,
Thank you for sending me one more email
each day that I have no intention of
ever reading.
Sincerely,
Everybody

29. 24 %
require clients to create
an account profile.
Can you imagine being asked for a password every time you order
chicken nuggets at McDonald’s?

30. 50 %
ask that information be
entered twice.

31. Example from the
Apple Store.
But I just gave you my email address!

32. Why?
Why is the purchase
process still not user-
friendly in 2012?
1. It’s hard to improve.
2. It’s not exciting to design.
3. It works for the companies.

33. 2.2 Responsive design

34. For more information,
check the reference
section at the end of
this presentation.
Websites designed to adapt to differently-sized screens.

35. Because the web includes all of these...

36. The good

37. Content is adapted to the
user’s context!

38. The bad
A portfolio that features sites that aren’t optimized for
mobile devices...

39. The ugly
At 3 a.m. I don’t care about the technology
behind the site. I just want my poutine menu!

40. This is what delivers
the Wow! factor.
3. The sprinkles!

41. 3.1 The Wow! factor

42. Requires two of the following:
Surprise
Attention-grabbing
Entertainment

43. Comic Sans
is not “fun”.
#ThursdayConfessions: I have always dreamed of
using Comic sans in a presentation.

44. The Typecode website
is well made and
entertaining.
Interactive

45. The Jan Ploch site is a
good example of
parallax.
New

46. Warning!
Parallax must be practical and well developed,
and not interfere with the reading of content or
performance.

47. The Unfold site is hard
to navigate and is a
bad example of
parallax, in my opinion.

48. I completed the game three times!
Fun!

49. This was a publicity
stunt staged by the
Taxi agency.
Generous

51. 3.2 Emotionally-intelligent design

52. An emotionally intelligent interaction is any state (or
change in state) of a website/app where the messaging or
functionality includes attention to details that create a
user experience that feels organic and human. These
interactions can be a big experience (like when an entire
website is down), or a very small experience (such as when
an error state on a form element appears). They can be
derived from different elements, including messaging
and copy, color and design, and responsiveness to user
inputs and system outputs. Combining each of these
crafted experiences creates soul and personality for a
website. And it’s that emotional connection with users
that builds lasting loyalty, and raving fans.
http://uxdesign.smashingmagazine.com/2012/03/28/give-your-website-soul-with-emotionally-intelligent-interactions/

53. It’s the emotional connection
with the user that keeps them
coming back...

54. Play Tic-Tac-Toe while
you wait!

55. Facebook
Instead of writing her full name, why not just “Mom”?

56. Skype
My favourite... obviously!

57. Mail
#ThursdayConfessions: I still don’t know how to
make a paper airplane :(

58. Conclusion
Using a trend merely to earn bragging rights is
dangerous and costly...

59. If used wisely, however, these trends can turn a
regular site into a “cupcake site”.

60. CYNTHIA
Thank you!
SAVARD SAUCIER
UX specialist
cynthia@tp1.ca
@CynthiaSavard
@TP1
Questions
Comments
Insults Compliments

61. References
Polite design:
Whitworth, B., 2005, Polite Computing, October, Behaviour & Information Technology. vol. 24, no. 5, September, p353
363 Presentation
Clippy:
http://infinitevishal.wordpress.com/2010/08/06/the-other-side-of-microsoft-clippy/
http://robotzeitgeist.com/tag/clippy
Design for women: http://marketingtowomenonline.typepad.com/blog/website-design-for-women/
consumer electronics Association (CEA)
She-conomy.com 2009
Women: http://chapters.aiga.org/resources/content/8/6/3/8/documents/Erica_Eden_presentation.pdf
Archetypes, not stereotypes: http://copernicusconsulting.net/designing-for-women-using-archetypes-not-
stereotypes/
How to speak to women:
http://marketingtowomenonline.typepad.com/blog/website-design-for-women/
http://scienceatlantic.ca/wp-content/uploads/2012/05/2012-Psychology-Conference-Program.pdf
http://copernicusconsulting.net/designing-for-women-using-archetypes-not-stereotypes/
Purchase process in 2012
http://uxdesign.smashingmagazine.com/2012/09/04/the-state-of-e-commerce-checkout-design-2012/
http://baymard.com/checkout-usability/benchmark
Pier-Luc St-Germain

62. References and acknowledgements
Responsive design :
http://blog.bleepsystems.com/2012/solving-a-responsive-design-navigation-problem/
http://usability.com/2012/04/24/compromise-happens/
http://blog.whatusersdo.com/2012/06/17/usability-testing-responsive-design-case-study/
Examples:
Authentic Jobs: http://www.authenticjobs.com
The Happy Bit: http://thehappybit.com/portfolio/
La Banquise: http://labanquise.com
Typecode: http://www.Typecode.com
Jan Ploch: http://www.janploch.de/
Unfold: http://bo.lt/hbve1#home
Facebook: http://www.facebook.com
Skype and Mail: exemple tiré du blog “Little big details” ci-dessous
Little Big Details: http://littlebigdetails.com/page/2
Google Pacman: https://www.google.com/doodles/30th-anniversary-of-pac-man et http://blog.rescuetime.com/
2010/05/24/the-tragic-cost-of-google-pac-man-4-82-million-hours/
Taxi Saison des nid-de-poules: http://saisondesnidsdepoule.ca et http://www2.infopresse.com/blogs/actualites/
archive/2012/03/13/article-39422.aspx
Cupcake illustration: Pier-Luc Saint-Germain(THANK YOU!): @PierotStGermain
Revision: Jean-Yves Perrodin
Isn’t it cute? Feedback: Jean-François Poulin @Jeffpouli