UX Design / Task 1

21/04/25 - 05/05/2025  / Week 1 - Week 3
Iman binti Kamarudin / 0364014
UX Design / Bachelors of Design (Hons) in Creative Media

Task 1

---

---

LECTURE

Week 1

In week 1, we had an ice breaker where we all introduced ourselves. Afterwards, Dr. Wong went over some references that could help us understand the module further. Then, we quickly went over the MIB and expectations for this module and had our first lecture.

UI vs UX vs CX

UI consists of visual design, colors, typography, layouts, graphic design.

UX consists of interaction design, wireframes, prototypes, information architecture, user research and scenarios. Usability is the core of User Experience.

CX consists of all interactions across all the touchpoints of a customer's journey and relationship with your brand.

User Centered Design

1. Requirement

2. Design

3. Prototype

4. Evaluation

Week 2

Double Diamond Design Process

1. Discover / Diverge

2. Define / Converge

3. Develop / Diverge

4. Deliver / Converge

UX starts with people, know who they are.

Characteristics: Nationality, educational background, behavioural patterns, attitude towards technology/products

System Use:

Novice: prompted, constrained, clear

Expert: flexibility, access/power

Casual: short cuts

Frequent: clear instructions, e.g menu paths

Capability of Users

Humans vary in many dimension

- Size of hands may affect the size and positioning of input buttons

- Motor abilities may affect the suitability of certain input and output devices

- Height if designing a physical kiosk

- Strength / a child's toy requires little strength to operate, greater strength to change batteries

- Disabilities (eg. sight, hearing, dexterity)

Mental Model

"An explanation of someone's thought process about how something works in the real world"

User Profiling

3 Categories of Users

Primary: those who are actually using the artifact

Secondary: those who will occasionally use the artifact or those who use it through intermediary

Tertiary: persons who will be affected by the use of the artifact or make decisions about its purchase

User Interview

---

INSTRUCTIONS

TASK 1

- Select a mobile application or website.

- Analyse its usability, accessibility, visual design, information architecture, and user feedback.

- Minimum of 6 slides.

I started looking at websites and apps that I've used before which I think could be improved upon. I decided to settle on the website E-print: https://www.e-print.my/

I then went and analysed the website's main pages, except for their "store finder". In each page, I looked at both the good and bad UX design characteristics and listed them down.

Overview

E-print is a company that specialises in creating paper and fabric merchandise such as business cards, leaflets, stickers etc. At first glance, the website is very bright and bold in its color choice and 2000s-esque design. Their brand colors are teal and dark blue. They also utilise a lot of gradients in their elements.

Characteristics of Good UX Design:

Homepage: 

- Clear navigational structure

- Multi-language support

- Product list is easily accessible

- Navigation bar has hover effects and drop down lists for relavant pages

Product List:

- Clear title of product

- Consistent layout with homepage

- Clear table for prices

- Button that takes the user back to the top at the bottom of the page

- Animated icons for ‘Hot’ or ‘New’ products

- Dropdown list for easier navigation

Online Order:

- Visible option to remember account password

- Clear login section

- Multi language support

- Button hover indicators

FAQ:

- Questions are clearly labelled on the side panel

- Step by step instructions 

- Important links are highlighted

Download:

- Clear hierarchy and sections

- Relevant images for each product

- Multiple options for template download

- Image preview for product templates

About Us:

- Brand services are clearly stated at the beginning of the page

- Information is separated into clear sections

- Each heading is visually separated from the body text with color and font thickness

- Main points are clearly highlighted

Characteristic of Bad UX Design:

Homepage: 

- Visual clutter, a lot of information available at once

- Outdated visual design

- Lack of white space

- Doesn't utilise the full space for the website, lot of empty space on the sides

Product List:

- Lack of filters and sorting

- Opens straightaway to a product's details instead of a general overview of the products

- Product information in the banner is stating the same details twice

- Details on how to order and templates are at the bottom of the page

- Text heavy

- Design is not responsive to different devices

- Call to action buttons have no hover effects and look like low resolution images

Online Order:

- Outdated design

- Language options are hidden, users have to scroll to find it

- Typo in the language section

- Not enough spacing between elements and text in the login section

- No alternative login options such as Google or Facebook

- Quick inquiry form lacks details such as contact information 

- Auto-scrolling carousell background can be distracting

FAQ:

- Opens straightaway to the first FAQ

- No search bar for FAQ

- Too much information in the side bar

- No icons or images

- Excessive and unnecessary amount of white space at the bottom 

Download:

- Sections are not collapsible

- ‘Next’ and ‘Back‘ buttons are unclear and do not visually indicate them being buttons

About Us:

- Too much text can cause users to get tired of reading

- No images or icons to help visually inform users in each section

- No clear call to action

Conclusion

To conclude, E-print displays their information in straightforward manner and is easy to navigate around. However, their old-fashioned visual identity and current webpage design may cause users to hesitate on ordering. 

Suggestions

Some suggestions would be to fully utilise the web space by removing the empty blue background on the sides. They could also create a more responsive design so users can access the website on other devices than laptops such as their phones or tablets.

E-print should also modernise their visual identity by using more flat colors instead of gradients and using a different typeface. Furthermore, reducing the amount of text and providing clear call to action buttons could help increase user retention and reduce confusion.

FINAL

Fig 1.1 - Final UX Audit PDF

---

FEEDBACK

Week 3

Specific Feedback - Include link to website. Make it clearer which slide is for good UX design and bad UX design. Highlight and point out from each picture. Create a separate slide for design suggestions.

---

REFLECTION

My experience with this task was okay. I've done an analysis on a mobile app before so it wasn't anything too difficult or new.