Application Design II / Task 1

5.4.2023- 21.5.2023 (Week 1 - Week 7)
Cheryl Voo Yie Qi / 0349878
Application Design II / Bachelor of Design in Creative Media
Task 1 / Application Design 1 Self-Evaluation and Reflection

---

LECTURES

Week 1 

We are required to recap our memory about HTML and CSS by practicing making a simple website.
So here's mine:

https://appdesign2-exercise1-cherylvooyieqi.netlify.app

Week 2 & 3

This week we are required to recreate an app page given by Mr. Razif :

Fig 1.1, Sample given by Mr.Razif

Before I asked Mr.Razif for help, I looked for help on Google but for the navigation bar I used Bootstraps, and it doesn't work for me. So I redo it and it worked nicely. 

Fig 1.2, How it looks on the website inspect

Fig 1.3, Final outcome

Netlify link:

https://appdesign2-exercise2-cherylvooyieqi.netlify.app

Week 4

This week we learned using JavaScript DOM CSS, 

https://www.w3schools.com/js/js_htmldom.asp 

Fig 1.4, Html

Fig 1.5, Inspect (Changed the text and background color on click)

Side panel added

Fig 1.6, Side panel added

Fig 1.7, Side panel on click

Week 5

This week we continue more with javascript DOM and did a loading screen and side panel.

Fig 1.8, Html

Fig 1.9, Onboarding screen

Fig 1.10, Side panel

Week 6

This week we learned to create page 2, then by clicking the icon, and will be directed to page 2.

Fig 1.11, Html

Fig 1.12, CSS

---

Task 1

Application Design 1 Self-Evaluation and Reflection

Zoo Negara mobile app

Fig 2.1, App Design 1 (Overview)

Fig 2.2, First page

• The showtime box can be improved (the information with picture)
• The page looks empty and simple.
  
  
  

Fig 2.3, Hamburger menu

• The logo for "About us" can be changed (if only looking the logo wouldn't know that is for "About us".

Fig 2.4, Map

• The search logo can be placed on the right side.

Fig 2.5, Animals page

• The pictures can appear when hovered.

Fig 2.6, Tickets page

• The background for every page can add things like illustrations / redesign the whole thing.

Fig 2.7, Confirm purchase

• This page looks empty and too simple.

Fig 2.8, Purchase confirmation page

• The ticket can be more realistic so it doesn't look flat.

Redesign

Home

I redesigned the home page all again as I thought the original one looks empty and boring.

Fig 2.9, Original home page

Experimenting with the colors:

Fig 2.10, Redesigned home page

Side panel

I'm changing the icon for "about us":

Fig 2.11, Original side panel

Experimenting icons:

Fig 2.12, Icons

At last, I chose the most basic icon for "about us" as others look complicated when I resize it into a smaller size, so I chose the basic ones.

Fig 2.13, Improved side panel

Map

Nothing much on this page but just changing the search icon to the right to make the screen looks more even and normally the search icon is on the right.

Fig 2.14, Original map page

Fig 2.15, Improved map page

Animals

For these pages, I was planning to make the hover effect that the pictures will appear after hovering but I'm still not sure about it so I just changed the background to match the overall design.

Fig 2.16, Original animals page

Fig 2.17, Improved animals page

Ticket

Fig 2.18, Original ticket page

I changed the buy tickets button to a more obvious color to make it more of a prominent call to action button.

Fig 2.19, Improved ticket page

Ticket confirmation 

This original ticket confirmation is too boring and too simple.

Fig 2.20, Original ticket confirmation

So I make it more interesting by turning it into a ticket and adding some shadows.

Fig 2.21, Redesigned ticket confirmation

Final Redesign in Figma

After redesigning the Zoo Negara app, I felt like there is a lot that I can improve in the app, so I ask for advice from Mr. Razif. He suggested I add some illustrations as it looks empty and doesn't look like a zoo app, and the rounded parts are too much. Other than that, the colors can explore more other than green. So I redesigned it again, and here's the result:

Re-redesign

Starting screen, Login, and Sign up screen

I added a login and sign-up screen which I don't have previously.

Fig 2.22, Re-redesign Starting screen, Login, and Sign up screen

Home

I used another typeface (Otomanopee One) to match the zoo theme, the icon in the navigation bar will turn orange to indicate which page the user is in.

Fig 2.23, Re-redesign home screen (right side is the whole scrolling content)

Side panel

I added some illustrations in the side panel to make it more lively.

Fig 2.24, Re-redesign side panel screen

Ticket

I used orange color for the buy tickets button to make it more obvious and emphasize it. I also reduce the rounded angle of the boxes.

Fig 2.25, Re-redesign ticket screen

Buying tickets

I changed the color to different shades of blue when the users trying to buy tickets, is to differentiate the buying ticket process from the previous ticket page. And also to tell users that they enter the page to buy tickets.

Fig 2.26, Re-redesign buying ticket screen

Fig 2.27, Re-redesign buying ticket screen

Fig 2.28, Re-redesign buying ticket screen

Fig 2.29, Re-redesign buying ticket screen

Fig 2.30, Re-redesign ticket confirmation screen

Final Final Redesign in Figma

---

REFLECTIONS

In this task, I realize that I have many shortcomings as the difference between the 3 versions of my apps, the original one I did last semester, the first redesign, and the second redesign I did this semester, I felt that they have huge differences. I wanted to thank Mr. Razif for giving me advice and feedback to make my work better.  And I knew my app is not that good while doing the redesign, but I just felt like I was stuck during the first redesign, I can't think of any ideas to redesign, and makes me think my app is average, but after Mr. Razif's feedback and looking back at my redesign, that really sucks. I knew my app is not the best but I realize that there is a tiny minor improvement I made it through this semester.