Step ECommerce Design
Step, a new kids shoe store was in need of an original ecommerce website. Given brand colors, a logo, product pictures, and product details, I created a responsive homepage for Step's new website. The client specifically requested I include a login/signup for their royalty program, filters, products and details, and an of course emphasis on making online sales.
Inspiration
Creating a Mood Board
I began this project by looking at other large footwear companies including Nike and Adidas as well as children's shoe stores like Kids Foot Locker. This advised style and content decisions for a homepage in this sector. I also referenced ecommerce giants like Amazon and Google to see how filters and sorting features could be implemented.
Brand Analysis
Understanding Step's Brand
All I was provided with was a logo, brand colors, and page content. Because they were a new business there were no other resources to refer to so I had to read into these limited assets. Based on brightness of the green and white and their target audience of kids, I thought it best to portray the company as bright and cheery. I also noted the simplicity in their logo and choice of only a few brand colors and decided I would carry this simplicity throughout the rest of the design.
The Design
Visual Ideation
I decided to create a hero section that showed the transparent logo, with a gradation in the background and a search bar with filters so users could start looking for what they wanted immediately. Putting the search bar in the hero allowed for a simple navigation with just three items (the signup, the shopping bag, and the store finder) that were strategically the three items whose conversion would act as the top KPIs of the site. To visually connect the hero section to the first bit of content I used product images of the shoes spanning the gap between these sections. This effectively transitioned into the product content which took up the rest of the page.
The products were shown as cards with a horizontal scroll to keep each product section concise before users filtered for a more specific search. I also mocked up the active state for a product once it is clicked. The rounded card will turn black once active and give way to a black section with more product details and color options that spans the page. To further emphasize the active item a green drop shadow is applied to the active card (this is also seen as a hover state for the cards to show interactivity and drive engagement).
The green calls to action were used throughout the page as seen in the “add to cart” button, the "view all" links, and the interactive content in the hero section.
