Design and Prototyping in Adobe XD

UI/Interaction Design

All prototypes below are designed and prototyped from scratch in Adobe XD. I challenged myself to find popular apps and recreate their most detailed interactions from scratch. All elements below are created by me.









Instagram Live

Designed and prototyped Instagram Live from scratch in Adobe XD. I used auto-animate and time interactivity to achieve this result.







Spotify (General)

I use Spotify often to listen to music and have enjoyed the user experience on their mobile app. I used auto-animate and drag interactivity to achieve this result.







Spotify (Search)

Searching on Spotify's mobile app is easy; however, some improvement when a user clicks the search bar could be made. I used auto-animate and drag interactivity to achieve this result.







Beats (Product Page)

Beats headphones have a unique design that designing a product info page for purchasing these headphones was a unique challenge where I placed emphasis on the product itself. I used auto-animate and drag interactivity to achieve this result.







Trending Albums

I designed an iOS style music player, focusing on different interactions for scrolling through albums. I used auto-animate and tap interactivity to achieve this result.







YouTube (Video Slider)

One of the great enhancements YouTube has added to its mobile application is suggested videos as a slider over the video a user is watching in full screen. A user can swipe up and drag the video list left to right. I used drag interactivity to achieve this result.







YouTube (Comments)

One of the main areas I think YouTube should improve with their mobile app is adding a comment. Currently, this is a poor user experience and is met with many UI and UX issues. I designed and prototyped a new way to add a comment on YouTube from scratch in Adobe XD. I used auto-animate and time interactivity to achieve this result.







Browse Notes

Design and interaction of a mobile notes app. This prototype shows a user deleting a note from the app. I used drag and time triggers, in addition to auto-animate to achieve this result.







Photo Editing App

I designed a photo editing app that focuses on the essential functionality a photo editing app should have. I used auto-animate and drag interactivity to achieve this result.







Photo Spots

I enjoy photography and research photo spots before I travel. This app lets users select any location in the world and view photo spots in the app. I used auto-animate and tap/drag interactivity to achieve this result.







Instagram Stories

Instagram stories uses a diverse set of interactions to achieve its functionality. I designed and prototyped Instagram stories from scratch in Adobe XD by using auto-animate, time triggers and tap interactivity to achieve this result.







Service Discovery

An app where users can find any needed service and see who's available nearest to their location. I used auto-animate and tap interactivity to achieve this result.







My Tasks

An app where users can add and edit tasks. I used auto-animate and drag interactivity to achieve this result.







Light/Dark Mode

Light and dark mode for a photo sharing app. I used auto-animate and tap interactivity to achieve this result.







Travlr (Onboarding)

Travlr is an app I created to easily sort through potential travel destinations. It uses Tinder's interaction of swipe left/right. The video below is the onboarding/initial splashscreen users will see when first using Travlr. I used auto-animate and tap interactivity to achieve this result.






Travlr

Travlr is an app I created to easily sort through potential travel destinations. It uses Tinder's interaction of swipe left/right. I used auto-animate and drag interactivity to achieve this result.







Refresh Animation

Refresh animation for a photo collection app. I used auto-animate and drag interactivity to achieve this result.







Like Animation

Like animation for a social media app. I used auto-animate and tap interactivity to achieve this result.