/
hi-redesign.php
255 lines (222 loc) · 16 KB
/
hi-redesign.php
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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<? include('assets/includes/base/header.php'); ?>
<body class="interior-page hi-redesign">
<? include('assets/includes/nav/nav-secondary-desktop.php'); ?>
<section>
<aside class="align-left">
<div class="sidebar-copy">
<? include('assets/includes/nav/nav-secondary-mobile.php') ?>
<div class="headline"><span>Home</span> Insurance</div>
<p>The most ambitious project of my career. That's how I'd describe this site. The goal was to take our existing HomeInsurance.com site and increase its impact in the SEO landscape.</p>
<p>This site is about one hundred pages long including geo pages and blog posts so I'm just going to hit the high spots.</p>
<ul class="list inline-list has-row-colors">
<li>UX Design</li>
<li>Product Strategy</li>
<li>Branding</li>
<li>CSS3</li>
<li>Development</li>
<li>HTML5</li>
<li>Javascript</li>
<li>Sass</li>
<li>Responsive Design</li>
</ul>
<!-- /.list -->
</div>
<!-- /.sidebar-copy -->
<? include('assets/includes/nav/nav-primary.php') ?>
</aside>
<div class="content align-right">
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/project-headshots/small.jpg, (small)],[assets/images/screenshots/hi-redesign/project-headshots/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/project-headshots/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/project-headshots/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/project-headshots/default.jpg"></noscript>
<div class="body-copy">
<div class="row">
<div class="column small-12">
<h1>Re-thinking the brand</h1>
<p>Redesigning the logo early on was one of the key parts of this rebranding project. I thought a clever way to establish the brand and to connect with users was to simply say "HI". This simple idea was the spark for much of the redesign.</p>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
<div class="row">
<div class="column small-12 medium-10 medium-offset-1">
<img class="margin-bottom js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/assets/redesigned-logo-small.png, (small)],[assets/images/screenshots/hi-redesign/assets/redesigned-logo-default.png, (medium)]">
<noscript><img class="hi-logo" src="assets/images/screenshots/hi-redesign/assets/redesigned-logo-default.png"></noscript>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
<div class="row">
<div class="column small-12">
<h2>The Color Palette</h2>
<div class="row">
<div class="color-palette hi-redesign">
<div class="column small-4">
<div class="color base-grey">
<span>base grey</span>
</div>
</div>
<!-- /.column -->
<div class="column small-4">
<div class="color base-red">
<span>base red</span>
</div>
</div>
<!-- /.column -->
<div class="column small-4">
<div class="color base-green">
<span>base green</span>
</div>
</div>
<!-- /.column -->
</div>
<!-- /.color-palette hi-redesign -->
</div>
<!-- /.row -->
<div class="row">
<div class="color-palette hi-redesign">
<div class="column small-4">
<div class="color light-grey">
<span>light grey</span>
</div>
</div>
<!-- /.column -->
<div class="column small-4">
<div class="color dark-grey">
<span>dark grey</span>
</div>
</div>
<!-- /.column -->
<div class="column small-4">
<div class="color dark-green">
<span>dark green</span>
</div>
</div>
<!-- /.column -->
</div>
<!-- /.color-palette hi-redesign -->
</div>
<!-- /.row -->
<p>As we all know, a site's color palette is key. I chose a darker, less vibrant shade of red because I wanted to create a sense of urgency without overwhelming the user. Green was chosen to compliment it and add contrast to the use of red throughout the sites.</p>
<p>Adding green into the palette gave me a balanced dark color to add contrast to the immediacy and urgency created by red. Having shades of grey and white gave me nice neutral colors to create subtle variation throughout the site.</p>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.body-copy -->
<div class="callout">
<div class="row">
<div class="column small-12">
<h2>Every image tells a story</h2>
<p>With a new logo in place we set out to highlight the human side of the insurance business. We wanted people to know that buying the right insurance can change your life for the better.</p>
<p>As a team, we felt that the key to connecting with consumers was to choose imagery that felt natural and relatable. We wanted people to see themselves or people they know in the imagery we chose.</p>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/pages/index/small.jpg, (small)],[assets/images/screenshots/hi-redesign/pages/index/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/pages/index/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/pages/index/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/pages/index/default.jpg"></noscript>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.callout -->
<div class="body-copy">
<div class="row">
<div class="column small-12">
<h2>Home Page Hero Imagery</h2>
<p>One of our biggest focuses was the home page hero. We felt that we could really set the tone and re-enforce our mission by having a multi-slide hero. Having multiple slides would allow us to tell a story.</p>
<p>From a coding perspective, I envisioned each slide taking up the full width of the user's browser. Each slide was absolutely positioned and prevented the page from scrolling and maintained full browser width. When the user got to the end of the slides the site became relatively positioned so that the user could scroll as they're used to.</p>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/hero-slides/intro/small.jpg, (small)],[assets/images/screenshots/hi-redesign/hero-slides/intro/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/hero-slides/intro/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/hero-slides/intro/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/hero-slides/intro/default.jpg"></noscript>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/hero-slides/home-insurance/small.jpg, (small)],[assets/images/screenshots/hi-redesign/hero-slides/home-insurance/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/hero-slides/home-insurance/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/hero-slides/home-insurance/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/hero-slides/home-insurance/default.jpg"></noscript>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/hero-slides/auto-insurance/small.jpg, (small)],[assets/images/screenshots/hi-redesign/hero-slides/auto-insurance/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/hero-slides/auto-insurance/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/hero-slides/auto-insurance/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/hero-slides/auto-insurance/default.jpg"></noscript>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/hero-slides/savings/small.jpg, (small)],[assets/images/screenshots/hi-redesign/hero-slides/savings/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/hero-slides/savings/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/hero-slides/savings/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/hero-slides/savings/default.jpg"></noscript>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/hero-slides/lead-form/small.jpg, (small)],[assets/images/screenshots/hi-redesign/hero-slides/lead-form/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/hero-slides/lead-form/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/hero-slides/lead-form/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/hero-slides/lead-form/default.jpg"></noscript>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.body-copy -->
<div class="body-copy">
<div class="row">
<div class="column small-12">
<h2>Interior Page Layouts</h2>
<p>Because this was an SEO site, content was king. In a perfect world, designers can have the content molded to fit the their desired layout. In this case, the reality of the matter was that I needed to have my content match keyword density and other copy requirements. I was able to work with the copywriters to tailor the copy to my design a bit, but I encouraged them to lead and I'd do my best to mold the design to the copy.</p>
<p>In order to break up the long blocks of copy I relied on eye-catching lifestyle imagery on each hero page. I also used the green "subhero" content section in a two-column layout to add some variety. I felt that adding two columns in that section broke up the monotony of all the copy. I didn't want people's eyes to gloss over. Adding the green and lifestyle imagery added variety, prominence and a sense of style to the content as well.</p>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.body-copy -->
<div class="body-copy">
<div class="row">
<div class="column small-12">
<h3>Calculator Page</h3>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/pages/calculator/small.jpg, (small)],[assets/images/screenshots/hi-redesign/pages/calculator/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/pages/calculator/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/pages/calculator/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/pages/calculator/default.jpg"></noscript>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.body-copy -->
<div class="body-copy">
<div class="row">
<div class="column small-12">
<h3>Discounts Page</h3>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/pages/discounts/small.jpg, (small)],[assets/images/screenshots/hi-redesign/pages/discounts/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/pages/discounts/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/pages/discounts/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/pages/discounts/default.jpg"></noscript>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.body-copy -->
<div class="body-copy">
<div class="row">
<div class="column small-12">
<h3>Quotes Page</h3>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/pages/quotes/small.jpg, (small)],[assets/images/screenshots/hi-redesign/pages/quotes/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/pages/quotes/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/pages/quotes/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/pages/quotes/default.jpg"></noscript>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.body-copy -->
<div class="body-copy">
<div class="row">
<div class="column small-12">
<h3>Rates Page</h3>
<p>From an SEO perspective, this was one of the site's most important pages. Users came to it to get rate information from the map. So, obviously, the map needed to be front and center. However, I wanted to have a couple of paragraphs to introduce the user to what they were seeing.</p>
<p>Oftentimes, users would come directly to this page, so I didn't feel the need to give this page the same interior page layout as all the other pages.</p>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/pages/rates/small.jpg, (small)],[assets/images/screenshots/hi-redesign/pages/rates/medium.jpg, (medium)],[assets/images/screenshots/hi-redesign/pages/rates/large.jpg, (large-only)],[assets/images/screenshots/hi-redesign/pages/rates/xlarge.jpg, (xlarge-only)]">
<noscript><img src="assets/images/screenshots/hi-redesign/pages/rates/default.jpg"></noscript>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.body-copy -->
<div class="body-copy">
<div class="row">
<div class="column small-12">
<h3>Responsive Layout</h3>
<p>This is a screenshot of the home page just to give you a feel for what the site looked like on mobile.</p>
<img class="js-delay-load" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-lazy="[assets/images/screenshots/hi-redesign/pages/index/responsive.jpg, (small)]">
<noscript><img src="assets/images/screenshots/hi-redesign/pages/index/responsive.jpg"></noscript>
</div>
<!-- /.column -->
</div>
<!-- /.row -->
</div>
<!-- /.body-copy -->
</div>
<!-- /.content -->
</section>
<!-- /.contact -->
</body>
<? include('assets/includes/base/footer.php'); ?>