UX DESIGN
(Week 1- Week 14) 29.03.2022 - 02.07.2022
Hussain Waheed (0344802)
Bachelor of Design (Hons) in Creative Media
UX Design: Compilation and Reflection
INSTRUCTIONS:
Figure 1.0: Module Informaton Booklet (MIB) . PDF
Task 1: Infographics
For the first task, we were instructed to create infographics of a given set of data. Below is the table of data that we had to create infographics for.
Figure 1.1: Data sheets . JPG
Here is the 2 infographics we designed for the data.Figure 1.2: Infographic designs . PDF
Task 2: Web design tools
For task 2, we were told to research and come up with a presentation of different tools used in web designing. Below is the research presentation:
Figure 1.3: Web design tools presentation . PDF
Task 3: WebsIte Analysis (MyCEB)
Task 3 is based on the client we are to work with. Our client is MyCEB and we were required to do a background analysis to understand the brand and their website before doing the following tasks. Below is the presentation of our analysis:
Figure 1.4: MyCEB Website analysis presentation. PDF
Task 4: Developing Wireframe
For the 4th task, we were shared a page from the MyCEB website to be redesigned by us. Based on our analysis, we redesigned the layout, header, footer and all the elements while keeping the style consistent. We basically modernised and simplified the old design and made it more aesthetic and consistent. Below is the first attempt.
Figure 1.5: MyCEB Website redesign first attempt. JPG
Figure 1.6: Website redesign presentation. PDF
When we showed the design to codium and Mr.Asrizal, we were given feedback that the design is too similar to the original and that they were looking for a completely new design. We were initially keeping it consistent because that was what we thought the instructions were. There was a misunderstanding from our group that the instructions were to renew the design rather than change it completely.
We asked for a resubmission and we were given a second chance. So we completely threw the old design out and changed everything from header to foother. I tried a gradient styled layout so that images fade to body colour from where texts can follow on and so forth. We also changed the colour palette and used imagery as the main visual elements without any colours. We used colourful imagery to make the design pop rather than colourful elements. For the typography, Acumin variable concept was the type family used in grey colour.
Here is the second and final attempt:
Figure 1.7: MyCEB Website redesign final JPG
Below is the pdf of the final design:
Figure 1.8: MyCEB Website redesign final PDF
Task 5: Imagery
For this task, each group were given a set of pages to find imagery for. The imagery has to be related to that specific page and look relatable to the ideas and content.
We got out images from iStock as instructed. The set of pages our group had were under Business events. Here are the images we used:
Conventions:
Figure 1.9: Images for conventions - JPG
Exhibitions:
Figure 2.0: Images for Exhibitions - JPG
Figure 2.1: Images for International sporting events - JPG
Corporate meetings:
Figure 2.2: Images for Corporate meetings - JPG
Legacy and sustainability:
Figure 2.3: Images for legacy and sustainability - JPG
For the final task, each group were given a set of desktop web pages of MyCEB wireframes to be redesigned for mobile responsive sites. We were suggested to use Adobe XD to make new layouts for iPhone 13 dimensions and apply the elements on the new layout.
Here are the desktop site wireframe links provided to us:
1. Contact Us:
https://xd.adobe.com/view/0ad81024-e848-4461-8bef-3290d4947da0-5f8b/
2. Destinations:
https://xd.adobe.com/view/8301143e-f155-422b-832c-9983d2c28e48-d652/
3. Happening Now:
https://xd.adobe.com/view/448777c7-0b50-4d8a-93a6-ff705056ba1c-11d4/
4. Why Malaysia:
https://xd.adobe.com/view/2cb1bc69-34b5-406e-aca9-9fdf17965659-79e2/
First we did some research on how to change desktop sites to responsive sites and the differences in each.
Figure 2.4: Research on responsive design - JPG
Figure 2.5: Redesign progress on Adobe XD - JPG
We applied the same layout style into every element as it was the exact same page that we were redesigning.
After doing the first page (Contact us) we used the same header and footer to design the other 3 pages. Below are the wireframe links to the final redesigns of the 4 pages:
1. Contact Us:
Figure 2.7: Contact us page design mockup - JPG
https://xd.adobe.com/view/b85bd0cf-a243-4f5e-a412-68da216514d3-ed08/
2. Destinations:
Figure 2.8: Destinations page design mockup - JPG
https://xd.adobe.com/view/0597e5ee-8102-47e0-b5fe-0c505dac2be3-50c4/
3. Happening Now:
Figure 2.9: Happening now page design mockup - JPG
https://xd.adobe.com/view/d343a68d-d2ad-42d9-b5e9-bfde6b996597-8610/
4. Why Malaysia:
Figure 3.0: Why Malaysia page design mockup - JPG
https://xd.adobe.com/view/dcdc9702-ab12-49f7-8d8e-f59f6f07c4b2-898f/
Final presentation:
Figure 3.1: Final presentation - PDF
REFLECTION
EXPERIENCE: UX Design was an interesting and insightful module. I learned a lot regarding web design and client related work. But the module was a bit inconsistent due to changes and scheduling from the client side. There were some weeks without any update from the client side so we just had to wait and it was a bit confusing at times. Even the tasks kept going from very basic to complex design work. But overall it was a good experience in terms of the things we learned through the tasks as well as dealing with cliental schedules.
OBSERVATIONS: I faced some issues as was the only group member doing Graphic design. Since most of the work were design based, I had to personally do most of the group work which was problematic in terms of teamwork and group effort. But we all participated and managed to do all the given tasks on time. I would like to thank Mr.Asrizal and Codium team for their contribution and help throughout the semester. They were very helpful and supportive, and gave very good feedback on the tasks that we did. I learned a lot working on the tasks with Codium team and Mr.Asrizal.
FINDINGS: I found that client based work are not very linear and takes a lot of patience and tolerance to make both parties happy. Phases of minor changes and time management could go on for so long or get so urgent since it is very unpredictable. It adds to the pressure as well when things get so unpredictable. But to be professional is to always try to tolerate such issues and manage to work for the best interests of both sides.
Comments
Post a Comment