Application Design I / Project 2 & 3: UI Documentation & Low-fidelity Prototype

-

26.9.2022- 7.11.2022 (Week 5 - Week 11)
Britney Chow Pei Jun / 0350043 / BDCM
Application Design I
Project 2 & 3: UI Documentation & Low-fidelity Prototype

JUMPLINKS

INSTRUCTIONS


PROGRESSION

Project 2: UI Documentation

In project 2, we are required to determine the direction of how our app should be. We will have to search for ideas and references from multiple platforms. I first determine what is needed in MIRO, I listed out a few items.
  • Typography
  • Icons
  • Buttons
  • Colors
  • Other UIs
Fig 1.1; Mood board/UI Documentation in MIRO; 

Then I start doing them into a document. Below is my UI documentation: 

Final Project 2: UI Documentation 

Fig 1.2; UI Documentation;

Project 3: Low-Fidelity Prototype

In this part of the project, we are to create a low-fidelity prototype using either Figma or Adobe XD. For me, I decided to use Figma. Since it's my first time using Figma, there's a lot of things that I do not know how to use and what their function is. However, YouTube, in this case, is my best teacher as there's a lot of tutorials and guides up there to teach people on how to use it.

Fig 1.3; Low-fidelity prototype in Figma; 

Fig 1.3; Low-fidelity prototype with interactions; 

After that part is done, I then proceeded to do the user testing. I searched for 3 friends of mine to help do the user testing. Below is their comments: 
Fig 1.4; User Testing Feedbacks
 

Final Project 3: Low-fidelity Prototype

Fig 1.5; Low-fidelity Prototype in Figma; 

Fig 1.6; User Testing Feedbacks; 

Google Drive link of user testing videos: Drive to User Testing Videos

FEEDBACKS

Specific Feedbacks for Project 2:
In style guide, choose 2 typefaces and sizing system. Grid system. choose only 1 type of button. Get more input on the color choice.

Specific Feedbacks for Project 3:
Lo-fi prototype means no color. However, other than that, everything looks fine except for habit input. It doesn't look consistent with the other designs. Do 2 more user testing. 

REFLECTIONS

In project 2, I think it's actually pretty easy. However, there's a lot of things that I have to watch out for, for example, the icons have to be consistent with each other, furthermore, the colors used also have to be nice and suitable for the app as well. I'm able to learn a lot from this a lot. While proposal determines the directions of how the app should be, UI documentation determines the designs of it. While to some, this may not seem important, but I think as I was doing it, I was able to slowly understand why this is important.

For project 3, it's pretty challenging to me compare to the other projects considering this is my first time working with Figma. To be really honest, it isn't exactly a very easy to use website. However, I think that's a beginner speaking, because after I was more familiar with it, I was able to create the functions that I wanted to. So overall, I feel that while it is pretty challenging to work with something new and also in such short amount of time, I feel that I find it pretty fun, I was able to pay full attention to what I was doing and make changes accordingly as well.

Comments

Post a Comment

Popular posts from this blog

Design Principle: Project 2

-
Image
11.10.2021 - 31.10.2021 (Week 8 - Week 10) Britney Chow Pei Jun / 0350043 / BDCM Design Principles Lectures and Project 2 LECTURES  Introduction A designer's role is to solve problems with effective visual communication. Ranging from personal goals to community events, and from corporate functions to world changing projects. Observation Be attentive to your surroundings Pay attention to the details and to be analytical about them Sources of observation can stem from artifacts, daily happenings, physical surroundings, and such.  An active act of acquiring information through the senses, of a subject matter in its natural setting. Senses are important for us to know, feel, understand, analyze and even plan what we want to do. Important to designers as it enables them t...
Read more

Game Development // Task 1: Game Proposal

-
Image
1.9.2023- 29.9.2023 (Week 1 - Week 5) Britney Chow Pei Jun / 0350043 / BDCM Game Development Task 1: Game Proposal LECTURES/EXERCISES WEEK 1 In this week's class, we are required to review a game made by our seniors. Fig 1.1; Reaper Test Game; sauce:  TDS Gamezone ; Although the graphic of this game does not feel as good as the other game in Gamezone. However, it is still nice as it uses simple shapes and design, the colors used in the game does not feel very out of place, the background also feels alright, but for my first time playing this game, I did not know about the environment of the game. Furthermore, the music chosen also able to fit in to the game itself. The story of the game is nice as there's a goal behind it. Due to the limitations the developer faces, there won't be more to the story. Moreover, the movement of the character is slightly "slippery" as it sometimes slipped even th...
Read more

Collaborative Design Practice // Task 1: Empathy Map and Problem Statement

-
Image
29.8.2023- 12.9.2023 (Week 1 - Week 3) Britney Chow Pei Jun / 0350043 / BDCM Collaborative Design Practice Task 1: Empathy Map and Problem Statement  INSTRUCTIONS  RESEARCH  Since our group is in charge of G.E.M, which is bamboo cups, we have done some research on it, below is our research: Pros of using bamboo cups Reducing Unnecessary Waste Save money Reduces Deforestation Keeps Billions Of Cups Out Of Landfills Long-lasting and Reusable Non-toxic and BPA free Highly Durable Fig 1.1; Oceans Republic Bamboo Products; sauce:  OceansRepublic Fig 1.2; Customized Bamboo Cups ; sauce:  OceansRepublic's Bamboo Products Research on competitors: Bamboo Village Malaysia:  Bamboo Vil...
Read more