We are required to develop a comprehensive interaction design
plan for their final web-based mobile application, including detailed
wireframes, user flow diagrams, and prototypes of both micro and
macro animations. The goal is to visually and conceptually prepare the
interaction design and animations that will enhance the user experience
of their application.
Onloading the app: Loading Screen Animation
Fig.1.1: Cara Logo Animation First Attempt
to start off, i began working on the onloading screen. As soon as the app is opened, a logo animation appears, and it prompts you to 'get started' to the app, leading you to the log-in page.
Fig.1.0: Animating on Adobe Xd
After doing my first draft at the onboarding screen animation, I noticed I had something missing. Apart from the logo animation, I didn't have the onboarding screens that introduce the app's features. Thus, I added those pages in, and redesigned the onboarding screens. Below is a gif of the logo animation.
Fig.1.2: Cara Onboarding Animation
1. Wire Flow
After i've animated the logo, i exported the main screens from adobe Xd to fig jam board and started the wire flow. I separated the flows into 3 main flows. Creating a Post flow, Joining a Community flow, and Applying for a job flows.
Flow 1: Onboarding -> Login -> Home Page -> Create a Post
I did the wire-flow based on the older app prototype, which is why I had to end up revising it and doing some slight changes by adding the new screens. Below are the figures of the older draft versions.
Fig.1.2: Wire Flow 1-1: Onboarding to Home page
Fig.1.3: Wire Flow 1-2: Home page to Sharing a Post
After i've made my changes, I imported the new screens to FigJam and updated the wire-flow accordingly. Below, are the finalized versions of the first flow.
Fig.1.4: Wire Flow 1-1: Home page to Sharing a Post (Updated)
Fig.1.3: Wire Flow 1-2: Home page to Sharing a Post (Updated)
Flow 2: Home Page -> Community Tab -> Join a Community
Fig.1.4: Wire Flow 2: Home page to Joining a Community
Fig.1.5: Wire Flow 3-1: Explore Page to Sending a Job Application
Fig.1.5: Wire Flow 3-2: Explore Page to Sending a Job Application
2. Masterplan
In the masterplan, it includes a more in-depth, detailed interaction plan of each screen. It includes the three stages of every page: onloading, in-app microinteractions, and offloading.
Fig.1.6: Masterplan Flow 1-1
Fig.1.7: Masterplan Flow 1-2
Fig.1.8: Masterplan Flow 2
Fig.1.9: Masterplan Flow 3
2. Prototyping
After planning all the interactions within the screen, I now get to put it in practice by prototyping the animations on adobe Xd. That includes micointeractions, microanimations, screen transitions, window pop-ups, etc.
Fig.1.10: Prototyping on Adobe Xd -Onboarding Screens
Fig.1.11: Prototyping on Adobe Xd -Creating a Post Screens
Fig.1.12: Prototyping on Adobe Xd -Joining a Community Screens
Fig.1.13: Prototyping on Adobe Xd -Applying for Jobs Screens
Working on the interaction design plan for my final mobile app project was quite challenging (primarily due to my fault cause of lack of proper time-management). Starting with the onloading screen, I jumped straight into Adobe XD and animated the logo. At first, it felt like I was on the right track, but then I realized something was missing. I had completely forgotten about the onboarding screens that introduce users to the app’s key features. So, back to the drawing board I went and added the onboarding screens, redesigned them to match the visual tone, and made sure they flowed smoothly from the logo animation.
From there, I moved into mapping the user flows on FigJam. I created three main flows: creating a post, joining a community, and applying for a job. At first, I based the flows on an older prototype without realizing some screens had changed. That caused a bit of confusion and meant extra time revising and updating everything.
Finally, I moved into prototyping animations and microinteractions in Xd. This was probably the most rewarding part. I got to bring all those earlier planning stages to life—adding screen transitions, pop-ups, hover states, and all the small details that make the app feel polished. It made me appreciate how much effort goes into the things users don’t always consciously notice. There were a few drawbacks and revisions along the way, but it helped me build more confidence knowing that i'm able to get things done if i put my mind into it.
Comments
Post a Comment