UX DESIGN

See Zi Yi (0340094)

31/03/22 - 07/07/22

UX Design

Compilation

---

INSTRUMENTS

---

Introduction

In this module, in a group of 3, we were tasked to revamp the current website of MyCEB, a central hub to assist meeting and event planners to bid and stage international business events in Malaysia, together with a design agency named Codium Lab. 

Website Analysis

The first task we were briefed on was to analyze the pros and cons of the current MyCEB's website. We as Group 3 drafted some keypoints below.

Website Analysis

Mobile Version Analysis

With the key points above, we created a Google Slides for it as below.

We were also given a few websites as references for analysis:

GCB

Vienna Convention Bureau

London Convention Bureau

Below is our analysis of these websites:

Competitor Analysis

Infographic Design Challenge

We were then presented with an infographic design challenge where we had to create two pages of infographic design from a PDF given as shown below.

Our group was assigned to work on pages 7 and 8.

Then, we found some references below from Pinterest.

References

We also drafted out the way we visualized it can be.

Draft

Below are the final outcomes.

Infographic 1

Infographic 2

Infographic 3

Feedback: We were advised by Codium Lab to have our infographic on a white background for higher readability.

Website Design Tools

While waiting for updates from Codium Lab, we were assigned to work on a task to research for website design tools that might be beneficial for our website revamp assignment.

Here is our draft.

Draft 1

Draft 2

Draft 3

Draft 4

Here is our final outcome.

Desktop Website Redesign 

Then, we were assigned to work on a desktop website redesign of the homepage of MyCEB. Here is the websites developed by Codium Lab.

Catalogue Style:

Exploratory Style:

Design Brief:

With these information, we came up with a few wireframes:

Wireframes

Refined Wireframes

Here are our references:

Reference 1

Reference 2

With the above information, we came up with the designs below:

Attempt 1

Attempt 2

Attempt 3

Attempt 4

We submitted Attempt 5 below as our final design.

Attempt 5

Below is our PPT Slides on the design details and rationale.

However, Codium Lab suggested us to reduce the usage of yellow colour as our background colour. Hence, we attempted more designs as seen below.

Attempt 6

Attempt 7

Attempt 8

At the end, we submitted Attempt 6 as our final design.

Attempt 6 (Final Design)

Picture Sourcing

Picture sourcing based on relevant webpages is also part of our assignment. We sourced stock images from iStock and below are our work. 

Tasks

Task Delegation among Teammates

Results

Desktop Redesign

To begin with this task, we are assigned to pick suitable header images for two sites of MyCEB.

Task Brief

Design References from Codium Lab

 Below are their wireframes in Adobe XD. 

One Stop Bid Centre

MyCEB Initiatives & Support

One Stop Bid Centre Attempt 1

MyCEB Initiatives & Support Attempt 1

One Stop Bid Centre Final Design

MyCEB Initiatives & Support Final Design

Mobile Website Redesign 

Our last task would be to convert the desktop website design to mobile website design without changing too much of the designs while suiting the interface of the website.

Page 1 (Desktop)

Page 1 (Mobile)

Page 2 (Desktop)

Page 2 (Mobile)

Page 3 (Desktop)

Page 3 (Mobile)

Page 4 (Desktop)

Page 4 (Mobile)

Lastly, we compile everything in the Google Slides below.

We were given feedback that our work is nicely and neatly done. The only amendment we should make is that the images in the first webpage "Convention" should be enlarged for a better viewing experience on phone. Below is the updated webpage.

Page 4 (Updated)

REFLECTION

Experience

It was interesting to work together with a real-life design agency for a university module as it exposes us to the working world. It was far more complicated than we thought as the agency took a long time to confirm certain decisions with the clients. The agency was open to new ideas and always welcome feedback from us students too. However, it is better for us students to get an idea of the working life right now before we graduate. Hence, this definitely is an eye-opener to everyone.

Observations

I observed myself applying a lot of my typography knowledge in this module as UX Design requires a lot of details in layout design, spacing, and many other graphic design aspects. My design sense has also improved as time goes by as compared to my first semester.

Findings

I find this module being more complicated than the rest as we always have to wait for the agency to confirm certain details before we can execute any tasks. It's also an eye-opener to see how meticulous UX Design can be as many designs will always go back and forth just to get a "yes" from the clients.