-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-tommy-hilfiger-linebook.html
142 lines (138 loc) · 4.75 KB
/
work-tommy-hilfiger-linebook.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tommy Hilfiger Linebook - UX Portfolio Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/normalize.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
/>
<link href="css/glider.css" rel="stylesheet" />
<link href="css/global.css" rel="stylesheet" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-7367689-2"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-7367689-2");
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/glider-js/1.7.7/glider.min.js"></script>
<script src="js/global.js"></script>
<script>
window.addEventListener("load", function () {
new Glider(document.querySelector(".wireframes .carousel"), {
slidesToShow: 1,
duration: 1,
dots: ".wireframes .dots",
arrows: {
prev: ".wireframes .glider-prev",
next: ".wireframes .glider-next",
},
});
});
</script>
<style>
section:nth-child(even) {
background-color: var(--tint-background);
}
</style>
</head>
<body>
<nav></nav>
<header>
<h1>Tommy Hilfiger Linebook</h1>
<dl class="project-info">
<dt>Client</dt>
<dd>PVH Europe</dd>
<dt>Platform</dt>
<dd>Native iPad app</dd>
<dt>Role</dt>
<dd>Interaction & visual design</dd>
</dl>
</header>
<section>
<div class="videoWrapper">
<div class="videoSizer">
<iframe
src="https://player.vimeo.com/video/555568846?title=0&byline=0&portrait=0&speed=0&badge=0&autopause=0&player_id=0&app_id=58479"
width="1600"
height="900"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
title="Tommy Hilfiger Linebook"
></iframe>
</div>
</div>
<div>
<p>
This iPad application is used by Tommy Hilfiger’s European sales force
(250 people) as a replacement for the 10kg product catalogues that
would otherwise need to be carried around when visiting clients. The
app allows browsing, searching and filtering of the entire product
range in a fluid, intuitive interface. As well as saving on printing
and distribution costs, the tool has been embraced by sales staff
leading to improved employee happiness, increased sales and brand
image.
</p>
</div>
</section>
<section>
<h2>Interaction design</h2>
<p>
Together with a group of the client‘s target users, I itemized the main
requirements and sketched out some the initial solutions before creating
more detailed wireframes for discussion with the development team.
</p>
<div class="wireframes carousel-container">
<div class="carousel">
<div>
<img src="images/work-tommy-sketches.png" alt="Sketches" />
</div>
<div>
<img src="images/work-tommy-scenarios.png" alt="Flow" />
</div>
</div>
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
<div role="tablist" class="dots"></div>
</div>
</section>
<section>
<h2>Visual design</h2>
<p>
For the user interface I incorporated the client‘s distinctive branding
with Apple‘s Human Interface Guidelines. The result is an app with a
strong identity that is easy and intuitive to use while on-the-go.
</p>
<div>
<img
src="images/work-tommy-animated.png"
alt="Slideshow of the screenshots from the app"
/>
</div>
</section>
<section id="more-work" class="inverse"></section>
</body>
</html>