The Scope

H&H Drones is an up and coming aerial media company in Illinois. They take pictures and videos that look like this.

Desktop HD.png

The founder reached out to me and asked for me to design a single scroll landing page with a way for potential clients to submit a proposal and contact information. 

 
 

The Original Sketch

Notes_171030_202506_5ec_0.jpg

 

 

 

 

 

 

 

The Plan

I wanted to show off the one of a kind photography with a gallery and a video background at the title. I wanted to explain the company and their product with sections. The sections would help clients understand exactly what to expect throughout the entire service. I wanted to add references from past clients to gain trust. The ultimate goal of the site is to get users to submit a proposal and contact info. 

 

The Wordmark

WordMark.png
WordMarkEditing.png
 

I wanted the font to have a modern feel, a heavier weight, and a futuristic looking ampersand. After searching through google fonts and my own collection, I asked my client to pick his favorites. That narrowed the list down to 5. Then I played with each one until it felt right. 

 
H&H WordMark@3x.png
 
 
H&HWireFramw.png
 
 

Iterations

iteration1.png
 

UI Library

 
UI Library HH Drones.png
 
 

The Final Prototype

hnhpreviewallscreens.png
macbookfullpagehnh.png

The Wordpress Site

The Solution

I designed everything in Sketch. Then I exported all my designs as png files and uploaded them all to the webpage. I created a button to the form by linking an image to a separate page with the form embedded. I created the header of the website by editing the watermark onto a video in iMovie, exporting it to Youtube, and uploading the youtube video to automatically play at the top of the page.

The Constraints

The budget was $8 a month. It was for Wordpress's basic plan that allows you to choose a template, and create multiple pages, and write blog posts. I couldn't customize the font, spacing, create my own form, or add buttons. I couldn't use plugins that would help customize the site. This plan is usually for bloggers, not businesses.

ezgif.com-optimize (2).gif

What I Learned

I learned a huge lesson about designing for other people. It’s all about compromise. I learned how to communicate my vision better, to be more adaptable, use feedback often, and ship something that gets the job done, even though I know it isn’t perfect.

Check out H&H Drones to see the live site!