Application Design I - Project 2 : UI/UX Design Document

26.09.2022 -  31.10.2022 ( Week 5 - Week 10 )

Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Application Design I
Project 2 : UI/UX Design Document

---

INSTRUCTIONS

---

TASK

Week 5

There are no class on week 5, but we were asked to download one of the apps in the list and replicate the UI design. Select a minimum of 5 screens (not including onboarding) for the task. We are allowed to use any software (Adobe XD, Photoshop, Illustrator, or Figma) for the task. We may use any images from any resources as long as it is appropriate to the design. We need to study and observe carefully the original design and implement it in our crafting. Focus on the details, examine each pixel use in the original UI design and apply it to our own work.

Here is the list:

• Productive - Habit Tracker
• Sectograph 
• Trip
• AirBNB
• Premier League
• Strava

I decided to recreate AirBNB and I use Figma to work on. These are the results.

Figure 1.1 Comparison Between Real AirBNB and the Replication (Home Page)

Figure 1.2 Comparison Between Real AirBNB and the Replication (Detail Page)

Figure 1.3 Comparison Between Real AirBNB and the Replication (Profile Page)

Figure 1.4 Comparison Between Real AirBNB and the Replication (Detail Page 2)

Figure 1.5 Comparison Between Real AirBNB and the Replication (Guest Selection Page)

Figure 1.6 Comparison Between Real AirBNB and the Replication (Date Selection Page)

And then we need to prepare our UI Style Guide. We can find templates on the internet and I chose to search using the Figma Community. After looking around for a while, I found a suitable template for my UI style guide. I replace the color styles and the font styles matching with the app that I chose to redesign.

UI Style Guide

---

FEEDBACKS

Week 5 :

No Class

Week 6 :

• The AirBnB replications looks very similar, only missing shadow below the buttons
• Prepare your UI style guide, will be previewed next week

Week 7 :

Public Holiday

Week 8 :

Independent Learning Week

Week 9 :

Public Holiday

Week 10 :

• The UI Style Guide is good. Nice font choice. Create tertiary button. Can proceed to create the lo-fi prototype and do the user testing.
  
  

---

REFLECTIONS

In the second project timeline, there was a week where we had to do an exercise that asked us to recreate the given applications. The goal is that we can understand the layout and design of applications that have good UI and UX designs. It was really fun when I tried to replicate the AirBnB app. The application has a neat layout. The existing assets are very neatly arranged. Then into the week where we had to work on our UI style guide. This task is not too burdensome compared to other modules. In this task, I only need to fill in the template and customize it.