Design problem

• Create a modern e-commerce website from the ground up.

• Re-imagine the branding colors, fonts, imagery, interactions, logos and product photography.

brand identity

• Siren is small company that needed to have the image of a larger, more established company. It also needed to convey quality and a premium feel as a higher end product. It also needed to stay true to its roots of the rugged outdoors.

• I used the black effect to convey quality and exclusivity.

• The custom outdoor field photography combined with an theme color of orange kept the brand true to it's roots.

• I chose the font "Stencil" because it has a pseudo military feel to it. Several of Siren's products have a rugged military grade feel to them.

font choice

• The secondary font "Tahoma" is  a neutral sans-serif font. I chose this to give the brand a modern clean feel to contrast with the rugged font.

• These two fonts combined give the feel of modern, yet rugged.

logo design

• I designed a simple, elegant, yet unmistakable logo that would translate well onto print and web applications.

• The word mark logo used a serif font to convey a sense of timelessness with added styling to hint at innovation and a sense of the modern.

determining color palette

• Deciding on the black was easy as #000000 would be the default black color with any required grayscale components as needed.

• For the orange i needed to pick something that most closely approximated a hunter orange or blaze orange, without appearing too yellow or too burnt.

graphic design

• I wanted to have a diverse collection of backgrounds for each page but still keep a consistent tone throughout the site. 

• Using some purchased stock photography and some of my own shots I designed a collection of stunning backgrounds for the site.

product photography

• I was responsible for the shooting and editing of all product photography as well.

ui design

• I applied information hierarchy principles to help users find what they wanted quickly

• A single call to action and effective social proof combined with a clear user path greatly improved the effectiveness of the landing page.

• It is commonly known that website visitors read in an F-shaped pattern.

• It was important to design the landing page to allow a natural flow through an F-shape.

FINAL MOBILE DESIGN

• Our Google analytics showed that over 80% of our views are on a mobile platform.

• I made sure that the site was completely mobile friendly, even the custom order page.

FINAL desktop DESIGN