Advanced Interactive Design - Project 1

16/04/20 - 28/05/20 (Week 1 - 7)
Azmina Fathima Haris (0337113)
Advanced Interactive Design
Project 1


INSTRUCTIONS


LECTURES

Introduction to Module
Week 1 (16/04/20)

For our first class, we were given a briefing on our projects and also the softwares we will be using. For the first project, we'd be using Adobe Animate and would be working on creating an interactive application, for an online store of  our choice. We were told to finalise our ideas for next week and work on a user flowchart, wireframes (for at least 3 to 5 screens) and gather references for the application.

We also tried animating some objects in Adobe Animate to familiarise ourselves with the controls - creating shapes, class tween & motion tween and creating guide layers.

Introduction to UI Scripting
Week 2 (23/04/20)


Project 1

For our first project, we had to come up with an interactive prototype for a shopping app. I decided to go with a Japanese food delivery app, and called it Kabuki Sushi. I worked on planning the content, flowchart and the wireframe sketches for the next week. 

Content

Homepage - Categories (Sushi, Ramen, Rolls) Top picks for you

Sushi Category - Sushi varieties (Kappa maki, Tamago nigiri, California maki, Ebi nigiri, Ikura maki & Sake nigiri)

California maki - product image, price, description, allergen, add to cart button

Cart - Chosen Products, subtotal, promo code option, proceed to pay 

Payment page - progress bar, recently used cards, other payment methods

Confirmation message

Wireframe sketches - 

Flowchart - 

I also started creating my illustrations in Procreate for the icons and product images and then exported it to Photoshop to refine it further. 

Process in Photoshop

Icon illustrations

Icon illustrations

Wave patterns

Navigation bar icons

Process of  creating prototype in Illustrator 

Homepage

Sushi category

Product page

Cart

Payment & confirmation page

Process in Animate CC - 

Final submission - 

 

Compilation slides - 

 

FEEDBACK

Week 1
No feedback for this week.

Week 2
After I showed Mr. Lun my progress on Project 1, he said my idea and references were good and I could start working on it. However, he suggested simplifying the swiping motions in my menus and using arrow buttons instead as it would be easier considering the timeframe we had for this project.

Week 3