Industrial Training - Project 1
6/1/2020 - (Week 1 - Week 10)
Industrial Training
INSTRUCTIONS
TASKS AND CHALLENGES
Week 1 | Monday, 6/1/20
Task: Today I was tasked with a job asked by a real client which was KLIA. KLIA asked Pivot Solutions to propose a design for 2 empty walls along the domestic KLIA airside arrival passage. The existing walls is to be replaced by a plywood wall structure up to 60ft and 90ft in length. The contents of the right wall are to be related to the KLIA airport. The longer, left walls had to contain Visit Malaysia 2020 content. Mr. Allen tasked us with designing the walls and advised us along the way.
Action: Mr Allen brought more clarity to what should be on the walls and its contents. He told us to focus on the idea before working on the design. Working on a design straight away without a concrete idea is difficult. He also suggested to look for local artists and sponsors to collaborate with. I put more thought into what Mr Allen was saying about having a seamless flow within the paintings on the wall and chose an artist I did research on earlier that painted realistic nature and another local contemporary artist. After looking at their art I made a concept design using their artwork as we hoping to use their painting/fine skills on the KLIA walls.
Result: I ended up making a lot of progress on the left wall design. It looked a lot more interesting and there is eye flow between one artwork to the next. The day was coming to an end and I almost finished the concept design. I was still unsure about the right wall design and kept it as simple as 3 images of the airport.
Week 1 | Tuesday, 7/1/20
Task: Today we had to present our task from yesterday to Mr Allen. We had to finish the designs for both the left and right wall and put our proposal onto slides with explanations and rationale. After finishing that we were tasked with editing 20-30 photos that we have selected from a large bank of photos given by a Pivot staff. Towards the end of the day Mr Allen gave me one more task which I am to work on the next day, which is to research and design a website for Fama, an agricultural government sector company.
Action: I added finishing touches to the designs and made the slides. Mr Allen told us to include details such as the size of the TV if we were putting any on our walls and to explain our rationale behind the designs. After completing the task I presented it to Mr Allen. After getting feedback I made changes and worked on the next task, which was editing the Photographs.
Result: Mr Allen gave feedback and I made the changes accordingly. He gave suggestions of how he would improve the right wall design, such as using diagonal lines to transition from one image to another to create movement and flow. He also said he would have used a sketch artstyle/drawing rather than photographs for the right wall content. He liked my left wall design and was glad with the improvement and changes. He also showed examples of real products that Pivot has worked on such as Hari Raya cards that used silk-screen printing and collaboration with another company.
As for the photo editing I continued to select 40 or so photographs that I edited in Photoshop. A lot of the photos were unsaturated, dark, over-exposed or had off-colors. I tried my best to enhance the colors, saturation, and exposure. I also learned what a vignette was and tried experimenting with it in some photos.
 |
| Editing Photos in Photoshop |
Week 1 | Wednesday, 8/1/20
Task: The day before I was briefed by Mr Allen about the design proposal we had to make for Fama. I was to continue working on that. I also had to finish up editing the photos from yesterday.
Action: For the Fama website design I started with doing research on the different UI designs for websites that have videos on them such as Netflix, Amazon, and other uniquely designs websites. I also studied the existing Fama official website and YouTube channel. I watched through some of their videos to get a feel of what Fama really feels and represents. After conducting enough research I sketched some rough designs and wire-frames. Mr Allen also mentioned each sub-page should feel unique and be distinct.
Result: I managed to get some design ideas down, but Mr Allen commented that he would like the home-page to have a big preview video with large text above the other content. I then was introduced to a designer at Pivot, who was also working on the same project. She showed me her workflow and how she handled the task. It was very useful and will help me refine my workflow and design.
 |
| Research on existing video streaming websites |
 |
 |
| Homepage design sketch |
 |
| Sub-page design sketch |
 |
| Another homepage design sketch |
Week 1 | Thursday, 9/1/20
Action: I wire-framed the website's homepage/landing page on paper. I also did a little more research on different websites similar to Netflix. After finishing the homepage designs I went on to design the sub-pages. I thought about the user experience and what would be most effective design for a website such as this.
Result: Mr Allen and other Pivot employees had a look at my designs. I was having trouble figuring out whether I wanted a separate page for each uploaded videos to the website or not like YouTube. I got valuable feedback from the employees and they gave me some ideas.
 |
| Wireframe for web design |
 |
| Initial designs |
Week 1 | Friday, 10/1/20
Task: Continued designing website for Fama. I was also tasked to make a mobile version of the website.
Action: I finished up wire-frame for homepage and sub-pages. I also started a high-fidelity design for the web homepage and made 2 versions, a light and dark version to see which design would be more suitable. I also linked the pages in Adobe XD to see how the transitions and potential animations. After being asked by Mr Allen to work on the mobile version I proceeded to do so. However before wire-framing I looked at existing web apps and compared them the the websites. I looked random website designs and their mobile counterpart as well as Netflix mobile and YouTube mobile. I used some of their UI layouts and implemented into the wireframe. I also began to make a write up of my design inspiration and rationale as instructed by Mr Allen.
Result: At the end of the day I showed my designs to Mr Allen. I then looked at another Pivot designers take on the project so far. She straight away went into the final design rather than wire-framing like I did. I still have to finish the designs by tomorrow which I will then submit.
 |
| Mobile Wireframe |
Week 1 | Saturday, 11/1/20
Task: I was tasked yesterday by Mr Allen to submit a proposal with both the web and mobile version for the Fama website. I had to submit the homepage and 1 example sub-page for both the web and mobile version. I had to submit it by tonight.
Action: I finished the final design for the web-page design. I cleaned up the UI and added slight changes here and there. I added a video description to the video popup within a box. For the Terkini sub-page I added navigation buttons to go the next and previous set of videos on the page. I also added a header image for the theme of that page which was the durian fruit. After finalizing that design I continued to finish the mobile designs. I applied the changes I made to the web version onto the mobile version. For the mobile version video-popup, rather than having to click outside the box to exit the video which isn't practical on a mobile screen, I designed it so that it had be swiped up instead.
Result: I added all my designs and descriptions into a PDF document as I was asked. I sent my work over to Mr Allen and another Pivot employee. I have not received feedback for it yet.
 |
| FAMA Web version Final Design |
 |
| FAMA Mobile Version Final Design |
Week 2 | Monday, 13/1/20
Task: Today we had a team meeting with everyone in Codium and Pivot. Mr Allen had me look at the VM2020 website. There is going to be another tab on the Peek Into Malaysia page. He asked me to come up with ideas for this new tab called experiential, which will include articles but with more interactivity such as maps or slideshows.
Action: For the rest of the day I did on research on existing websites which are experiential, in other words provide an experience for the user.
Result: At the start of the day Mr Allen gave me feedback on the design proposal for Fama I submitted earlier. He mentioned that the mock-up needs to look a mock-up, rather than a template. I needed to implement actual content so it looks like the actual final product as much as possible.
Week 2 | Tuesday, 14/1/20
Task: I was tasked by another designer in Pivot to design a collaged key visual and if I can a poster including the key visual for VM2020's Photo Competition. I was allowed to use any stock images or images from the official VM2020 website as long as the key visual represents the theme of the Photo Competition which was eco-tourism and art/culture. The pivot designer selected posters that we can use as reference.
Action: I gathered a large selection of images from Pixabay and the VM2020 website that I thought I could use for the themed key visual. After gathering the images I just started selecting random ones and cropping out different objects, animals, and sections of the images. After spending a lot of time cropping and playing with composition I then proceeded to act effects that would make the cropped images appear painted on. After that I played around with the colours and saturation to really bring out the key visual. Upon making final changes I decided to try to make a poster out of it but ran out of time and then had a discussion with the Pivot designer in charge of the project.
 |
| Concepts for Collage Poster |
 |
| Key Visual Art |
 |
| Poster Design |
Result: I got valuable feedback from Nas, a Pivot designer. She showed me her take on the poster and critiqued me and Nadia's (another intern) key visual and posters. She liked me key visual and how it was bright and vibrant and had good composition. My layout for the poster was not up to par however. She said she would use my key visual for the actual VM2020 Photo Competition website and make improvements and changes to it. For tomorrow I would have to make these changes.
Week 2 | Wednesday, 15/1/20
Task: At the start of the day Nas met with me and showed her suggested design changes to my key visual. I had to change some of the composition and add more objects to complete it. She also mentioned I had to design the UI of the photo competition (PEC 2020) on the VM2020 website after this task.
Action: The rework of the visual of took the whole day, so I didn't have time to do other other tasks but Nas told me it was all right. I tried my best to apply the design changes as close to Nas' design as possible, while also making sure the overall composition works with the images I am using. The most time-consuming part was extending the green water more and ensuring it blends well with the blue water. I managed to finish at the end of the day and sent it to Nas.
 |
| Final Version of Key Visual |
Result: Nas and Mr Allen looked at my key visual before I submitted it. There were satisfied with the result and I had to leave it up to Nas to make sure it fits well with the poster and the other mediums.
Week 2 | Thursday, 16/1/20
Task: The task today was to conduct a User Acceptance Test (UAT) for the VM2020 website. I was in charge of testing on Internet Explorer and Microsoft Edge. I had to test different sections of and actions of the website. On a form I had to tick either pass or fail and extra notes if necessary detailing the pass or fail. After that I was tasked with editing a video for an interview with TV actress Sharifah Sakikah. I was instructed to review the raw footage and select 10 questions to be edited into a short 2 minute interview with an intro and questions text popup before each answer.
Action: I conducted the User Acceptance Test properly and made sure everything was tested at least 3 times. I was told that the VM2020 website on Internet Explorer was very unstable and full of issues. I tried to find as many bugs and abnormalities as possible for each section of the website. After finishing the test on Internet Explorer I did the same thing on Microsoft Edge. There were less issues on Edge but still had some fails. I then started reviewing footage from the interview and began editing. After selecting the 10 questions and doing a rough edit in Premiere Pro, I opened After Effects and began constructing the typographic intro.
Result: Khalid, the Pivot designer and videographer who instructed me with the task reviewed what I have edited so far. He gave me some important pointers to improve the edit. He said to always sketch out on paper before actually editing. He commented that my intro typography edit was outdated and it is sometimes best to fit all the words into a single screen rather than it transition into another screen. People want to see text appear quickly and disappear seamlessly. Khalid also commented that the text for the questions were too long and again, keep the information to the point and on one screen. Lastly he told me organize the files on my Premiere project by using folders as there may be multiple editors working on one project and keeping it organized will help the next editors.
 |
| Interview Edit |
Week 2 | Friday, 17/1/20
Task: Today the company went on a team building trip so us interns did not have to attend work. However I still had the video the edit from yesterday and send to Khalid.
Action: I continued with the editing with Khalid's feedback and tips in mind. I first finished the actual interview editing and making sure the clips and question texts transition effectively with each other. I also made necessary cuts to shorten the overall length of the video and remove parts where the answer was being dragged out too much. I re-edited the typographic title intro in After Effects. I made it all into one shot and experimented with text entering the screen and leaving the screen. For when Sharifah's name appeared I had it be revealed as if it was being typed onto the screen. After that I downloaded the logo used from Convergence's website and had to add an intro for it after the title sequence. I used a simple right to left transition into the Convergence intro where the logo fades in. After the Convergence intro it transitions into the interview. As for the interview I went through the edit a few more times and made minor adjustments here and there.
Result: I uploaded the save files to Google Drive and sent it to Mr Khalid. I have not gotten feedback from Mr Khalid for now.
 |
| Re-editing intro sequence |
Week 3 | Monday, 20/1/20
Task: Today we didn't have to go to the office as the company just came back from the team building camp. However we were tasked to take photographs for the VM2020 website. The items consisted of 6 chinese food:
- Yoo Char Kwai
- Yeong Tau Foo
- Porridge
- Lontong
- Fish Head Noodles
- Chee Chong Fun
Action: I met with the other interns for this task and went to Sunway Pyramid first. We went to 2 different restaurants to take photographs of the food we ordered. We took all sorts of shots at different angles and perspectives so that potentially one of them could be used for the website. After that we went around SS14 and SS15 to find more restaurants that were selling these specific food items. Eventually by the end of the day we managed to take photographs of all 6 of the food items.
Result: Overall the day was a success. We managed to take a lot of photographs with different angles and shots. I shall see tomorrow what Mr Allen has to say about the photos and see if post-editing is necessary.
 |
| Some of the photographs taken of the food |
Week 3 | Tuesday, 21/1/20
Task: Today's task was to make improvements to my FAMA website and web app design. Mr Allen informed me that on Friday there will be a presentation on the design proposal so I should get it done by then. Mr Allen also commented that my design has a style similar to YouTube's so I should pursue that. He told to do more research and study different elements on other video streaming sites again. Meanwhile Khalid also discussed the feedback for my video edit which I did last week. He said there will be a new video project on Thursday.
Action: Today I looked at video streaming sites similar to YouTube. I tried to study their elements and see how I can apply it to my existing design, such as how the videos are arranged, how the video thumbnails are displayed, how the featured video is designed, the UI when videos are played and paused etc.
Result: Mr Allen told me to see how my website looks on a white background to get a different perspective. Upon changing it I saw how much empty space I had. Mr Allen also mentioned how I should design it in a way that no matter how bad the thumbnail for a video looks it will still look presentable because of the UI design. The discussion with Khalid was very helpful. He showed me his changes to the edit I made. He changed the title sequence, switching the background colour and colour of the text and making the transition simpler. He also added two swerve elements from the convergence logo to around Sharifah Sakinah's name. Without it the title sequence would be too plain so it was a good touch. He commented that I chose the right questions and that I have a good sense of where to cut the clips, however he did make a few more cuts to make the video even more compact for the viewer. Other than that he gave me more editing tips such as organizing files in a project, rendering, naming conventions, etc.
Week 3 | Wednesday, 22/1/20
Task: Today my task is to continue working on the Fama re-design. First thing in the morning was a team meeting with everyone at the office and they mentioned that next week Tuesday will be the idea pitch/presentation to Fama. I need to finish the re-design for both the webite and the web app before then.
Action: I started to re-design the Fama website entirely. I took my current design and research on existing websites similar to YouTube.
Result: Mr Allen suggested to change background colour once again to a light gray and play with different tones of gray throughout the page. He also said to not use coloured text, keep text grey to dark grey. but not 100% black. Be wary of hierarchy and text size. The heading text size shouldn't be too big that it overpowers the other text.
Week 3 | Thursday, 23/1/10
Task: Today's task was to continue where I left off from yesterday. Improve the Fama website design.
Action: I did further research on specific UI elements and again study more references. I was pretty much done with the design besides the footer which I was struggling with. Azmi gave me tips for the footer and he showed me the previous website he had worked on. I then started to work on the second design with and made changes mainly to the featured video, which is now a large video which took up the width of the page like Netflix.
Result: The website design started to come together but Mr Allen suggested that once I was done with it I should make another design to see how much I had improved since the start until now without his guidance.
Week 3 | Friday, 24/1/10
Task: Today's task was the same as yesterday's, finish the design but I set a goal for myself to completely finish the overall design and mockup for the Fama website.
Action: Nas showed me her design for the sub-pages as we had agreed to work together where I did the main page and she did the sub-page. She based her design off my new design. The big design changes included mainly the typeface and adding the playlist feature. This allows users to add videos to a playlist which can be accessed by clicking. We discussed that each subpage needed to be distinct from the other by having its own theme. I suggested each subpage have a different fruit and colour to represent it. Nas designed the theme for one of the subpages while I continued to finish up the overall design. As discussed earlier, Nas wanted the thumbnails of all the categories and subpages visible without having the user to scroll down. She gave me some references of what she meant, so I incorporated that into the website. I showed her and then Nas began designing the thumbnails based on the themes of the subpages.
Result: Mr Allen had to leave early but he told me to upload the final design onto the Google Drive. I stayed back to get everything done. I am expecting to receive feedback tomorrow or maybe even after that.
 |
| Final Design for Web and Mobile Homepage |
Week 3 | Sunday, 26/1/20
Task: I was suddenly tasked by Mr Allen today to provide descriptions of features for the FAMA website and mobile. He gave minor feedback for the website, but mainly asked to describe the features with more detail. He told me to number the features and provide the description for the features.
Action: I looked at my design me and Nas had done and identified and labeled the key features before writing the descriptions. For some features I had to go back to the Adobe XD file and design such as for what it would look like when the user hovers over buttons or what would happen when the user interacts with that feature. I did this first for the webpage, and after that mobile. The features were the same but how the user interacted with them were different because of the nature of mobile screens. After finishing the labeling, descriptions, and diagrams I compiled it into a PDF and uploaded it to the Google Drive.
FAMA Website Design Features
Result: I was told to send it by Monday morning so I will not get any feedback until I get back into the office on Tuesday.
Week 4 | Tuesday, 28/1/20
Task: Was about to do some minor tasks but felt unwell after lunch and went home early.
Week 4 | Wednesday, 28/1/20
Did not go to the office today. Had time to recover.
Week 4 | Thursday, 30/1/20
Task: Today I was shown the website design for a corporate called Shorakah. The client wants a prototype for the website by Friday night. I had to figure out how to get a quick prototype done with what we have already designed. Later the client called asking to make minor design changes. These design changes were being made by Azmi.
Action: While the design changes were being made by Azmi I found out a way to use Adobe XD to make the prototype and easily share with the client with the transition animations. I showed Azmi how it works and told him it was possible to connect all the website pages in Adobe XD and export it to web and maintain all the transitions.
Result: Made decent progress today. I prepared enough to be able to finish it off on Friday.
Week 4 | Friday, 31/1/20
Task: Today's task was to hand in the prototype website by the end of the day. There wasn't a specific time the client wanted it by but there wasn't a lot of time. The client kept asking for changes to the prototype and I made them accordingly.
Action: Though it was somewhat difficult and annoying, I finished connecting all the pages and buttons in Adobe XD. I had Azmi test out on the shared preview. When viewing it in the Adobe XD shared preview where anyone with the link can view, the quality of the the images, and text especially went down drastically. This was a problem I did not foresee, but it makes sense that assets not made in XD such as JPGs rendered from Photoshop will lose quality. There was also some miscommunication with the pages that the client wanted to be a dead link and those that weren't, so I spent even more time making those changes. Eventually Mr Rafiq, who was looking at the preview decided that we should make the quality better somehow as it was not acceptable to send to the client. I suggested to Azmi that we redo all the pages in XD and get the highest quality possible for the prototype website. This required a lot of re rendering of the images such as the diagrams which Azmi did and transferred the files to me. He also sent the webpage without the text so that I could insert all the text in XD, this took a lot of time as it wasn't as simple as copy and paste. Text in Photoshop to XD is not exactly compatible so it took time to replicate the website as close as possible. The client mentioned that they would wait until the end of the day for us to finish it so I didn't waste any time. Before sending to the website After a few more back and forth comments with the client I finally finished the prototype website in high quality.
 |
| Connecting all pages and buttons in Adobe XD |
 |
| Shoraka Website on shared view |
Result: As a result I managed to deliver a presentable product to the client on very short notice. The client took time to reply and then asked for a fully programmed website but I used what I knew to deliver a simpler and alternate solution that could be done in less time. The prototype website can be viewed from this link: Shorakah Prototype Website
Week 5 | Monday, 2/2/20
Task: For today's task I started to develop the website for Shoraka. I had to look for Bootstraps that I could potentially use to replicate the prototype as close as possible. I had to see which parts of a bootstrap I could use and for which section or element of the website.
Action: I started by searching for websites and going through all of the live demos of them. I went though them one by one to ensure to programming and editing of the code will be easier. I also had to worry about the website being reponsive. After finding several potential bootstraps I could use I started working on the homepage of the Shoraka website. I started with the first header/slider which is the white box with heading text and an image behind it.
Result: As I was getting back into using Dreamweaver I didn't get much done. However, I think I've laid out a good foundation for completing the rest of the homepage for tomorrow.
Week 5 | Tuesday, 3/2/20
Task: Today I felt sick and did not go to the office. I continued to work on the homepage at home.
Week 5 | Wednesday, 4/2/20
Task: Still recovering and did not go to the office. Today I watched more tutorials for bootstrap and the grid system that is used for to make the website responsive, so that it can be fully functional on desktop, mobile, or if the webpage is resized.
Week 5 | Thursday, 5/2/20
Task: My task was to continue working on the Shoraka website.
Action: Today I mainly focused on cleaning up the header navigation bar and the section below the header content which was the 4 columns with an image and under it a title and description talking about what Shoraka does. Also above the columns is a another header title 'What Shoraka Does'. I also worked on the footer which is just a line and text. I managed to somewhat complete the homepage by the end of the day.
Result: However I had trouble making the columns be bigger and more spread out. It took a while to get all the columns in the same row in the first place. This made me realize that all bootstraps are edited differently and I have to make changes to certain CSS functions to even make any changes in the first place. It is also difficult to make it fully responsive after making the Shoraka changes, especially elements that I have to make from scratch.
Week 5 | Friday, 6/2/20
Task: Today's task was the same as yesterday's, but I decided to work on the second page which is the 'About Us' page.
Action: I managed to get header section done and started working on the next part. However, today I was struggling a lot with getting the elements and text to go where they had to be.
Result: As done in the prototype, the header text is on the right and the description on the right. To do that on this Bootstrap was very difficult and when I made something somewhat similar it was not fully responsive and off on a mobile preview.
Week 6 | Monday, 9/2/20
Task: Today's task was to continue developing the Shoraka website. Today I continued working on the About Us page.
Action: Today I was really focused on trying to improve the responsiveness of the website. I would constantly resize the web-page to see if the text and elements would resize appropriately. I spent a bit of time trying to understand how to use the grid system effectively and found out about 'breakpoints' which is the minimum or maximum dimensions of the website before the elements change accordingly. This is how Bootstrap makes a responsive website from small devices such as mobile screens to desktop which is 1280x720 pixels and above. I managed to make the heading and paragraph sections responsive by the end of the day. It took a lot of trial and error but the text and elements moved accordingly to how much I resize the webpage. This was a step in the right direction.
 |
| Full desktop width and height |
 |
| Half width of desktop |
 |
| Smallest width possible on desktop (mobile size) |
Result: As I have a better idea of how to edit the Bootstrap effectively I can hopefully do it for the rest of the website which will speed up the development of the website before the due date which is 2 weeks from last week Thursday.
Week 6 | Tuesday, 10/2/20
Task: Today I continued developing the Shoraka website.
Action: Today I continued developing the About Us page. Today I completed 3 more sections. A lot of today was fixing the positioning, size, and alignment of the content. I also had to make sure there weren't any issues with the responsiveness as well. I also spent time fixing the footer as the footer line did not extend across the full width of the page on desktop view but I eventually fixed that as well.
 |
| Desktop view of completed sections |
Result: Overall there is slow yet steady progress of the website. My aim is finish the About Us page by tomorrow and fix the top section/header with the white rectangle.
Week 6 | Wednesday, 11/2/20
Task: Finish up About us page and fix header slider/section.
Action: Today I finished adding the remaining content for the About Us page and fixing minor bugs. I then went on to fix up the header slider with the title infront of a white box. I had issues making it responsive and in the end did what I can. I was told I had to finish the website (excluding bug fixes) by Friday so I decided to prioritize getting all the content on the website. I then started working on the next page which is the Global Resources page.
Results: Good progress for the website today. 3 more pages to do which should be fast considering most of the responsive issues are solved.
Week 6 | Thursday, 12/2/20
Task: Finish developing the remaining Shoraka webpages.
Action: Today I managed to get all the content and pages done, including the Global Resources page, RSJ Capital page, contact us page, and under maintenance page. The RSJ page has a similar format to all the other pages so it was completed quickly. However, the contact page was not and has box forms for the user to fill up the contact details and message. I could not fully replicate what the boxes looked like in the prototype design but I did my best. For the map location for the Shoraka HQ I embedded it from Google Maps.
Results: The website is almost complete. Just need to test and fix minor bugs, find high quality images for each page and the website logo but it should be good for testing on the servers tomorrow.
Week 6 | Friday, 13/2/20
Task: Fix bugs and add placeholder images on Shoraka website.
Action: First I fixed the navbar, including the drop-down icon, changing colour of the drop-down icon on mobile. Next Azmi noticed that the map had no marker, so I figured how to add a map with a marker. Eventually I got it to work by simply copying the html link from Google Maps again. Next I had to the apply a HD version of the Shoraka logo, but upon doing this caused the navbar to have some issues, such as the positioning of the navbar links so I had to adjust the navbar and its responsiveness again. Next I changed the icon on the #scrollup button, which when clicked on will take the user to the top of the page. By default it was a Home icon but I changed it to an arrow up icon. I increased the speed to scroll to top of page, then changed the button shape and icon size. For the final touches I checked for spelling errors and changed the website titles (titles on the tabs of the browser for each page). When I went home I was instructed by Azmi to change all the default bootstraps pictures to the same ones as the prototype. Some of the pictures had a color overlay/underlay with lowered opacity.
Result: Development of the website is almost done. I was able to get it done by Friday when I thought it would take until next week. All that's left is to make sure the mobile version and its responsiveness is functioning as attended.
Week 7 | Monday, 16/2/20
Task: Work on the responsiveness of the mobile version of Shoraka website.
Action: I already learnt how to adjust the content based on the set maximum or minimum width to make the website and the elements resize accordingly to make a responsive mobile version. I started with fixing the alignment and centering the content on the homepage, especially the sliders with the images showing what Shoraka does. Next I worked on the About Us page. I managed to finish the alignments and text resizes and ensuring it looks good on several types of mobile dimensions. For example while viewing the website on the iPhone 5/6/7 Plus, the header text might look fine but on the regular iPhone 5/6/7 the text is too big and will flow out of the of screen, so I had to ensure the content is fixed on all types of mobile screens. I then had to figure out how to make some of the images display well on mobile. I tried the <source> and <srcset> element on html which changes an image when the screen is resized to a certain point. This would allow mobile version to get a different image than the desktop version. However, this did not work and I will test other methods tomorrow.
 |
| Aligning for Shoraka Mobile version |
Week 7 | Tuesday, 17/2/20
Task: Continued working on the Shoraka mobile responsiveness. The client also asked to fix some things and make minor changes by today.
Action: Today I finished making the content responsive on the mobile version of the About Us page. I made sure the headings and images were center aligned on all types of mobile screens and devices. I then did the same thing for the Global Resources mobile version page. Later Azmi told me about the changes the client wanted, which included some spelling errors and text changes. I also had to edit on the of the chart images so I had to make the changes in Photoshop and export it back to the images folder for the html/css. I also managed to get the image change depending on the width of the page to function properly. It took a lot of experimenting with the bootstrap rows, div, and html elements but I finally managed to get the image to change when the browser was resized. All that's left is to make the mobile version of all the images that need the feature. I then worked on getting the #scrollUp button to appear for all mobile versions. Different dimensions need different padding to get the button at the bottom right of the screen. I did this for all the mobile dimensions.
 |
| Scroll Up button feature for mobile |
 |
| Image changes upon resizing width testing |
Result: Finished making the changes the client asked for, fixed major and minor bugs, and solidified how to change an image based on the width of the screen/browser. This will allow me to design images more appropriate and practical for mobile version screens.
Week 7 | Wednesday, 18/2/20
Task: Today I was tasked with adding in a login button to the Shoraka website. It would link to another website by Shoraka where the user can login.
Action: At first I was trying to use the Bootstraps's existing button to use as the login button but had trouble with customizing it and positioning it on the navbar. Then I let Rafiq have a look and he said to not over complicate things and just make it simple like the other navbar buttons. I did so and positioned the login button to the top right and linked it the actual Shoraka login site given by Azmi.
Next I had to redesign the chart images for mobile version. Since I got the reponsiveness to work yesterday all I had to worry about today was ensuring the images are designed for mobile. I did the designs in Photoshop to fit the smaller width of a mobile screen. For now I only did the two chart images on the About Us page. I may have to redesign for the mobile version for other images on the website but Azmi said to wait for what the client has to say about the current changes.
 |
| Chart redesigned for mobile version |
 |
| Mobile vs Web Preview |
Result: Good progress today. Managed to clean the website a bit and make it even more optimized for mobile. Will need to wait for client feedback to make any more drastic changes or feature add-ons such as the login button.
Week 7 | Thursday, 19/2/20
Task: Todays task was to fix bugs for the Shoraka website. I also had to help with making and compiling article webpages for the VM2020 site.
Actions: I started with looking at the Shoraka website which has already been uploaded to a server on Azmi's laptop. He pointed out that the login button could not be seen or would move out of where it should be positioned. It looked fine on my laptop but not on his. I then realized that the content on his page was overall bigger / zoomed in. It was as if the page was zoomed in but I checked it was on 100%. I compared on Mozilla to Chrome and it was the same. It turns out it was a scaling issue, however it was because Azmi's laptops display setting for text was 125% instead of 100%. This made me realize that there are people on this setting and I need to make the website responsive to this. I then tweaked with the CSS of the login button and made use of the float: inherit attribute which makes the login button stay on the right-side of the navbar even when the webpage is resized. There was one more issue I did not manage to fix which is when it the browser width is resize further the navbar elements overlap with the logo and the logo resizing isn't that responsive as well. These are some bugs I will try to fix or at least come up with temporary fixes.
 |
| Login button fixed on the right side of navbar |
 |
| Making VM2020 Article Webpage |
Result: The Shoraka website is almost there. It could already be uploaded to servers for the client and from there I can make small bug fixes. I am actually supposed to finish the website by Friday and I hope they will accept my work.
Week 7 | Friday, 20/2/20
Task: Make the Contact Us page function as it should.
Action: Today I continued to fix the remaning bugs on the Shoraka Wesbite. After that Azmi tasked me with making the contact us page functional, as in users can send inquiries using it and the client themselves (Shoraka) will receive an email of the message for it. I looked at tutorials on how this is done and found that it uses a php document which is dynamically linked to the html. The php calls the form-group elements which is what the user will type in on the website. After trying to get it to work by sending messages to my personal email for testing purposes, I got it to work.
Result: Overall the website is near completion with the contact page functioning.
Action: Today I continued to fix the remaning bugs on the Shoraka Wesbite. After that Azmi tasked me with making the contact us page functional, as in users can send inquiries using it and the client themselves (Shoraka) will receive an email of the message for it. I looked at tutorials on how this is done and found that it uses a php document which is dynamically linked to the html. The php calls the form-group elements which is what the user will type in on the website. After trying to get it to work by sending messages to my personal email for testing purposes, I got it to work.
 |
| Contact Page |
 |
| Testing contact message from the website being sent to my email |
Result: Overall the website is near completion with the contact page functioning.
Week 8 | Monday, 24/2/20
Task: Today I was informed that I do not have to work on the Shoraka website anymore and will be moving on to a new task. I was tasked with Nadia's help to propose and design the UI/UX for a mobile app for CIDB, a construction firm in Malaysia. The app has to be designed for the contractors and workers and what the app does is show information such as status updates, workers under a contractor, project reports, and more.
Action: Myself and Nadia started working on the flowchart/information architecture. We were not given much information aside from an example so we use that as a base for the CIDB apps content and features. At the same time we started wireframing. While we were doing that Fikri stopped us and told us about the 'epicentre' of the app, which means at its core, what is the main purpose of the app. For CIDB, that was to show the user information. The other components is built around the epicentre. He also said that without the 90% of planning and research the remaining 10% will also be bad. Allen then came by and told to put ourselves in the shoes of the user rather than seeing it as designing the app. That way we can really see what a user would want or not want in the app. So for today, we focused on fleshing out the content of the app based on research for the UX/UI components. Me and Nadia looked at existing designs and tried to justify why these certain designs and components should be used for the app.
 |
| Flow Chart of app |
 |
| Rough Page designs |
 |
| Wireframing in XD |
Results: We started out with very little information about what the app should be and have, but we are getting a better idea the more we research. The proposal has to be done by Wednesday so there isn't much time.
Week 8 | Tuesday, 25/2/20
Task: Today I was tasked with continuing with the CLAB UX/UI design proposal. By today me and Nadia should finalize the flow and structure of the app and continue with the wire-framing and final design.
Action: Today we looked at more references for the app components after finalizing the flow of the app. We were struggling with how the worker status report page was going to be efficient and looks good for the user. We also kept in mind who our target user was: contractors and workers in the construction industry. Me and Nadia worked on designing the list of workers that the user can search for. Based on the design we made for that I then began to design the the Project Report page. I was figuring out how wold the user want the project to be organized besides in a list. Considering that a contractor may be working on many different projects at a time or would like to see past projects, I designed it so that the projects can be filtered by the starting date and ending date of the project. As I worked on the Project Report page Fikri told us to show we have done so far. I explained the flow of the app and the pages we have designed so far. He told us we were wrongly briefed and that there is no need for a Project Report page. He told us that the app was much simpler and that the main function is to check the status of a worker's permit. He explained how the permit works and it made the direction of how to design a lot clearer for me and Nadia. We then began to rework the flowchart once again. We thought about if we wanted a footer for the user to easily navigate around the page or have it in a drop-down menu. In the end with we decided that it would be much easier with a footer with an icon and text for each section.
 |
| Status Report and Project Report design. |
Result: Things were made a lot more clearer today but we are short on time. We don't have the luxury of taking our time on the designs as we still haven't sorted out the flow, but it's getting there and it's more clear what kind of app we have to design and for who. We were also informed that the app is not for CIDB but for CLAB, another company in the construction industry.
Week 8 | Wednesday, 26/2/20
Task: By today I need to have the prototype for the app done and the slides explaining the flow and features of the app need to be done as well.
Action: Today we basically sorted out the underlying issues we had with the flow of the app between the Contractor version and the worker version of the app. We were worried about what the differences between the two versions would be and what would the user see when logged in in both versions of the app. While we were discussing that, Nas came in to help and give her input on the designs and helped fine-tune it. For the contractor and worker issue I proposed that before the login page the user can simply choose whether they are a contractor or a worker. Designing this page took some time but after some iteration we came up with this:
 |
| Contractor or Worker screen |
Meanwhile we also finalized the footer design, and decided that we needed a profile page for the user themselves and lastly we replaced the settings page with an Information page. We realized that there really is no need for a settings page as we made the profile page editable and any other potential options such as 'languages' was too redundant. The only option that seemed useful to the user was the Help/Contact/Information page so we made that the last button on the footer bar.
 |
| Footer design |
The page that went through the most iteration was the worker list on the homepage and status report page. We realized that there hundreds to thousands of workers and all of them are in different departments. My initial idea was having a filter/sorting bar for the department. Then Nas pointed out that what the user really wants to see if the permit of that worker is active or not. That made me think about the epicentre of the app, which was to check a workers permit status. We then decided to add a list for the departments on the homepage for the user to select which will popup the screen for the list of worker in that department. Beside the list of names will be the current status of that workers permit (active or inactive) in green and red respectively. This will make it simple for the user to see which workers permits are inactive or not. To make this even more efficient for the user we added 2 buttons which will auto sort the list to active and inactive permits. We then let Afsah test out the prototype but she didn't think to click on the filter buttons. This made me notice that the filter buttons don't appear clickable enough. After further iterations and help from Allen we came up with this design for the worker list:
Worker list sorted out by active and inactive permits.
Lastly we had to finalize the status report screen and how the user will switch between the three 'tabs' (Permit Report / Salary Report / Contact Details) besides swiping right and left, there is no indicator or initiative for the user to see the other two tabs. Nas came up with the idea to have a popup of the list of tabs when the user clicks on the drop-down arrow or heading. The background will be blurred and user can tap on X to close the popup. Allen then came in and said it's not necessary and a simple dropdown list is enough. It took a bit but I managed to design a contrasting yet easy to tap dropdown:
Status Report Tab drop-down menu
Result: I managed to finish the prototype and Nadia managed to finish off the slides as well. I would like to have done more user testing and possibly make further improvements but we ran out of time. Overall in the time we had I we did a lot from scratch and little information to go with but Allen told me good job.
Week 8 | Thursday, 27/2/20
Task: Today I had to make sure there were no issues with the CLAB mobile app prototype and make the xd prototype public.
Action: There weren't many issues with the CLAB prototype other some alignment and position fixes that were made. After that I had no task given to me so I decided to work on my internship report which is due next week. I started to sketch out what I want the book cover to look like. Allen gave me a tip and told me to look at stock images as you can get some good composition ideas. I used this method and used an image and roughly traced it in AI to use as a graphic in the book cover. The concept is a guy on a laptop working and there is a light ray that shines from the laptop screen.
Result: Will be waiting for feedback for the CLAB prototype as there will surely be changes to be made. So far everyone has said me and Nadia have done a good job.
Week 8 | Friday, 28/2/20
Task: Today I helped Afsah send messages to the Instragram post users that we used for the experential VM2020 page design. The message was asking for permission to use the posts for these personal account posts
Action: I logged in to the Codium Lab Instagram and sent out messages to the photos posted by the chosen Instragram posts for the experential page. I had to look for the post we used in our design and message the accounts asking permission to use these specific posts.
Result: Still waiting on feedback for the CLAB mobile app. For now I am just helping out and working on my internship report. This is the last report before submission on the following Monday.
REFLECTIONS
Week 1
After receiving the task from Mr Allen I was a little confused and nervous. Even though I understood the task I was still confused regarding what the client was really asking for. This made me try different designs and solutions only to end up even more confused.
Tuesday, 7/1/20
Today seemed more productive than yesterday. The nerves from the first day was gone and I knew which direction I had to go with my designs and proceeded. It was tedious to collect the photographs and then edit them which I have never done before, but eventually I got the hang of it. Overall I enjoyed working today and getting a new task related to web design got me excited for tomorrow.
Wednesday, 8/1/20
Today I had trouble gathering my thoughts and ideas. As my Malay isn't the greatest and the client is a Malaysian government-owned organization, most of their content was as well. I couldn't get as much as I wanted to from their website and YouTube videos, but I got enough. I didn't have access to the whole module brief for the Fama website so I was anxious I would design something that wasn't inline with the clients' needs. However, after seeing what a designer from Pivot did, I gained a little more confidence on how I should handle this task.
Thursday, 9/1/20
Today was a somewhat productive day. While wire-framing I realized issues with the design and things I need to consider. However I did make progress and will help me design more smoothly tomorrow.
Friday, 10/1/20
Today I got a lot of work done, but was still unable to finish everything before the day ended. Web design is a tedious process and I don't have as much experience to conduct it as efficiently as I want. I was surprised to see the Pivot designer go straight into the final design, however she did a lot more research than me and it surely made it easier to have a picture of the final design without wire-framing.
Saturday, 11/1/20
I didn't really want to do work over my first weekend off work, but I had the responsibility to finish off the task at hand which will be sent to the client. However, it was somewhat enjoyable to do the mobile design and I would like to work on another project such as this one again.
Week 2
Today was a little more chill compared to last week, which seemed busy everyday. There isn't much work to do at the moment in terms of UX/UI design. However, I am grateful I got to do a job related to UI/UX again.
Tuesday, 14/1/20
Today was a productive yet challenging day. I don't often design posters or key visual art but I enjoy doing it so it was alright. I didn't know what my key visual was going to look like at all so I just tried different things that I thought might look unique and appealing. It may be used for the official event and website and that is exciting.
Wednesday, 15/1/20
The whole day was spent on the one task, which was to rework the key visual. It was a lot of work to make it look like not bad photoshop. I wish I could have finished the task earlier and help my supervisor with the other tasks.
Thursday, 16/1/20
It was cool to help test the website that I've seen the programmers work so hard on. It was also enjoyable to test on a browser that is known to not be very compatible with the website. I was somewhat nervous to be editing a video as I haven't done it in a long time but once I got advise from Khalid it made many things a lot more clearer.
Week 3
Today was very tiring as we had to walk around a lot to find the restaurants and take photographs of the food. However, it was a lot of fun and we got to bond a lot with Azmi, who works for Pivot. He was there to finish all the food which we had ordered for the photoshoot. It was also fun to take the photographs as I don't really do it too often and learning these new skills are insightful.
Tuesday, 21/1/20
I found today to be very eye-opening on how much I need to work on design skills and design thinking. It became very frustrating throughout the day not being able to make a good design but it only made me realize I can only improve and talking to Mr Allen and Khalid today helped me a lot.
Wednesday, 22/1/20
Today was difficult. I became overwhelmed with which design I should replicate and take inspiration from and apply to my own design. I was worried it wouldn't look right and not be suitable for Fama.
Thursday, 23/1/10
Today's progress was better than yesterday's and I was able to complete the first design and do some of the next. I was able to apply what I learnt in the past few days into
Friday, 24/1/10
Today was very tiring because I had to stay in later to finish my design. I worked with Nas on this project it was productive for me to exchange creative ideas. Overall I feel this re-design project was the most taxing yet the most rewarding project.
Sunday, 26/1/10
Suddenly receiving a message to write up the descriptions wasn't what I wanted to see on a Sunday, but it makes sense to finish the job I started, even though Mr Allen did mention it directly during the week, I've written the descriptions and made slides before for the previous design so I should have taken the initiative to produce the slides for this new design as well. Nonetheless, I was happy with the work I had produced today and throughout the week.
Week 4
Today I wasn't feeling too well. Was about to get worked assign to me but felt ill. Mr Allen sent me back early at 4:30 but I got to talk to him personally during the car ride and he told a lot about his job, the company, and the industry.
Wednesday, 29/1/20
Was advised to rest up today and recover.
Thursday, 30/1/20
Today was all over the place as our client asked for something impossible in the short amount of time they wanted the website done. I was able to find a solution and worked together with Azmi on producing the prototype website. Overall a hectic day.
Friday, 31/1/20
Today was even more hectic than yesterday, to the point that I had to stay in the office to finish up the prototype until midnight and get home even late. It was unfortunate that the Adobe XD shared preview made everything blurry but it definitely wasn't presentable to send to the client. It was tedious,
Week 5
Today was relatively calm. I knew what I had to do but I wasn't sure I could pull it off, even though I do have some knowledge and experience I hope I am able to develop this website properly and as close to the prototype as possible.
Tuesday, 4/2/20
On the way home from work yesterday I started to feel very sick and tired, and that made me more uneasy especially with the whole Corona virus situation. I decided to take today off as I felt I could not get to the office without feeling even worse.
Wednesday, 5/2/20
Today my body felt very tired so I continued to get some rest and work from home. I hope this did not affect the progress on developing the website too much but I managed to learn about how to edit bootstraps in the past 2 days.
Thursday, 6/2/20
Getting back to work felt weird but I did miss the company of my friends and coworkers. I got quite a bit of work done today and felt a lot better today than the past two days.
Friday, 7/2/20
Managed to get some work done but overall was very sleepy. I went out of the office so I could focus more on the programming as it requires me to have a lot of focus and I thought a change of location would get that going. I managed to think a little more clearly and had more ideas on how to solve my current programming issues.
Week 6
Today I was very determined to get the website responsive. Reading up on how the grid system in Bootstrap works helped a lot and made me realize why certain things weren't working the way they should. I was very happy to get a section of the website almost fully responsive.
Tuesday, 12/2/20
Today was pretty smooth in terms of issues coming up in the programming. I wanted to finish the About Us page by today but that didn't happened because I was so immersed in making sure everything was pixel perfect with the page content. I think it is easier to make sure these small issues are fixed because later on it will become more difficult to fix as there is more code.
Wednesday, 13/2/20
Nothing special happened today. Good progress with the website and even though I have 3 pages left so the bootstrap should be easy to edit.
Thursday, 14/2/20
The website is almost complete. Just need to test and fix minor bugs, find high quality images for each page and the website logo but it should be good for testing on the servers tomorrow.
Friday, 15/2/20
Today was mainly cleaning up the website, fixing major and minor bug fixes. Overall I'm happy to be almost done with the website and hopefully move on to something different for my next task. Though it is not finished and will probably not be ready for the client until mid next week or towards the end of next wee.
Week 7
Monday, 17/2/20
Today was a normal day, and I managed to get work done. All my focus is going into making the mobile version responsive and fixing bugs.
Tuesday, 18/2/20
Bad start to my day, lost my wireless ear-pods case and very down because of it. However, a lot of bugs were fixed today and issues resolved. I thought it wouldn't work out but I persisted and it worked out.
Wednesday, 19/2/20
Good progress. The website is really coming together. As I wait for what the client feedback again I will continue touching up here and there as almost all of the known bugs have been resolved.
Thursday, 20/2/20
Today was pretty much helping my other intern friends with the VM article pages. Other than that I managed to figure out the root to some bugs and issues with the Shoraka website which have been mostly resolved. Overall today felt like the slowest day compared to the other days this week.
Friday, 21/2/20
Today I was sort of given a task and left on my own to do it as Azmi was out most of the day. I spent my time learning something new and out of my comfort zone, which is actual programming that involves a sever. In the end I managed to get it to work so I am happy for that.
Week 8
Monday, 24/2/20
I was surprised to be told that I don't have to work on Shoraka anymore, but it is pretty much complete and should be easy for Azmi to pick it up and make neceassry changes and ready for the client. After doing programming for 3 weeks, it is nice to finally get a design task that on the surface seems simple but because we are lacking in information of what the client wants this task became a lot more challenging.
Tuesday, 25/2/20
For a lot of today me and Nadia were basing and assuming what the app should have and how it flows based on the reference images of the web version of the CLAB contractor/worker app. What Fikri told us about the epicentre made things a lot clearer and how we should design our app.
Wednesday, 26/2/20
As today was the due day for the CLAB prototype and proposal I was taking my time to not overlook any bad designing but also not waste any time. I got a lot of help from Nas and Allen which made the whole process a lot smoother, I also learnt a lot from them such as what to think about when designing an app and how to look up references and apply them to my own design.
Thursday, 27/2/20
After the crazy rush and working overtime yesterday today was chill and I had a lot of time to think about how I want to design my internship report which was fun.
Friday, 28/2/20
In terms of difficulty of work today was relatively easy going. It was sort of hectic messaging the Instagram accounts as I had to find 1 specific post among the hundreds to thousands of photos they had.
I was surprised to be told that I don't have to work on Shoraka anymore, but it is pretty much complete and should be easy for Azmi to pick it up and make neceassry changes and ready for the client. After doing programming for 3 weeks, it is nice to finally get a design task that on the surface seems simple but because we are lacking in information of what the client wants this task became a lot more challenging.
Tuesday, 25/2/20
For a lot of today me and Nadia were basing and assuming what the app should have and how it flows based on the reference images of the web version of the CLAB contractor/worker app. What Fikri told us about the epicentre made things a lot clearer and how we should design our app.
Wednesday, 26/2/20
As today was the due day for the CLAB prototype and proposal I was taking my time to not overlook any bad designing but also not waste any time. I got a lot of help from Nas and Allen which made the whole process a lot smoother, I also learnt a lot from them such as what to think about when designing an app and how to look up references and apply them to my own design.
Thursday, 27/2/20
After the crazy rush and working overtime yesterday today was chill and I had a lot of time to think about how I want to design my internship report which was fun.
Friday, 28/2/20
In terms of difficulty of work today was relatively easy going. It was sort of hectic messaging the Instagram accounts as I had to find 1 specific post among the hundreds to thousands of photos they had.
Comments
Post a Comment