WEEK 7

 WEEKLY LECTURE


Work shop: UI Grid system

Due to the mistakes we have made during creating our wireframes, this week we have a short lecture on the grid system in mobile phones and websites. From the lecture, I realized that the UI in mobile phones and website so much sees on the details, such as the system font size, the icon size, the placement of elements cannot over some gridlines and many more. Therefore, I think it's a useful lecture for me which it lets me have new knowledge in UI that I need to pay attention at these details.


Things need to pay attention while doing wireframes :

- font size (use from font size guide)

- grids for both mobile phones and websites

- buttons radius need to be the same

- logic flow for user interaction

- icon size (refer to icon size guide)

- different mobile system has different system guide (IOS and Android)


 ________________________________________________________________________________________________________________



PROJECT PROGRESS


FINAL information architecture

After showing the information architecture to the lecturer, there are some amendments that needed to be done as I get comments on the flow is wrong. It is the part that the "home page" suppose not same line with the other categories such as "jobs, learning and my account". Therefore, "homepage" were being moved up and placed after the "log in sign up" screen






FINAL user flow

Due to some minor mistakes in the user flow, there are also some amendments to the user flow. Here's the FINAL user flow after approved by lecturer .

[R&D] W7 - FINAL User S... by CHAO CI XIN




Wireframe sketch

Before getting started with the digital wireframe in Adobe XD, I've done some wireframe sketch in order to let me have a clearer vision on the wireframes I'm going to create.






Wireframe in Adobe XD

It was quite complicated for me to digest the structure or wireframe for this project because it is more complicated and I'm not that familiar with UI UX. Hence, while doing the wireframe, there are researches occurs too to help me understand more in the UI world and the flow of the wireframe that make sense


[R&D] W7- Wireframe (Version 1) by CHAO CI XIN on Scribd



From lecturer comment, there are a few mistakes occur which is 

- the inconsistency of the icon types

- the "log in/sign up" screen need to place before "select user type"

- the bottom stroke bar is confusing

- shadow system not good (need to refer UI system guide on shadow settings)

- "apply job" button are confusing & not functionable

- search button & filter icon placement wrong

- search bar should appear ineach screen 

- missing "chat" screen

- confirm button at top, clear button at bottom

Comments

Post a Comment

Popular posts from this blog

WEEK 16

Image
  High Fidelity Prototype 2 progress  16.1  Continue on high fidelity prototype 2 User Interface design progress  I continue on the high fidelity prototype 2 user interface design. During the process I have lots of trials and error to experiment with all the layouts, button and more.  Here are some of the continuous progress of the high fidelity prototype 1 user interface design : 16.2  Link the high fidelity prototype 2 User Interface  After done with the user interface design for the 2nd high fidelity prototype, I started to link all the frames together. This process is indeed challenging which it has so much of buttons and links. Meanwhile, some part requires some animations which I've never experience before. Therefore, I spend some time to research on how to do those transitions and animation. During the process, I also add on some frames to make sure have a better user experience. However, it is a quite fun process where I realised there are so much possibilities to do with A
Read more

WEEK 10

Image
  PROJECT PROGRESS 10.1  Research on usability test After done last week's project & time planning as well as some understanding of prototypes and usability objectives, I decided to do deeper research on usability test, starting from what is a usability test, what is the steps of usability test, the benefits of usability test and types of usability test. What is Usability Test A usability test is a task to get a group of representative users to use and interact with our product (can be apps, websites, products, and many more). It is to see how easy to use our product by the users or if the users encounter problems and experience any confusion.  We need to observe and analyze the users' behavior and reaction while carrying out the usability test.  If many people encounter similar problems, it means there are some issues we need to fix it. It is also usually conducted repeatedly for few times until the product's release.  (Interaction Design Foundation, 2021) Steps of Usa
Read more

WEEK 13

Image
13.1    Usability Test (1st round) After done the User Acceptance Form, I started to carry out usability test this week. At first, it was a really challenging task for me to find people with disabilities to participate in this test. However, after trials and error and the help of one of my friend (who also a person with disabilities), I finally found few more participants with disabilities to participate in the usability test.  During the process, I give the target user a specific task to achieve when conducting the usability test on the low fidelity prototype. I have recorded down the results and give them to fill up the User Acceptance Form so I could understand which part of my prototype need to be improved. In this usability test, it is aimed to make sure the app function, features and flow are in line with user's expectations and needs. It helps me to know what is the issue faced by the users while completing the task given to them so I could improve the user experience.  User
Read more