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 15

Image
High Fidelity Prototype 1 progress  15.1  Continue on high fidelity prototype 1 User Interface design progress  This week, I continue on the high fidelity prototype 1 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 : 15.2   Linking high fidelity prototype 1 User Interface   After done with the user interface design for the high fidelity prototype 1, 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 t...
Read more

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 m...
Read more

WEEK 17

  17.1  Demo video  After done both prototype, I decided to do a screen record demo on how the app works and being used. Below are the prototype 1 demo and prototype 2 demo : Prototype 1 demo video : Prototype 2 demo video :  17.2  Presentation Slide I also prepare for presentation slides to get ready for presentation. Below are the presentation slides Ive done : [R&d] CW2 - Project Pitching by CHAO CI XIN on Scribd 17.3  Prototype Documentation Template (2nd time) I have done the 2nd usability test as well as both high fidelity prototypes. Therefore, I document it down too as a record. Below are the prototype documentation for total 3 prototypes : [R&D] w17 - Prototype Documentation by CHAO CI XIN on Scribd
Read more