The aim of your web application should be to provide an engaging, interactive user experience.
I started off by wire framing the site, I wanted to try a few different options and make sure that I could play around with elements before I actually started to make it. As said earlier, I wanted to make sure that I had some aspects of Information Architecture displayed clearly throughout the site, so wire framing was key to getting my site structured and planned before I started development.
I also wanted to plan out the structure of my SQL tables instead of just jumping straight in. I started by drafting out all of the features of clothing and what I thought that people may want to search for clothes by. It was also at this point where I conducted some competitor analysis and looked at how they filtered on their sites.
I decided that I wanted to split items up into 5 different categories, these would be Menswear, Womenswear, Boys, Girls and Homewear. I would have 4 products for each category and I thought this would be enough to prove that my website can handle all of the information and still look structured and do everything that I want it to.
After finishing the development of the filtering, I decided to work on the Information Architecture design. I decided that I wanted to display all of the items uniformly and make sure that they all aligned to a similar structure within the web page. To do this, I started by creating all of the images the same size and deciding that I would have a set number of lines below each image, these would detail the name of the item, as well as the price.
I then went about creating the pages for individual items. I mocked up a few wireframes and decided on the final style. I found out a way that users could upload images, images were just stored client side, and then found that using jQuery UI, I could allow for images to be dragged. I applied this to a smaller image of the clothing on each page, with the background removed, which essentially allowed users to drag the image of clothing over their photo and which, at a very basic level, allowed users to see what clothing would look like on them.
I added a shopping basket that would keep track of all the items that users wanted to buy, including information such as price, quantity and size, in client side local storage. Then when it came to the basket page, the JS would find the items in the local storage and display them to the user with the total price.
Towards the very end of the project, I also decided to add in a contact form, making use of a form and showing that I could make use of the Google Maps API. This came about due to feature creep and I decided that the site would be better with the page, however I don’t think the page is aligned to the rest of the site and could do with more improvement had I had more time.
However, I don’t believe that the site I created focused that much on the user. With this being the Web App Design and Development module, I only tended to focus on the technical aspect. If I were truly developing this site, to take it to the next level User Experience design is something that I’d be really keen to focus on and I think it would really benefit the site.