Context and Challenge

Background

This class is called Idm-213, or Interaction Design, and it involves the process of defining the structure and behavior of interactive systems, as well as how they might be utilized to build meaningful relationships between people and the products and services that they use. However, the first step in designing interaction design is researching which service to use, and I decided on supermarkets.

Problem

The issue with this task is that I need to consider how I will create intuitive interaction design on supermarket app that must be completed within 10 weeks of the deadline because the instructions state that I must create microinteractions on After Effects and cannot use other software. In addition, in 2021, this will be my first time using After Effects program. I decided to go step by step in order to track the timetable of each stage based on the assignment from each week that the professional handles, which ends up as the final product.

Goal

The purpose of this project is to ensure that microinteractions are completed by After Effect within 10 weeks of the deadline, as well as to demonstrate my user persona to my interaction designer.

Process and Insight

1.Sketch/Fidelity Design

First, I must identify which services I will use during week 1 and then begin sketching the idea of interaction design using the Figma software and continue to update through low fidelity to high fidelity prototypes.

2. Task Flow

At this stage, I need to identify the tasks flow from a few supermarket apps for research purposes, as well as look for the interaction guidance of the inspiration supermarket app prototype, which allows users to know which features go shopping list, account, and others. In addition, I'll determine the Trigger, Rule, and Feedback for microinteraction.

3. Final Step

The next phase is to have high fidelity completed, which should be around week 6-7, and I have 3-4 weeks till the deadline, however these last 3-4 weeks will be spent working on microinteraction on After Effects. The high fidelity was created using Figma design and imported into After Effects to create Microinteraction.

The Solution

Overall, the end of my 10-week project was supposed to resemble my initial idea of interaction design result from week 1 and base design from low fidelity to high fidelity would eventually modify the idea that I will continue refining the design on Figma and gathering ideas. The link to my all microinteraction video is also provided below.