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.

1/12
product photography

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

1/5
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

[JC]