Application Design II / Task 1
5.4.2023 - 21.5.2023(Week 1 - Week 7)
Chang Jia Yee / 0350402 / Bachelor of Design in Creative Media
Application Design II
Task 1 : App Design 1 Self-Evaluation and Reflection
INSTRUCTION
EXERCISES
Exercise 1
File link: https://drive.google.com/drive/folders/1uyK7IK7wOxOA3XPd3oNjt4mgOOrfTQwI?usp=sharing
Website link:
file:///Users/changjiayee/Downloads/ad%202%20exercise%201.html
Exercise 2
Website link:
Fig. Figma layout
Website link:
https://appdesign2exercise2.netlify.app/
Task 1 : App Design 1 Self-Evaluation and Reflection
To Do:
Task 1 : App Design 1 Self-Evaluation and Reflection
To Do:
- Write reflection and self-evaluation on mobile application design 1 final project
- Document issues, problems, difficulties and propose solution to improve the mobile app design
1. Reflection On App Design 1 Project
In semester 3, I redesign a cooking application called "PetitChef".
At that time, I didn't think there was any big problem with my design, but
when this semester opened it again, maybe because I learned more knowledge
and improved my knowledge of UI, I felt that the typesetting and colours of
the last semester's redesign outcome were outdated and immature. So in
this project, I think the great thing is that I can modify and optimize the
immature design results of semester 3 app design, so as to be closer to the
ideal appearance and layouts of a user friendly and good looking culinary
app.
2. Critical Analysis
Previous UI layout design (Submission for Application Design 1)
Fig . Previous layout of PetitChef culinary app
Issues and Problem
- Lack of space, dense distribution of things on the screen
- The logo is too complicated and lacks memory points.
- There is something wrong with the colour system selection, and the colour matching is dirty.
- The layout of the screen is all in a rigid square frame, which doesn't highlight the more important content and looks rigid.
- The overall design has no features, but some basic typesetting and functional arrangement that can be seen in most applications.
- Illustrations of the category of the Search page do not conform to the overall style theme.
Solution & Redesign
- Change of colour scheme
- Redesign the layouts
- Redesign simplify logo
- Redesign the main page illustrations to match the style and theme
Fig. Redesign logo to simplify style
Main Page
Problem
- Boring horizontal scrolling typesetting
- Too many recommendation/ call to action button in one page
Solution
- Switch to a different scrolling mode, similar to a rotating wheel.
- The top half of the page is replaced by the category classification（Bread, Pizza,Soup...）, which can provide corresponding and directional recommendations according to user needs.
Fig . Main page screen changes
Popular recipe section uses the design of rotating wheel, adding some sense of design and different scrolling ways to give users a fresh sense of experience.
Recipe Page
Problem
- Crowded typesetting.
- Dull watching teaching steps and videos.
Solution
- Pagination form separates recipe information into three different screens, namely detail, ingredients, and video direction.
- The recipe video is changed into a scrolling form, and there is a key frame on each step, so users can adjust to the step they want to watch at any time.
Fig . Recipe page screen changes
Search Page
Problem
- The collection function is not conspicuous and easy to find.
Solution
- Left and right staggered asymmetry, adding some blank space.
Fig . Search page screen changes
Profile Page
Problem
- The collection function is not conspicuous and easy to find.
- Profile page has some functions that don't belong here, such as favorite recipes, etc.
- Functions are only distinguished by images, and functions are not clearly marked, which will confuse users.
Solution
- Profile page only leaves some things related to user preference and setting, and the page becomes more concise and clear.
- Subdivide it into another category -library, which contains recipes collected by users and recipes created by users.
Fig . Profile page screen changes
Shopping List Page
Problem
- Each cookbook takes up too much weight on the page, which will appear very dull and heavy.
- It is rigid and boring to distinguish each recipe with black lines.
Solution
- Use colour to distinguish each recipe, leaving some gaps to separate each recipe.
- Let the picture of food go beyond the box and create an interesting visual feeling.
Fig . Shopping list page screen changes
Solution
- Let the food map occupy a corner, which will be more designed and cleaner than occupying the top of the whole canvas.
Fig . Shopping list page screen changes
3. Redesign the screens
Old Design
Fig . Previous layout of PetitChef culinary app
New Design
Fig . Revised screens of PetitChef culinary app
In the new typesetting, we can see more concise typesetting and more focused sorting to guide users to use applications.
FEEDBACK
Week 7
Mr Razif said that the color saturation and transparency of the background
of the recipe details page can be reduced, so that users can see the
contents and words more easily. In addition, the detailed page of the recipe
should also have a menu bar for users to operate.
REFLECTION
For me, this redesign part is very important to me, because there are many defects in the previous design, and I can take this opportunity to improve and optimize it, which I think is a very important process. This time, I also found that I have made obvious progress and have more ideas about layout and arrangement. These seven weeks are actually enough for me to redesign and plan the app, so I didn't feel rushed in this process. I also have more time to study good typesetting and examples, combine them and apply them in my app.
REFLECTION
For me, this redesign part is very important to me, because there are many defects in the previous design, and I can take this opportunity to improve and optimize it, which I think is a very important process. This time, I also found that I have made obvious progress and have more ideas about layout and arrangement. These seven weeks are actually enough for me to redesign and plan the app, so I didn't feel rushed in this process. I also have more time to study good typesetting and examples, combine them and apply them in my app.
Comments
Post a Comment