1. Why Do This Project
Superdry is a very good brand. I like their cloth very much. But I noticed that their website is not easy to use and not clearly to show the new arrival product. As a user, I was thinking how to make the new products can be introduced very clearly and high efficiency. I plan to code this website to make the users to know as a processing, from brand introduction, new arrival products, the detail of the products, the quantity of the products, buy and shipping policy to contact the company to get the problem solved. I simplified the processing and makes it easy for the users to go through.
2. Time for the Project
It cost me 2 weeks to finish this website from design to coding. I finish site map and wireframes in the first week. I am done design and coding in the second week.
3. First Week's Work
i. Site Map
How many pages I may need on the website. I was thinking for a while and trying to figure out what is important for a cloth brand website and what the user usually care when they are shopping online.
I have to say for a marking and brand. The company culture and their basic information are very important for the potential customers. But if a user opens a website and cannot see the text about the company immediately or they have options to skip reading the information, the users will not take the time to get know the company. I made the decision to put the "About Us" on the home page. But as I said, the user may quickly jump to another web page by using the navigation bar. I put the video with audio on the home page and try to stop the users.
Navigation is very important too. It is very directly to guide the user to visit the web pages. The online shopping customers are really like new products. That is why I put "New Arrival" for the first menu tag. Following the "New Arrival" is "FAQ" and "Contact Us". Because when the users find some products they are interested in, They may have a lot of question about how to do shopping, what the policy is and if the product does not match then how to return and get the refund. Those questions are basic questions showing in "FAQ". But for some special questions, the users can go to the "Contact Us" to get know where the local store is, what time is working time or leave a message by email or make a phone call.
The Users can go to check every new product on "New Arrival" page.
ii. wireframes
Those are Website Wireframes.
Those are Mobile Version Wireframes
4. Second week's work
i. Design
I checked the original official website of Superdry and downloaded the images. I followed the wireframes to designed my web pages. Because the time is limited. I have to do the design and coding at the same time.
ii. Coding
I use the Adobe software to design and using the sublime to code. After I am done with coding I text the web page. It is good to go.
coding language: HTML, CSS, Javascript, PHP
test the website with https://validator.w3.org/
Testing Result
5. The website looking
The Responsive Web page looking
The Tablet and Mobile version looking
Please feel free to visit the website.
Click Link Here
