Labels

UX Design - Projects Compilation

  




Week 1 - Week 14 (29/03/22 - xx/xx/22)
Ng Mei Ying (0340563)
GCD 62304 / Ux Design

Task 1: - Exercises & Group Presentation (20% Group)
Task 2: - User Journey Map (20% Group)
Task 3: - Design Proposal (20% Individual)
Task 4: - Prototype (40% Group)


INSTRUCTIONS 



📌Exercises: 


 W1  Client Website Analysis (MyCEB) 


Our lecturer Mr Asrizal briefed us on the module outline and also some basic understanding of Ux Design. All students will get a chance to work on an actual client's project hand in hand with the agency studio. Besides, Mr Asrizal also mentioned that the student needs to get themselves familiar with the Ux Design professional terms and prepare for the project. Those students without any prior knowledge regarding Ux Design will be facing a steeper learning curve during the classes.

My group members including Zi Yi and Ming Fen started to work on the MyCED website analysis. MyCEB is a 


Extra Reading:



 W2  Infographic Design Challenge 

Today's class is held in hybrid mode, Mr Asrizal briefed us on the MyCEB website report provided by the agency studio (Codium Lab Sdn Bhd) and conducted the first lecture regarding the purpose of creating a user journey map. After the briefing session, the agency studio proposed a design challenge activity through a zoom meeting, students were required to create a simple infographic for the chosen pages from the client's website report. The design challenge is aimed to allow the agency studio to know about the student's current design ability and it's easier for them to guide us in the upcoming activity.

To start with the design task, my teammates and I read through the chosen report pages and found out that the main content of the pages involves a large number of percentage data together with the long site hierarchy name. We came out with the first idea of using a sitemap diagram to simplify the data. Due to certain design considerations, we ended up using a bar chart after creating a rough design sketch. I created a design template using adobe illustrator and discuss the design solution together with my teammate. I shared the file with my teammates and we continued to work on the separate pages after we all agree on the design. Together, we've come out with three pages of infographic design pages.

Page 7 and 8 from the website report are chosen to transform into infographic design.

The design visual reference

The final infographic design outcome

 # Consultation Note:  Mr Asrizal pointed out that students should look into the simplicity and efficiency of visual data summary to avoid any unnecessary information for the infographic design.

 # Reflection:  I found that the efficiency brought by a physical class had largely benefited my group task as I could communicate with my teammates effectively when compared with an online meeting. In the meantime, the biggest challenge while executing the group task was to have all teammates working on one same Adobe working file. 



 W3  Website Analysis Presentation at Codium Lab 

This week, students will be paying a visit to Codium Lab during class time and students will be going to present their MyCEB website analysis. My teammates and I continue to work on the final website analysis as well as the slide preparation before the class activity. On Thursday at 12pm, students arrived at Codium Lab Studio for the scheduled class activity and Creative Director Mr Allen was introduced to be the main speaker. 

Regarding the first studio activity, students were required to present the website analysis slide and Mr Allen will provide students with constructive feedback. Moving on, Mr Allen conducts a sharing session on how the studio analyzes the website, creating a sitemap using excel as well as the Figma prototype. The studio had provided two different website design styles for the client to choose from based on the design reference chosen by the client. The website prototype design options include the magazine website style and the catalogue website style. Last but not least, Mr Allen also offered students a studio tour to have a look around the workplace. 

There will be nothing much to do at the moment as the studio is waiting for the client's confirmation on the desired website design. Students will be assigned to create the website sub-page design using Figma once the client had decided on the final website design style.

Reference Website Analysis

MyCEB Background Case Study

MyCEB PC Website Analysis

MyCEB Mobile Website Analysis


 # Consultation Note:  (Specific) The studio creative director mentioned that the presentation was good and it covered most of the important facts of the website analysis. On the other hand, the creative director also said that the culture of Malaysia should be the main unique selling point of the website design to attract oversea investors to invest in Malaysia's travelling sector.

 # Reflection:  I personally think that having a learning activity outside the classroom was providing an engaging learning experience. This activity allows us to get real-world exposure to the website design industry. Students are able to take a look at the studio's workflow on the client's website redesign.



 W4 - W5  MyCEB Landing Page Redesign 

This week, Creative Director Mr Allen from Codium Lab briefed us about the latest update of the website design. Mr Allen mentioned that according to the latest meeting with the client, the client preferred to combine two website design styles (which refers to the exploratory style & catalogue style) into one single style. On the other hand, the client also requested to have a professional image which could well portray a sense of business & intrigue at the same time (which Mr Allen mentioned was the hardest part to do). After the briefing session, students are tasked to redesign a new website mock-up and submit it by next Monday 12pm using the design guidelines and design reference provided. 

Website Design Reference by Codium Lab

Figma Prototype & Wireframe by Codium Lab

New website design brief by Codium Lab

Weekly to do list

Website design References

Content Image Collection

Wireframe Design (by Group 3)

Finalised website design wireframe

Website Prototype Wireframe

Website prototype design (colour design)

Website Prototype Design (colour design 01)

Website Prototype Design (colour design 02)

Website Prototype Design (colour design final)

 # Consultation Note:  Mr Allen: The colour blocking needs more options. Try to avoid using too much yellow.



 W7 - W8  UX Design & Tools 
 
During the class this week, our lecturer updated us about the current working progression of the Codium Lab on the MyCEB homepage design. The Codium Lab had done the website homepage redesign and the team was arranging the next meeting with the client to get the client's feedback on the homepage design.  In the meantime, our lecturer conducted a short lecture session regarding the UX Animation Design Talk held this week. Subsequently, our lecturer assigned a new task for the student which was to do simple research on the third parties tools that could be utilised by the Ux designer to build the website. 

Website-based tool for Prototype & Wireframe (done by Mei Ying)

Website-based tool for Animated Gif (done by Ming Fen)

Website-based tool for Webpage Icons (done by Zi Yi)




 W9 - W10  MyCEB Hero Images Research 
  
During the meeting with the Codium Lab, Mr Allen mentioned that the landing page design had been approved by the client. The client preferred a parallax website design with a more business feel. The Codium Lab studio had completed the wireframe and the studio was working on the back-end website is programming. In the meantime, while waiting for the technical team to complete the programming work, students are tasked to search and collect hero images from Adobe istock for each of the website sections.  The website content copywriting, the wireframe, as well as the Adobe member account, would be provided by the website.

After the technical team had done the site programming, the lecturer will arrange a tutorial session to guide students on how to insert the content and images into the website program. Students were free to provide feedback and propose new ideas if necessary. Students needed to update the spreadsheet progression deck once they had done the task.

To start with the task given, my teammates conducted a short meeting on the task distribution for the image research. Once the tasks were well distributed, my teammates proceeded to work on our task before the deadline by week 10.

Progression Desk by Codium Lab

Hero image collection folder for different webpage

Press Release Hero Image

Newsletter Hero Image

Success Stories Hero Image



 W11 - W12  MyCEB Conceptual Website Editing 

This week, students were tasked to choose and embed suitable images as the website hero images. There were two web pages assigned for students which included the MyCEB initiative & support and MyCEB One-Stop Bid Centre.
            
MyCEB Initiative & Support / Website Wireframe (By Codium Lab)

MyCEB Initiative & Support / Website Design V1 (By Group 3)

MyCEB Initiative & Support / Website Final Design  (By Group 3)

MyCEB One-Stop Bid Centre / Website Wireframe (By Codium Lab)

MyCEB One-Stop Bid Centre / Website Design V1 (By Group 3)

MyCEB One-Stop Bid Centre / Website Final Design (By Group 3)





 W13 - W14  MyCEB Conceptual Dynamic Mobile Website 

After completing the previous project, our next task was to create a dynamic mobile website using Adobe XD. The mobile website design had to refer to the original Pc website design.

MyCEB Business Event / PC Version (Codium Lab)

MyCEB Business Event / Mobile Version (By Group 3)

MyCEB Event / PC Version (Codium Lab)

MyCEB Event / Mobile Version (By Group 3)

MyCEB Initiative & Support / PC Version (Codium Lab)

MyCEB Initiative & Support / Mobile Version (By Group 3)

MyCEB One-Stop Bid Centre / PC Version (Codium Lab)

MyCEB One-Stop Bid Centre / Mobile Version (By Group 3)






 W15  MyCEB Project Final Presentation 
                 

 # Consultation Note:  Our lecturer Mr Asrizal, Mr Allen and the rest of the workers from Codium Lab mentioned that the mobile website design was nicely done. Mr Allen especially liked the application of design thinking that considers the user experience throughout the mobile website. The minor improvement was ensuring the image on each section was large enough. Overall is well done.







Labels:

Comments

Post a Comment

👇👇👇 Check out more 👇👇👇