Application Design 2 - Task 2: Interaction Design Proposal & Planning


25/04/2024 - 16/05/2024 (Week 01 - Week 04)
Wong Khye Qing / 0361000
Application Design 2/ Bachelor of Design (Hons) in Creative Media
Task 2: Interaction Design Proposal and Planning


Instructions
 


Recap on Task 1...

From the previous task I have made a my analysis on the apps that I have researched and found out that my app would need to take note on a few things. 
  • Clear and concise layout
  • Relevant information
  • Convenient Ticket system
  • Good Customization
  • Categorization
  • Clean interface
I will need to take note on the few things above in order to create a good event app that has good experience as to not be too cluttered to the user and not user-friendly. I have also made about a few pages of my app in Task 1 to demonstrate the features and the general flow of checking and buying the event ticket from the app. 

Regardless of that, I will also need to make sure that I complete my interface design in this task with the user flow that I have planned. Besides that, I would need to make sure that my app will have interesting animations in order to increase the user experience and smoothness of the user interface. Besides that, I would also needed to take note on my design style as my previous proposal would need more amendments on uplifting the playful minimalism style that I proposed. 


Task 2: Interaction Design Proposal & Planning
 
Further Research on interface
Fig 1.0  Research on Playful Interface, Boxes

Further research has been made in order to understand more about how interfaces for playful minimalism looks like. The moodboard above consisted of interfaces that have boxes that are almost similar to the "Bento Boxes" style, it does portray playful elements in the interface with vibrant colors. In conjunction with that, the boxes are able to organize and categorize the information in the app into groups with the Law of Proximity, thus making them look like a grouping.
Fig 1.1  Research on Playful Interface, Vertical boxes

Same instances also happen at this moodboard, which most of the interfaces used colorful and fun colors that able to display playful and make the interface not too corporate-look of flat. Apart from that, I have also noticed that these interfaces consisted of vertical boxes, which might be visually different from the previous moodboard with square boxes. These boxes are able to create more organized and hierarchy-based layout especially for informational contents. They have even more spaces to list out the 

Summarized findings: 
  • Usage of boxes in interface:
    • Similar to "Bento Box" style interfaces
    • Uses Law of Proximity to group information.
    • Creates a clear and organized layout.
    • Provides more space for details (vertical boxes)

  • Fun and colorful color palette 
    • Suits the Playful Minimalism Style
    • Portray playful and fun impression on the app, less corporate-look and flat

Color Palette


Fig 1.2  Overview of moodboard

I was also best that I have change the app's color palette to best suit the proposed design style as well as the lecturer's feedback. With that, I have used the previous moodboards and extracted the color to see if it best suit my app. 

Fig 1.3  Overview of moodboard

The extracted colors from Adobe Colors are fine but I am not sure does it really suit the overall app style, since it might also be too saturated on some colors that might not suit the minimalism style. Besides that, I also thinking of tweaking the colors to make my own color palette instead of using the current one.  


Fig 1.2  Overview of moodboard

I have tried to adjust the colors in Coolors by referencing on the previous color palette. The selections are #C3F275 (Mindaro), #ECCCF6 (Thistle), #F8F8F8 (Seasalt), #27252D (Raisin Black), #E74243 (Imperial Red). 

Besides that, Mindaro and Thistle worked well together as they are Analogous Colors, which are able to harmonize with each other. While Imperial Red will be a good contrast to Mindaro and Thistle thus marking as the obvious contrast in the interface. I have and arranged them in this order to give me a guideline on my color direction: 
  • Primary: #C3F275 (Mindaro)
  • Secondary: #ECCCF6 (Thistle)
  • Text: #F8F8F8 (Seasalt)
  • Background: #27252D (Raisin Black)
  • Accent: #E74243 (Imperial Red)


The Interface


Fig 2.0  Overview of Renewed Application Design

From previous feedbacks from my consultation with Mr Razif, areas I need to focus on is the alignment with my design style, as what I have proposed is Playful minimalism. In that case, I have focused on redesigning some of the previous designs in order to create the interface design above.  I have also tried to align with the points that I have analyzed from Task 1. 

I have tried not to be too ambitious into proposing too many pages which will overload my workflow and I might not be able to deliver what I have proposed. W

ith that, I have made 12 pages, included 4 overlays, 8 interface pages in Figma, included it with some macro and micro animation. The design consisted of 3 parts, which are:
  1. Launch:
    Launch Page, Login Page, Login Overlay, Sign Up Page, Sign Up Overlay
  2. Ticketing:
    Home Page, Event Details Page, Ticket Details Page, Payment Page, Payment Overlay
  3. Miscellaneous:
    Side Panel, My Tickets Page
Launch Pages
Fig 2.1  Launch Pages, Screenshot Overview

These will serve as the onboarding page for the user. Firstly, users will be in the Launch Page upon launching the app to determine does the user has an existing account. If not, users would need to go to the Sign Up page and greeted with a Sign Up Successful Overlay upon finishing registering. Then, users will be redirected to the Login Page, which is the same by having a Log In Successful Overlay upon logging in. After that, users will be guided to the Home Page. 

Ticketing Pages
Fig 2.2  Ticketing Pages, Screenshot Overview

Upon arrival at the Home Page, users will be able to glance through the Highlighted and Upcoming events. Once an event selection has been done, user will be redirected to the Event Details Page to understand in-detailed information about their interested event with the choice of booking the tickets. After confirming on booking, users will be guided to the Ticket Details Page with a list of prices for the tickets and enable user to select the amount of tickets they wanted. 

Then it's time to pay for the tickets in the Payment Page with a few payment methods for the user to choose and select. The sum of the ticket have also been summed up below the page. After the confirmation of payment and succeeded, an overlay will be shown as a feedback to confirm that the payment is done, users can choose to check the ticket in My Ticket Page or go back to the Home Page. 

Miscellaneous Pages
Fig 2.3  Miscellaneous Pages, Screenshot Overview

These are the pages or overlays that are part of the app. The Side Panel overlay could be access through the top left corner using the "Burger" icon. The Side Panel shows a list of pages that user can navigate to, such as the Home, Search, My Ticket, Profile, Location and Settings. Besides that, the panel can be accessed through most of the pages listed in the panel. 

User can also access the My Ticket Page via the Side or Tabs Panel and the Payment Overlay. Users are allowed to check for their pass, present or future tickets, in such that the ticket colors reflected the status of the ticket. Being that Red (Urgent), Light Green (1 week near), Light Gray (1 month near) and Dark Gray (Past used tickets). In addition, the Side and Tabs Panel is to make convenience for the user to allow them to gain easier access to certain pages in the app. 


Interaction Design Proposal
 
User & App Flow Overview



Fig 3.0  Previous and Latest Amended, User Flow

Above are the previous user flow which might have too many features that might not be able to be implemented in this assignment. Which is why to have more clarity and specific with what I am able to deliver for the final task. 

I have revised on previous user flow to amend on some parts to a new version which will be more tidy but also to show the progression done in the tasks. The new user flow featured some Gray shapes, which are the features that were proposed but could not be realized in the assignment. 

Fig 3.1  App Flow Overview

This app flow overview is an summary of how the flow of using the app for users as well as well as a quick overview of how the Macro or Micro animations in the app. It was derived from the user flow shown above, this does preview on how the interface shall look like as well as highlighting the Macro or Micro animations throughout the app. 


Fig 3.2  App Flow Overview 1

Upon entering the launch page, users will be greeted with 2 buttons to press, which are the Sign Up and Log In buttons, which will both dissolve to the next page. I have also implemented dissolve animations from and to the next on all the overlays in this app in order to standardize the animations.


Fig 3.3  App Flow Overview 2

The purple letter will be the animation to the next page and Light Blue will be to previous page, whereas orange will showing the Micro animations within the page. Micro Animations are added to the interface for interaction of the users, as well as to include very subtle animations that are able to boost the user experience of the app. 

I have tried to make sure that the Macro animations for the app will not be too subtle and too exaggerated, but something more to a natural flow. For example, the Side Panel will be expanding by sliding right out from the corner and retract by sliding left back, which will be logic to the flow of eye. 



Fig 3.4  App Flow Overview 3

The Macro animations for the ticketing pages will be more of the same, which are sliding left to next page and slide right to previous page. Some repetitive animations for the Macro animations might seem to be boring, but it can achieve consistency and standardization, without overloading the user. It is essential to show that the user has been redirected to the next page, to act as an alert and feedback. 

Micro Animation for buttons are also important to provide a feedback to user of successful activation of a button. Pressing of the ticket counter provide feedback to the user that it has added or subtracted the amount of tickets for booking. By changing the color of the button selected upon pressing, the payment method button was able to notify users that they have selected a payment method without any macro or big animation. Micro Animation is subtle to the eye but will be detail for the entirety of the interface experience. 

Plan Overview

Fig 4.0  App Plan Overview

The overall app plan laid out all the Macro and Micro animations that will be during the Onload, In App or Offload. It is to list out on the underlaying animations that drives the app interface in details and highlight the animations that will be played once the pages is loaded or offloaded. 

First one will be the Onload, in which welcomes the users to a page, it will be played once the page is loaded. Elements of the page would be introduced to the users by transitioning into the page using animations such as dissolving or sliding in. Animations added for onloading will be to add another layer to the responsiveness of the app as well as making sure that it is not too flat or boring. 

On the other hand, In App stage will be playing animations in a certain page that was onloaded. User will get to interact with the elements in the page like pressing a button, drag a section and so on. Some in app animation will be served as a way to elevate the user experience as well as providing feedback to the users. 

Then, the Offload stage will be a bridge for departure to another page. It will be redirecting users to another page to carry out a certain task or to display some messages. A clean transition between an offloading and onloading page is important to bridge the gap in between the page for a better connection and coherence of the entire interface. 

Fig 4.1  Launch Page Description, App Plan

Fig 4.2  Sign Up Page Description, App Plan

Fig 4.3  Sign Up Confirmation Overlay Description, App Plan

Fig 4.4  Login Page Description, App Plan Fig 
4.5  Login Confirmation Overlay Description, App Plan

Fig 4.6  Home Page Description, App Plan
 4.7  Side Panel Overlay Description, App Plan

Fig 4.8  Event Details Page Description, App Plan

Fig 4.9  Ticket Details Page Description, App Plan

Fig 4.10  My Ticket Page Description, App Plan

Fig 4.11  Payment Page Description, App Plan

4.12  Payment Confirmation Overlay Description, App Plan

Summarized contents above:
  • Onload Stage:
    • Welcomes users with animations to a page
    • Introduces page elements with animations.
    • Improves responsiveness and avoids a flat user experience.
  • In-App Stage:
    • Enable users to interact with the functions in a page
    • Uses animations for user interactions (button press, drag, etc.).
    • Enhances user experience and provides feedback.
  • Offload Stage:
    • Bridge for departure to another page.
    • Manages animations when transitioning to another page.
    • Creates a smooth bridge between onloading and offloading pages.
    • Maintains overall coherence of the interface.

Animations


5.0  Login and Sign Up Page Animation, Animation
  • Macro Animation:
    • Page Name and description slide right from left
    • Form filling section slide down from the top
    • Sign Up and Log In button slide up from below

5.1  Home Page Animation, Animation
  • Macro Animation:
    • Highlighted event section remain at same position
    • Top panel  and Upcoming Events slide down from the top
    • "Upcoming" word slide right from left
  • Micro Animation:
    • Drag Highlighted event left or right to show next event 
    • Click on round buttons below Highlighted event to move section to the next one


5.2  Event Details Page Animation, Animation
  • Macro Animation:
    • Event Poster remain at same position
    • Back button slide left from right
    • Book Now button slide up from below
    • Other Elements slide down from top

5.3  Ticket Details Page Animation, Animation
  • Macro Animation:
    • Event Detail Section remain at same position
    • Back button slide left from right
    • Book Now button slide up from below
    • Other Elements slide down from top
  • Micro Animation:
    • Click on (-) or (+) buttons to increase or decrease ticket counter number
    • When pressing (-) or (+) buttons it will become smaller and darker in color 


5.4  Payment Page Animation, Animation
  • Macro Animation:
    • "Billing" letter remain at same position
    • Payment button slide up from below
    • Other Elements slide down from top
  • Micro Animation:
    • Click on Radio button or the payment method button and change to pink color once selected
    • Hollow circle turns into a tick once selected


5.4  My Ticket Animation, Animation
  • Macro Animation:
    • Tabs panel remain at same position
    • The tickets slide up from below
    • Other Elements slide down from top
  • Micro Animation:
    • Ticket will expand for preview once clicked, other tickets will be compressed closer
    • Click "X" button to retract the tickets back to original positions 
    • Switch to other tickets while previewing current ticket by clicking on other tickets

5.5  Side Panel, Animation
  • Macro Animation:
    • Panel Slide right from left to when requested
    • Panel Slide left from right to retract with the current page when going to listed pages in panel or just


6.0  Overview of Prototype, Figma


6.1  Prototype Components, Figma

Future Actions

The next course of action is to of course start the coding of the mobile application as soon as possible. This is to make sure that I could have a great overlook on whether the projected designs are able to be transferred to coding languages or should be altered or modified into something similar to what was proposed. 

Next, I should also reconsider changing and modify the current animations as there isn't much micro animations happening in the app. In another words the app does not look too responsive and looked stiff. I would not like to jinx on it, but I'm afraid that I might also required to modify some of the elements and design, as I have a hunch that the codes might not be compatible with what I expected.

Final Submissions



7.0  User & App Flow with Plan Overview, FigJam


7.1  Overview of Prototype, Figma


7.2  Video Presentation, YouTube


 
Feedbacks

Week 10
  • Make sure that the design style is align with what you have proposed as playful minimalism


Reflections

This assignment has refresh my memories and skills on using Figma, some parts such as components would needed some tweaking and improvements. Besides that, I also found out that this task has laid a good foundation of emphasizing the importance of Micro and Macro animations in an interface, as a little movement in the app would able to elevate the user experience. I have spotted some of flaws and weaknesses that was in my interface design, I hope that I will be able to make good amendments to it in order to strengthen the interface design. Meanwhile, animations of this app would need to be improved or added as some parts might not have look too lively and be too flat for the user. Lastly, the progress that I have made till now is far yet from what I expected, I needed to be mindful that the calm in a storm is never a good sign of progress, meaning I would need to keep up.