← BACK
Logo, Icon Version. Two curly brackets frame the initials "S" and "C" over a square background with rounded corners. The icon background is light orange, with the brackets and initials in dark purple.
Shaoor’s Portfolio
Mac desktop monitor with a clothing e-commerce website on screen. The website uses green colours.
Mac desktop monitor with a clothing e-commerce website on screen. The website uses green colours.
Desktop website of a clothing e-commerce website on screen. The website uses green colours.
Desktop website of a clothing e-commerce website on screen. The website uses green colours.
Mac laptop monitor with a clothing e-commerce website on screen. The website uses green colours.
Mac laptop monitor with a clothing e-commerce website on screen. The website uses green colours.

Project Background

Role: Designer, WordPress Developer

This is 2-phase e-commerce website for a fictional clothing retailer called “Shtylish”. The website needed to appeal to young and middle-aged adults who don’t have much time on their hands to shop. The clothing retailer was imagined to be a mostly online, quick, experience that is focused on environmentally friendly and affordable clothing.

Designed on paper and Figma, this clothing e-commerce website was brought to WordPress. Phase One spanned designing, wireframes, and a Figma prototype embedded here. Phase Two included creating a WordPress website which the mockups pull from.

This project is conceptual and not affiliated with any brand. The desktop version shown in mockups, and the logo name and design are my own.

Solution & Concept

The website was designed from scratch with hand-drawn wireframes. Special attention was paid to user flow to facilitate a customer entering the website and buying a pair of jeans. Research into common frustrations when navigating fashion retailers and competition, including full-page menu design and unaligned text, was also done.

A navigation bar that did not take over the home page, which would frustrate visitors, was used with categories above the fold.

Wireframes

Logo for brand "Shtylish" in white text over a medium tone leaf-green background.
Concept sketches for a desktop item and category page for an e-commerce website.
Concept sketches for a desktop “item” and “category” page for an e-commerce website.
Concept sketches for a desktop and mobile home page for an e-commerce website.
Concept sketches for a desktop and mobile “home” page for an e-commerce website.
Concept sketches for a mobile item and category page for an e-commerce website.
Concept sketches for a mobile “item” and “category” page for an e-commerce website.

Final Deliverables

The deliverables included

  • a landing page, a category page, and a product page.
  • responsive desktop and mobile designs.
  • Figma prototypes of website.
  • A working WordPress e-commerce website.

The WordPress website used plugins to support the needed store.

The Deliverables – The Embedded Figma Prototypes

Desktop

← Click Fullscreen

Top Right

Mobile

← Click Fullscreen

Top Right

The Deliverables – The WordPress Website

Mac desktop monitor with a clothing e-commerce website on screen. The website uses green colours.
Mac desktop monitor with a clothing e-commerce website on screen. The website uses green colours.
Desktop website of a clothing e-commerce website on screen. The website uses green colours.
Desktop website of a clothing e-commerce website on screen. The website uses green colours.
Mac laptop monitor with a clothing e-commerce website on screen. The website uses green colours.
Mac laptop monitor with a clothing e-commerce website on screen. The website uses green colours.

All images used are stock images. The brand name and logo are original designs.