Joe Lamyman

Portfolio

Projects | Skills | Method | About Me

The Yorkshire Exchange

Summary

For the Web application design and development module, I created a website called The Yorkshire Exchange. The site used HTML5, CSS, JavaScript and WebSQL to provide a great user experience for the visitor. Users could also make use of JQuery UI to upload an image of themselves and drag the item of clothing they were viewing, on top, giving them some idea of what it would look like.

The Brief

For this assessment, you will create an interactive web application using HTML5, CSS and JavaScript that is designed for both laptop and tablet viewing and incorporates the collection, storage and display of some data in the client’s browser.

The aim of your web application should be to provide an engaging, interactive user experience.

Ideas

For my initial idea, I decided that I wanted to make something that I would make use of all my skills that I’d learnt through the module so far. Things such as SQL, Information Architecture, JavaScript, these were all things that I’d learnt over the 10 weeks and all aspects that I wanted to make the most of with my site.

I thought that the best way to truly try testing all of my new skills would be to create a small online shop. I could make use of all my new skills and truly test myself. I decided that a large part of the functionality within the site would be filtering. I could make use of my WebSQL knowledge and manipulate this along with the JavaScript that I’d learnt.

Design

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.

Development

Once I had wireframes for my site and the structure that my SQL tables would follow, I decided to get straight into the development of my site. Once I had the core functionality sorted, I decided to start working on the SQL tables. I decided to add 25 items to truly test the functionality. Once the items were added, I tried testing the filters I had created, which worked as expected. I then created all of the different buttons for the different filters I had. I coded the functionality within JavaScript for each of the different possibilities.

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.

Conclusion

Overall I think the site worked really well, I managed to really test myself in terms of my HTML, CSS and JavaScript knowledge. I was pleased that I got to try including things like API’s, different functionality through the use of a number of libraries as well as the use of SQL and local storage. I think technically I excelled in this project.

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.