-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprinciples.html
210 lines (200 loc) · 9.4 KB
/
principles.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
---
layout: default
---
<h1><a name="design-principles" id="design-principles" style="position: absolute; top: -300px;"></a>Design Principles</h1>
<div>
<div class="row principles">
<div class="col-xs-6">
<ul class="design-principles">
<li><div class="img"><img src="/img/heart.png" /></div> Demonstrate value.</li>
<li><div class="img"><img src="/img/handshake.png" /></div> Build trust through transparency.</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="design-principles">
<li><div class="img"><img src="/img/brain-with-gears.png" /></div> Create comprehension.</li>
<li><div class="img"><img src="/img/balance.png" /></div> Balance form and function.</li>
</ul>
</div>
</div>
<div class="row principles">
<div class="col-xs-12">
<h2 class="sg">Demonstrate Value</h2>
<div class="row">
<div class="col-md-3 text-center">
<img src="/img/heart.png" class="icon-img" />
</div>
<div class="col-md-9">
<p>We know that working in Revinate is not the primary job of our customers.</p>
<p>In order for them to love us, in every interaction our customers should see the value we create for them.</p>
<p>This means we need to know our users deeply, understand what “value” means to them, and bring that value front and center.</p>
</div>
</div>
</div>
</div>
<div class="row principles">
<div class="col-xs-12">
<h2 class="sg">Create Comprehension</h2>
<div class="row">
<div class="col-md-3 text-center">
<img src="/img/brain-with-gears.png" class="icon-img" style="height: 180px;" />
</div>
<div class="col-md-9">
<p>We make our users feel smart, respect their time, and keep workflows short and meaningful.</p>
<p>We know that they are busy doing many other things.</p>
<p>Our software distills overwhelming data into meaning, simplifies confusing tasks, and brings important information into focus. </p>
</div>
</div>
</div>
</div>
<div class="row principles">
<div class="col-xs-12">
<h2 class="sg">Build Trust Through Transparency</h2>
<div class="row">
<div class="col-md-3 text-center">
<img src="/img/handshake.png" class="icon-img" />
</div>
<div class="col-md-9">
<p>Users always know what will happen when they take an action.</p>
<p>Simple and common tasks are frictionless and obvious; complex tasks are efficient and delightful, even when they are interrupted.</p>
<p>Our software allows our users to act with confidence, and trust they can’t make a mistake.</p>
</div>
</div>
</div>
</div>
<div class="row principles">
<div class="col-xs-12">
<h2 class="sg">Balance Form and Function</h2>
<div class="row">
<div class="col-md-3 text-center">
<img src="/img/balance.png" class="icon-img" />
</div>
<div class="col-md-9">
<p>We believe that useful is beautiful, and that good design gets out of the way.</p>
<p>This implies we need to focus on workflow, interaction, <strong>and</strong> visual design details. </p>
<p>Usability and trust increase when we get the details right.</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="row pd-t-xl mg-t-xl" style="position: relative;">
<div class="col-xs-12">
<h1 class="mg-t-xl mg-b-xl"><a name="voice" id="voice" style="position: absolute; top: -100px; display: block;"></a>Brand Voice: Approachable, Concise, Sophisticated</h1>
</div>
</div>
<div class="row principles">
<div class="col-md-3 text-center">
<img src="/img/concierge.png" class="icon-img" />
</div>
<div class="col-md-9">
<p><strong>Like a good hotel concierge,</strong> we want to:</p>
<ul class="brand-voice">
<li>Be approachable, so our customers know they can go to us for help.</li>
<li>Respect our customers’ time.</li>
<li>Demonstrate an appealing level of sophistication.</li>
</ul>
</div>
</div>
<div class="row principles">
<div class="col-xs-12">
<h2 class="sg">Approachable<br /><small>We meet our customers with empathy, and demonstrate that we understand them.
</small></h2>
<div class="row">
<div class="col-md-6">
<p>DO</p>
<ul class="brand-voice">
<li>Use consistent terminology across channels (help desk, app, marketing, etc) so that it becomes familiar</li>
<li>Use relatable, real examples</li>
<li style="list-style-type: none;"> <br /></li>
</ul>
<p class="example-text">Example: We evaluate competitor data to help you understand your ranking.</p>
</div>
<div class="col-md-6">
<p>DON'T</p>
<ul class="brand-voice">
<li>Use overly formal language (unless called for in a particular region)</li>
<li>Focus on sales over expertise</li>
<li>Use unnecessary jargon or abbreviations (unless they increase clarity)</li>
</ul>
<p class="example-text">Example: We utilize comp set to benchmark scorecard data.</p>
</div>
</div>
</div>
</div>
<div class="row principles">
<div class="col-xs-12">
<h2 class="sg">Concise<br /><small>We respect our customers’ time by speaking to them clearly, succinctly, and directly.</small></h2>
<div class="row">
<div class="col-md-6">
<p>DO</p>
<ul class="brand-voice">
<li>Use active voice</li>
<li>Use actionable, direct language</li>
<li>Write just enough to get your point across. Use visual aids to reduce word count.</li>
</ul>
<p class="example-text">Example: We have sent you an email to activate your account. If you do not see it, please check your spam folder.</p>
</div>
<div class="col-md-6">
<p>DON'T</p>
<ul class="brand-voice">
<li>Use passive voice</li>
<li>Make users guess what they need to do</li>
<li>Add fluff or flowery language to increase word count</li>
</ul>
<p class="example-text">Example: You will have received an email to activate your account. It may have landed in your spam folder.</p>
</div>
</div>
</div>
</div>
<div class="row principles">
<div class="col-xs-12">
<h2 class="sg">Sophisticated<br /><small>We are global citizens and trusted experts in our field.
</small></h2>
<div class="row">
<div class="col-md-6">
<p>DO</p>
<ul class="brand-voice">
<li>Demonstrate polite language and conventions globally, across touchpoints</li>
<li>Share expertise; back up our knowledge with data</li>
</ul>
<p class="example-text">Examples:</p>
<ul class="example-text">
<li>Your guests want a variety of experiences. Here’s how to provide that to them.</li>
<li>Usted puede cambiar su contraseña. </li>
</div>
<div class="col-md-6">
<p>DON'T</p>
<ul class="brand-voice">
<li>Use sarcasm, overly colloquial language, or pop culture references</li>
<li>Use overly informal or “sassy” prose</li>
</ul>
<p class="example-text">Examples:</p>
<ul class="example-text">
<li>Getting your guests to book extra stuff is where the rubber meets the road.</li>
<li>Voz puedes cambiar tu contraseña. </li>
</div>
</div>
</div>
</div>
<div class="row principles">
<div class="col-xs-12">
<h2 class="sg">Questions?<br /><small>You are not alone.
</small></h2>
<div class="row">
<div class="col-md-5">
<p>DO</p>
<ul class="brand-voice">
<li>Check out the blog posts for inspiration!</li>
<li>Use <a href="http://www.hemingwayapp.com" target="_blank">www.hemingwayapp.com</a>
<li>Ask the Design team</li>
</ul>
</div>
<div class="col-md-7">
<img src="img/hemingway.png" style="display: block; max-width: 60%; margin: auto;" />
</div>
</div>
</div>
</div>
</div>