Elite Sports Header

Elite Sports Apparel

As someone who loves shopping online at Nike or SportChek it was because of the overall experience you got while shopping, but when SportChek updated their website it ruined that experience and made shopping online frustrating. This gave me a lot of motivation to design my own athletic apparel website. I wanted to create the website so that it was easy for users to find what they are looking for without getting overwhelmed or confused by either the bad navigation structure or the overload of deals on the home page. Many apparel websites that I visit today have a lot of deals on their home page which can distract the user from what they originally wanted to buy. I wanted to create a design that was a happy medium between making it easier for users to find what they are looking for while being able to promote things on the home page without ruining the experience. This was a personal project which took around one month to complete. I created the visual design for this project and I had a lot of fun doing it since I'm vey passionate about athletic apparel.

Web Design
UI/UX Design

Sketch App

Personal Project


Project Date
March 2016

Home Page Preview Men's Product Page Preview Filter Page Preview Product Page Preview

The Design Process

When SportCheck updated their website I found some things that ruined the shopping experience and I wanted to fix them. The first issue was that they decided to have a mobile menu at desktop screen sizes which forced the user to have to click through many sub menus to get to where they wanted to go. As a user myself this was really frustrating me because it took me several clicks before I found the category that I was looking for. This could have a negative effect on sales due to potential customers getting frustrated and leaving the website before buying anything. The other issue that I noticed was how SportChek was trying to promote a lot of deals on their home page which can distract the user from what they originally wanted to do. The home page can be a great way of promoting products, but I believe it has to be done in an organized manner so that the user won't get overwhelmed with the amount of deals on that one page. I decided to fix this issue by having certain sections on the home page such as newest arrivals and collections so that the home page would have some structure rather than having deals all over the place.

Home Page Wireframe Filter Page Wireframe Product Page Wireframe

The Final Solution

Before I started designing the website, I took a lot of inspiration from Nike and created my own fictitious apparel store called Elite Sports Apparel. I based the design of the website from what I liked from the Nike and SportChek websites. I created a simple home page that has a call to action at the top to get the users attention, but below that there are some sections that the user can look at such as newest arrivals or collections. With the design of the footer I wanted to include some important links so that if the user wanted to find something quickly they can go there rather than having to look through the main navigation. When the user is looking at products in one category, I wanted to have a beautiful product filter so that it would be easy for them to find exactly what they are looking for rather than having to scroll down until they find something they like. When the user found what they are looking for, I wanted to show off that product with a gorgeous product page going into detail about that product, but I also wanted the user to have an easy experience selecting their size and colour they wanted. I'm really happy with how this personal project turned out, and if I started my own apparel company one day, then I might use a design similar to this.

Home Page Men's Product Page Filter Page Product Page Product Page