GenericApparel

Introduction

Website Assignment: E-Commerce Site

This website was created for a school assignment, neither the company nor its products are legitimate.

Overview

GenericApparel is an online clothing ecommerce store that offers high-quality apparel at low prices. The company is committed to providing customers a wide range of products that not only looks good, but also feels good to wear.

Research

E-commerce

When researching on what website to create, there were a few key factors I kept in mind.

Firstly, we were tasked to create a static website, which meant that the website's main objective is to display information.

Secondly, I wanted to do something that I can have free creativity on, which meant that instead of revamping an existing company's website, I decided to create my own fake company website, GenericApparel.

And lastly, I wanted something to add filters, micro interactions, and potentially a search bar feature, and thus I decided on an e-commerce website.

Inspiration

I searched up some big e-commerce sites such as Uniqlo, Zara, and Nike as inspiration when designing the wireframe for GenericApparel, and implemented some of my favourite UI/UX features from each of them.

Features

Existing Features

Home Page

• Headline (Biggest News)
• Announcements (Discounts, Sales)
• Featured Items (Most Popular Items)
• Coming Soon Items

Product List Page

• Products Filter (Size, Colour, Price, Type)
• Products Overview

Contact Us Page

• Text input fields for name, email, message
• Privacy Policy Checkbox (fake)
• Form Submission

Features Left to Implement

Technologies

• Hypertext Markup Language (HTML)

  • This project uses HTML to design the layout and format of the website

• Cascading Style Sheets (CSS)

  • This project uses CSS to style the website /HTML elements

• Javascript

  • This project uses Javascript to create interactive elements for the website

• Visual Studio Code

  • This project uses Visual Studio Code as the main integrated development environment (IDE)

• Adobe XD

  • This project uses Adobe XD to plan and design the wireframe for the website during the planning stage

Design Process

Wireframe (Adobe XD)

Target Audience

Teenagers/Adults

Objective

Buy affordable aesthetic/minimalist clothing

Why GenericApparel?

• Lowest prices guarenteed!
• Wide range of colours to select from
• Easy to use website interface
• Responsive and friendly email support team
• Free shipping for orders above $50

User Stories

• As a teenager, I want to buy aesthetic looking clothes, so I can look and feel good outdoors

• As a teenager, I want to buy single-coloured clothing so that it is easy to pair to other articles of clothing

• As a student, I want to buy good quality clothing at a affordable price, so that I can buy long-lasting clothing without the high price tag

• As a young adult, I want to buy simple and generic clothes that feel good so that I do not stand out in public

Testing

Tests

1. Navigation Bar:
   1. Ensure padding and margins of all navigation items and logo is vertically centered and appropriate amount of margin space is given
   2. Try to click all the navigation items to ensure that all links to other pages is working
   3. Try to shrink the width of the window down below 900px to verify that navigation items disappear and the hamburger menu appears
2. Hamburger Menu (<920px)
   1. Try to click the hamburger menu to check that navigation items reappear in a column below
   2. Ensure that the links in from the hambuger menu nav bar works
3. Varying/Phone Sceen Sizes/Aspect Ratios:
   1. Try resizing the browser windows to many devices screen size and see if our website resizing accordingly
   2. Run website on various physical devices to see if any unexpected issue pops up
4. Different Browsers (Compatibility)
   1. Try running the website on multiple browsers (Chrome, Edge, Firefox, Opera)
   2. Note down which browsers will be unable to render the website properly and attempt to work around/fix that
5. Contact Form:
   1. Try submitting the form with missing compulsory inputs, and see if your request still goes through.
6. Products List Gallery (Grid layout and hover)
   1. Try hovering over all the grids and ensure that the labels are correct
7. Animations and Transitions
   1. Try and view all animations and ensure that they are all work well and consistant. 2, Ensure that animation/transitions will not take too much resources to run
8. Featured Products Slideshow
   1. Try scrolling through as much of the slideshow as much as possible.

Credits

Content/Media

• All product and model images were obtained from Uniqlo
• All product titles were obtained from Uniqlo

Acknoledgements

• I received inspiration for this project from Uniqlo, Nike, and Etsy.

Fonts/Typography

• Favicon and Logo: Satisfy
• Text: Geneva, Verdana, Tahoma, sans-serif