1
00:00:00,240 --> 00:00:00,900
Welcome back.

2
00:00:01,110 --> 00:00:06,720
So we are on step four, which is dissecting that pattern now, the last step.

3
00:00:06,930 --> 00:00:08,910
Like I said, dissect the pattern.

4
00:00:09,060 --> 00:00:13,350
In other words, we need to analyze other websites that use social login.

5
00:00:13,620 --> 00:00:18,960
And basically we can use that to customize our modifying the pattern for our needs.

6
00:00:19,830 --> 00:00:21,120
Let's take a look over here.

7
00:00:21,120 --> 00:00:27,720
So we have ETSI again, and I'm just going to add another item to our cart.

8
00:00:28,680 --> 00:00:29,730
What do I need to do here?

9
00:00:29,730 --> 00:00:31,500
Let's actually pick another item.

10
00:00:33,920 --> 00:00:34,900
OK.

11
00:00:36,600 --> 00:00:39,530
Let's just pick a quick item here.

12
00:00:43,780 --> 00:00:46,580
So we're just going to pick that up.

13
00:00:46,600 --> 00:00:47,370
OK?

14
00:00:47,890 --> 00:00:52,960
Add that to our basket and I really like how it pushes us right to checkout really quickly.

15
00:00:54,520 --> 00:00:58,780
I kind of really like the PayPal and how that's a very up front.

16
00:00:58,780 --> 00:01:00,670
So for users that do have PayPal.

17
00:01:00,910 --> 00:01:04,710
So I really like that about this this type of checkout process.

18
00:01:05,290 --> 00:01:08,650
So if we pay with PayPal, we can automatically jump right in.

19
00:01:08,980 --> 00:01:14,260
But if we don't want to do that and if users don't have the account, which is very convenient.

20
00:01:15,160 --> 00:01:20,110
So if they want to use something like American Express, Visa or MasterCard, they can just go to checkout

21
00:01:20,110 --> 00:01:21,730
and they are right here.

22
00:01:21,730 --> 00:01:26,270
And the great thing is they're automatically hovered over.

23
00:01:26,290 --> 00:01:32,050
I mean, like the input for the sign in is automatically InFocus, which is great.

24
00:01:32,320 --> 00:01:39,820
But the primary action like is to continue as a guest or to log in socially, which is really, really

25
00:01:39,820 --> 00:01:40,290
great.

26
00:01:40,300 --> 00:01:43,210
I think this kind of gives you like the best of both worlds.

27
00:01:43,210 --> 00:01:47,590
It gives you the ability to use PayPal and just check out quickly with that.

28
00:01:47,950 --> 00:01:53,950
But also it gives you the ability to like check out as a guest sign in if you do have an account really

29
00:01:53,950 --> 00:02:00,520
easily and also potentially sign in or sign up with like a social media platform.

30
00:02:01,120 --> 00:02:06,910
So I think this is a really, really strong design pattern that they've built and they've kind of modified

31
00:02:06,910 --> 00:02:07,210
a bit.

32
00:02:08,290 --> 00:02:14,410
Let's take a look at CB2, so what I'm going to do is I'm just going to pick something.

33
00:02:15,390 --> 00:02:18,530
Here we got some very, very overpriced furniture.

34
00:02:19,510 --> 00:02:24,880
OK, so I'm going to pick this up on the sofa and add that to my cart, and that's really nice, it

35
00:02:24,880 --> 00:02:27,550
brings it right up so I can kind of, like, continue shopping or.

36
00:02:27,910 --> 00:02:32,050
Now, I like that better than how Etsy just throws you right into the checkout page.

37
00:02:32,370 --> 00:02:36,790
I don't know if I'm going to be done shopping, and I don't like how they kind of redirected me right

38
00:02:36,790 --> 00:02:39,690
to that shopping basket over here.

39
00:02:40,150 --> 00:02:45,370
So, like, I they allow you to kind of keep shopping and go back, but this allows you to kind of keep

40
00:02:45,370 --> 00:02:49,510
your process or your Skrull position on the page if I just remove this.

41
00:02:50,140 --> 00:02:52,090
So it's really easy to kind of get back.

42
00:02:52,090 --> 00:02:53,800
So I kind of like that implementation.

43
00:02:57,720 --> 00:03:04,260
So let's take a look at our cart over here, and they have something very similar, actually, they

44
00:03:04,260 --> 00:03:07,830
have the ability to check out with people right away.

45
00:03:07,950 --> 00:03:12,930
I like that they allow you to apply a promotional code right off the bat.

46
00:03:15,050 --> 00:03:21,230
And if I want you to check up now, this is very interesting, so they kind of have like a sidebar with

47
00:03:21,230 --> 00:03:26,570
the guest, check out the returning customers section and this is actually very similar.

48
00:03:26,810 --> 00:03:31,610
And signing in with Google, sign in and check out so you can.

49
00:03:32,350 --> 00:03:34,670
So they have something very similar, but they're limited.

50
00:03:34,670 --> 00:03:43,100
The options to just Google here, which I think is I'm not sure if that's the best pattern to use,

51
00:03:43,730 --> 00:03:44,180
but.

52
00:03:45,420 --> 00:03:47,120
No, it may it may work.

53
00:03:47,160 --> 00:03:48,490
So let's take a look at gas.

54
00:03:48,510 --> 00:03:48,990
Check out.

55
00:03:50,150 --> 00:03:55,610
So, yeah, Checo is a three step process, I do like how they've handled this, though, so they allow

56
00:03:55,610 --> 00:03:57,350
you to see what that process looks like.

57
00:03:57,350 --> 00:04:01,580
You're going to have to enter like shipping and gift options.

58
00:04:02,060 --> 00:04:08,270
So like your name, your street address in Canada would be your postal code town, city, province and

59
00:04:08,270 --> 00:04:08,950
phone number.

60
00:04:09,620 --> 00:04:14,450
And like I said, like, when you just go through a guest checkout, they're going to have to be there

61
00:04:14,450 --> 00:04:16,640
not to constantly do that process over again.

62
00:04:16,640 --> 00:04:20,480
So I don't think that's the smartest way they do have PayPal.

63
00:04:20,480 --> 00:04:24,100
So you can click PayPal and just automatically checkout through there.

64
00:04:24,110 --> 00:04:25,760
And like I said, they do have.

65
00:04:26,030 --> 00:04:27,450
So this is very interesting.

66
00:04:27,920 --> 00:04:35,360
So if I click checkout now, again, it's bringing me to guest checkout and it won't let me go back,

67
00:04:35,390 --> 00:04:36,820
which is very interesting.

68
00:04:36,830 --> 00:04:42,290
So I think I'm personally going to stick with the ETSI pattern.

69
00:04:43,150 --> 00:04:48,250
OK, I'm going to tweak it for my visual style, but I think I like the idea of giving them the upfront

70
00:04:48,250 --> 00:04:54,640
ability to distinguish how they plan to pay and how they want to sign, because, I mean, if they have

71
00:04:54,640 --> 00:04:57,250
a PayPal account, everything is kind of handled for you in one shot.

72
00:04:57,250 --> 00:04:59,680
But if they don't, they give you three other options.

73
00:05:00,670 --> 00:05:03,730
So that's essentially how I dissect the patterns.

74
00:05:03,730 --> 00:05:05,410
I take a look at very similar options.

75
00:05:05,410 --> 00:05:06,400
I take a look at options.

76
00:05:06,400 --> 00:05:10,960
I do like employ something like a social login, especially for like e commerce or something like this.

77
00:05:10,970 --> 00:05:17,800
So in this case, like I took a look at like CB2 Canada and I found that they are very similar, but

78
00:05:17,830 --> 00:05:21,130
this one behaves much differently than Azziz.

79
00:05:21,400 --> 00:05:27,280
And for that reason, like, I would probably follow Azziz and, you know, I can keep something from

80
00:05:27,280 --> 00:05:31,390
CB2 here, like, you know, when you add something to the car, it doesn't necessarily take a full

81
00:05:31,390 --> 00:05:33,400
screen and put you in like a car screen.

82
00:05:33,820 --> 00:05:39,730
But I can take a look and analyze if each pattern, which one is going to be best for my needs.

83
00:05:40,060 --> 00:05:44,020
So when you're trying to find a design pattern, I mean, go through that same process, figure out

84
00:05:44,020 --> 00:05:49,750
what your problem is, figure out the different types of websites that are your competitors that are

85
00:05:49,750 --> 00:05:53,310
very similar to you, that have some sort of pattern that solve the similar issue.

86
00:05:53,800 --> 00:05:59,680
Step three, jump right in and figure out which pattern is going to be right for you and then dig a

87
00:05:59,680 --> 00:06:05,500
little bit deeper and find websites that all employ that kind of similar pattern that you actually think

88
00:06:05,500 --> 00:06:09,100
is best for you and figure out which one is going to be best.

89
00:06:09,700 --> 00:06:12,400
And that's how you pick a design pattern.