Product
-
E-commerce website
-
Custom order forms
-
Mobile site design
-
Product comparison tables
MY ROLES
-
Sole Designer in charge of:​
-
Brand identity
-
Logo design
-
Graphic design
-
Typography
-
Information architecture
-
Field and product photography
-
Interaction design
-
Mobile design
-
DESIGN PRINCIPLES
-
Black effect
-
F-patterns
-
Gestalt
-
Common conventions
-
Chunking
Project results
-
Very successful e-commerce site
-
Created professional grade website for a small new company
-
Website and company later sold to a third party (the website being a main selling point)
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

