(PROJECT 1) Web Design and New Media 2018

4th of April '18 - 19th of April '18 (Week 2 - Week 4)
Jaslyn Tjhai (0333039)
Web Design and New Media
Project 1

Week 2
(5th of April 2018)

Mr. Shamsul explained a little about making wire frames for websites, then he gave us an exercise to make a wire frame out of Maxis's website for us to know how wire frame works. Then once we're done with class, Mr. Shamsul wanted us to start looking for products and services from our own country and state reasons as to why we chose that website to recreate. Since I'm from Indonesia, I decided to choose J.Co Donuts for my product website because I wanted to do a website for food. As for service website, I thought of TIKI Delivery and therefore I decided to choose that one as well. Reasons why I choose those websites can be found below.

1. Product (J.Co Donuts)
   Reasons: the website itself is kind of outdated, lacks content, the whole layout needs improvement as it doesn't make the website look appealing and interesting, there's not much color, navigation isn't very clear, and it lacks images, graphics or illustration to showcase the products when it's a food website.
2. Service (TIKI)
   Reasons: the website uses traditional navigation but there's too many of it, making it confusing, too much information going on on the main page, making everything looks messy, layout doesn't look appealing and interesting, design looks a little outdated

Then Mr. Shamsul asked me to proceed with my choices and start looking at references. For product references, I decided to look at Krispy Kreme, Big Apple, Donutes, Union Square Donuts, Blackbird Doughnuts, and a few other pastry websites such as The Baker's Table. From all the references, I really like Krispy Kreme, Union Square Donuts, as well as Blackbird Doughnuts's websites. The Baker's Table is also a pretty good one. I wanted to check on Dunkin' Donuts's website but I'm not sure why I'm not able to access the website. As for service references, I decided to look at FedEx, Ups, Guernsey Post, Lion Parcel, etc. I came to really like FedEx's website because it's really clean, simple, and clear. Then I start working on my wire frames, where Mr. Shamsul wanted to see at least 10 wire frames for each product and service.

Week 3
(12th of April 2018)

On the third week, I showed Mr. Shamsul my wire frames, as well as what I planned to do where mr. Shamsul then look at the references that I chose and explained how the websites are better, what are the key points to look at in order to create a good website. For product, I was asked to choose a target audience, either teens or family (parents). I decided to go with general, something that is suitable for both teens and family since the customers who usually buy donuts are mainly from teens and family. As for service website, Mr. Shamsul also showed me FedEx's website and explained to me as to how the website is a very good one and what are the key points I should look at. Then Mr. Shamsul asked me to delete some of the navigation options from TIKI website as some of them are more to the corporate itself rather than the customers. Then I showed Mr. Shamsul my wire frame which he decided to choose the best from my 10 wire frame for each product and service website and asked me to start working on it.

Fig. 1.a. Product wire frames

Fig. 1.b. Service wire frames

I started working on my website landing page on Photoshop based on the wire frame that was chosen for me to work on.

Week 4
(18th of April 2018)

On the fourth week, I showed Mr. Shamsul my work which he gave me some feedback before asking me to submit. I showed the product website first which is J.Co Donuts.

Fig. 2.a. Product website design

Mr. Shamsul said the heading and all is okay, as for the menu, he wanted me to bring the pictures closer to the name of the product to show relation and connection, I was also asked to bold the text of the product. Then I was also asked to pay more attention to the alignment so that it wouldn't look too confusing. As for the footer, I was asked to make it longer to give it more space to breathe, add more information on the footer, as well as an icon next to the delivery option.

Moving on, I showed my result for the service website which I chose TIKI Online Services.

Fig. 2.b. Service website design

For the service website, Mr. Shamsul said he liked the original navigation because he said it's simple but mine is also fine, except he said that maybe I should try removing the outline since it gave a feeling of confinement to the words. Then I was asked to pay attention to the alignment to avoid confusion. Same thing with the footer, provide more space for breathing.
Here's the result of my work after changing based on what Mr. Shamsul asked me to do.

Fig. 2.c. Product website design final

Fig. 2.d. Service website design final