Shock Fashion - ecommerce Shopping Development

Personal Project

Services: Creative Direction, Website Design, Ecommerce Development, User Experience, Booklet Design, Photography, Shopping Experience

Software: Adobe XD, Photoshop, Illustrator, Lightroom, Acrobat Pro,

Website Homepage mock-up


My hobby is fashion; I love seeing the new styles being created every day by all walks of life. I also use the medium as a source of creative expression and inspiration. This project is a case study of what a streetwear brand could look like to new or current users. I designed all photos and graphical elements shown below.


With this personal project, I wanted to create something new and fresh. Many fashion brands follow each other's styles, creative directions, and selling objectives. Shock's brand looks to change that. Anyone who buys or collects hype items knows a decent amount of excitement created when you buy a specific piece that you've been eyeing. Shock plays into this excitement by showing off realistic styles that users can buy right from the page. Along with detailed product imagery, each design element is needed to entice the user to explore more or even buy a product.

lookbook page 1
website product showcase & size selection
website purchasing & in-line pages


After understanding the site's goals and how the photography was going to function, I started by organizing the images into groups that showcased the products in their best light. (No pun intended!) When choosing images, I wanted items like zippers, hoodies, and drawstrings to express themselves within each image. This detail allows the shopper to know each part of what they are paying for, permitting them to explore each piece further. Online shopping can be a blessing and a curse. You can shop from the comfort of your home, but you cannot get the same feeling and detail as you can when viewing the product in the store. These bold images help to dissolve the sense of the unknown while shopping online.

website home page


Once I completed the photography selection process, I created a wireframe of the site. My wireframing process is essential for all new areas, as it allows me to visualize where each element should be before including it within the design. After placing in each photo, I tied the titles, descriptions, and call to action to the images using a series of lines to bring the viewer's attention to learn more about the piece.

The vast majority of users will look at product images first before taking the time to read about the product or what it can offer. This was why I took the approach of providing these users bold ideas and grabbing their attention towards more content!

lookbook page 2
lookbook page 3


To bring the project altogether, I created a short lookbook that the Shock brand might offer to customers that want to view more of their pieces. The lookbook design is based on the website design, as the entire brand needed to give a consistent user experience regardless of what content the user is viewing. Overall, the Shock brand is a realistic look into what direction a modern fashion brand might go towards to develop their brand or pivot to a new point!

Disclaimer: The garments (jeans, tee-shirt, shoes, hats, jacket, etc.) shown in this project were not designed, developed, or produced by me. This project is simply an example of showcasing individual products. This project is not affiliated with the brands that make and profit from these products.

Website mock up
homepage image mock-up