Strong Footing■

Designed the hero section & headers of Strong Footing eCommerce website.

Role + Duration

UI/UX designer, Interaction Designer

3 weeks

Tools

Figma, Adobe Photoshop, Invision, Google Drive, Google Meet

Industry

eCommerce, Fashion

In this page

  • Overview
  • Problem statement
  • Design process
  • Prototypes
  • Outcome

Overview.

Strongfooting is a footwear manufacturing company. They are a young and vibrant team of engineers that produces fashionable footwear for individuals & corporate clients.

They wanted a website to communicate their brand values and also allow them to upload their products and get paid online – an eCommerce website.

Problem statement.

Majority of eCommerce website sliders often contained promos & pixelated images of their products all mashed together. The client specifically mentioned he didn’t want this, he sent a list of website sliders to avoid.

Thanks to my past experience with modern sliders. I was tasked to design the hero section as per the client’s recommendations

Note: I worked in a team of 4, and we’ve previously worked on numerous websites in the past, so collaboration was smooth.

Beril Media – www.berilmedia.com

Prudential Styling – www.prudentialstyling.com

Design process.

Moodboard

I started the design process by creating the moodboard using Invison. My team had already gone through the requirement gathering phase, so I had the colors, typography and product images ready to go.

Inspiration was drawn from different industries’ websites because I didn’t want to limit my inspiration to just fashion or footwear brands.

Ideation

The Brand Identity already featured a gradient (Linear). So I conceptualized the Hero section as having a form of gradient. I tested out different ideas and made decisions based on usability scalability (by our engineers), and inspiration to go a different gradient route – Radial.

I converted the Hex colors to HSL and used different variations of lightness to find the perfect fit. After which I combined them with different product images to get different slides.

Prototypes.

I created prototypes for the homepage sliders as well as individual pages. I also visualized the menu with the sliders & headers

Slider with Menu

Interactive Prototypes

To ensure proper implementation of the sliders, interactive prototypes were screen recorded and the time limit for the animations was documented and sent across to the engineers.