Chan Jing Wen (0340480)
Advanced Interactive Design
Project Compilation
Project 1
Week 1 - Week 7 (28/03/22 - 09/05/22)
For our first project, we have to create a UI for an e-commerce mobile application. Mr Razif encouraged us to think of doing something that can go across all 3 projects for our module. I started to brainstorm some ideas after understanding what is required for the first project. The ideas I thought of are:- Macaron Store Ordering System
- Flower Shop Ordering System
- Movie Ticket Booking System
I decided to go with the macaron store ordering system as I can foresee some of the design elements I might use. I also like how a lot of macaron shops allow customers to customise their macarons and thought of incorporating it into the mobile app. The section that I'll be focusing more on is the purchasing of customised or normal macaron packages.
I created the flowchart after finalizing my idea. Below is my progress:
 |
| Figure 1.1 Flowchart of Macaron Online Ordering Mobile App |
The wireframe was built based on the flowchart. I did the wireframe using Android 16:9 size. Below is the compilation of the wireframes:
I then consulted Mr Razif on the progression. Once that was done, I started by coming up with the branding first:
 |
| Figure 1.2 Project 1 Branding - Colour Palette |
 |
| Figure 1.3 Project 1 Branding - Logo |
 |
| Figure 1.4 Project 1 Branding - References |
I then move on to complete the design once the branding was set. I made quite a lot of amendments based on Mr Razif's feedback. I managed to cut a few pages out and made some parts more dynamic. Below is the progression for the UI Design:
I continued on to work on the animation in adobe animate.
 |
| Figure 1.5 Screenshot of WIP for Project 1 - 01 |
 |
| Figure 1.6 Screenshot of WIP for Project 1 - 02 |
 |
| Figure 1.7 Screenshot of WIP for Project 1 - 03 |
 |
| Figure 1.8 Screenshot of WIP for Project 1 - 04 |
Below is my video submission for Project 1:
Project 2
Week 8 - Week 12 (16/05/22 - 13/06/22)
We have to create a story filter using Spark AR for project 2. I decided I wanted to work on the same brand from my project 1. The idea I had was an interactive filter where the audience can play a game allowing them to win a discount or some sort.
In the end, I went with the idea of having the audience collect macarons in a box. The higher their score, the higher chance they have of getting a discount.
 |
| Figure 1.9 Assets for Project 2 |
 |
| Figure 2.1 Screenshot of WIP for Project 2 - 01 |
 |
| Figure 2.2 Screenshot of WIP for Project 2 - 02 |
 |
| Figure 2.2 Screenshot of WIP for Project 2 - 03 |
Below is my submission video for Project 2:
Final Project
Week 12 - Week 15 (13/06/22 - 04/07/22)
I decided to continue the brand I used for Projects 1 and 2 for my Final Project. For this project, we have to create a microsite and AR Filter.
I wanted to use the microsite as a way to promote the mobile app and story filter so there is a stronger relationship between the projects. As my project 2's story filter is already quite complicated, I was quite indecisive on what I can do for another story filter. In the end, I decided to go for a more simple concept so there is a bigger difference between each. Also, from a marketing pov, it's also better to create 2 different story filters so it doesn't bore the customers. Different types of engagement can help target a greater audience.
Below is my UI design for the microsite:
 |
| Figure 2.3 Final Project Microsite UI Design - About Us Page |
 |
| Figure 2.4 Final Project Microsite UI Design - Download Page |
 |
| Figure 2.5 Final Project Microsite UI Design - Challenge Page |
 |
| Figure 2.6 Final Project Microsite UI Design - Contact Us Page |
Once the UI design is done, I separated them into individual files and did the animation in Adobe Animate. Below is the progression:
 |
| Figure 2.7 Final Project Microsite Animation Progression 01 |
 |
| Figure 2.8 Final Project Microsite Animation Progression 02 |
 |
| Figure 2.9 Final Project Microsite Animation Progression 03 |
 |
| Figure 3.1 Final Project Microsite Animation Progression 04 |
The following are progression for the AR Filter:
 |
| Figure 3.2 Final Project AR Filter Assets |
 |
| Figure 3.3 Final Project AR Filter Progression 01 |
 |
| Figure 3.4 Final Project AR Filter Progression 02 |
 |
| Figure 3.5 Final Project AR Filter Progression 03 |
Below is my submission for the microsite and AR Filter:
Microsite Submission:
Due to some complications with my laptop, I couldn't do a voiceover to present my project. Below is a walk-through of the project:
Backstory
The website and the story filter for the final project are based on the same imaginary brand from my project 1 and 2. The brand is called “Makecaron”, which allows customers to customise their macarons according to their preference. The purpose of this website is to encourage users to download the mobile app to make their purchases.
About Page
The about page shows a brief overview of the brand and the CTA button in the first section encourages the user to download the app.
Download Page
The download page shows the QR Code to the mobile app. If you scan the QR Code, it will lead to my project 1 submission.
Challenge Page
Here shows the 2 story filters I have made for Project 2 and Final Project respectively. These 2 AR Filters allow the audience to interact and stand a chance to get discounts for their purchases from our brand.
Contact Page
This is a simple page where users can just scan the QR Code and move to the brand’s Instagram or Facebook account, where they can access our challenges.
AR Filter Submission:
Comments
Post a Comment