APP DESIGN II - TASK 2 INTERACTION DESIGN PROPOSAL

21/10/2024 - 12/11/2024 (Week 5 to Week 8)

Siti Zara Sophia Binti Mohammad Reeza (0359881)

Bachelor of Interactive Spatial Design (Honours)

Task 2 - Interaction Design Proposal

INSTRUCTIONS

FLOWCHART

The below is my updated app flowchart featuring my redefined designs and additional pages in! It remained largely the same (excluding the addition of the onboarding pages) but I decided it would be easier to view and visualise if it were formatted using the actual designs!

MASTERPLAN & STORYBOARD

We were tasked with finishing a few task flows so I chose my registration and homepage task flows which includes:

Sign In/Log In
Registering account details
Onboarding Pages
Homepage
User Profile
User Profile - Menu
Menu

I wasn't very sure how to do the animations (especially more detailed features like choosing which Animation speed or type was right for the app) so I followed a few tutorials available on Youtube to help guide me on how to do them! The videos I used are listed below:

The below are my planned microinteractions and macrointeractions for this task flow:

INTERACTIONS BREAKDOWN

https://www.figma.com/design/18PaA7Ew9crjbkIVrvJrUY/Hypnos-HiFi-Redesign?node-id=0-1&t=JWHcZR3ceyOwhb4e-1

Based on what I laid out in the previous sections, let's breakdown the microinteractions and macrointeractions I used in detail.

All Protype Interactions

Landing Page & Registration

When you click either log in or sign up, it will take you directly to the account registration page when you click on the button. Other than that, no additional micro or macrointeractions were used.

Onboarding

Each onboarding page features the following:

Text that will pop up larger after a delay
Pages that will fade into the next onboarding pages after you drag left

The exemption is the final page of the onboarding page where:

After a delay, it will fade into the homepage

Homepage

This is the homepage! It features a few key microinteractions that I believe make the app a bit more fun and engaging for the user while still keeping it calm enough to adhere to Hypnos being a sleep app.

It features the following:

Horizontal scroll carousel interaction when you drag left (and right when done vice versa)
The menu icon, user profile border, tick and the status text will all fade in after a delay

The navigation buttons will:

Menu button will slide down to 'Menu" when clicked
User Profile button will fade in 'User Profile' when clicked

User Profiles

Here are the user profile microinteractions! I added a lot of them here to make it a more interesting and dynamic experience for the user.

The top arrow button will:

Fade into 'Homepage' when clicked

The profile picture:

When hovering, a white cast and a pink plus sign will appear over the image, indicating a 'change image here' option to the users

The menu arrow button:

When hovering, will fade into a white arrow

The 'Log Out' button:

Will fade into the Landing Page (Sign up/Log in) when clicked

Menu

The menu search bar:

Search icon and microphone icon will bounce into a bigger size after a delay
"Search Bar" text will fade in, making it more opaque after a delay

The menu options:

Images will instantly become more opaque, text will become less visible and slightly bounce when hovering over option

PROTOTYPE

https://www.figma.com/proto/18PaA7Ew9crjbkIVrvJrUY/Hypnos-HiFi-Redesign?node-id=49-537&node-type=canvas&t=gGrma9bqu3yHnwnS-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=49%3A537

YOUTUBE

Siti Zara Sophia Binti Mohammad Reeza (0359881)

Search This Blog

APP DESIGN II - TASK 2 INTERACTION DESIGN PROPOSAL

Comments

Post a Comment