Daily Creative Challenge
Introduction
I created a collection of projects inspired by XD Daily Creative Challenges and an exploration of UX/UI design trends to grow my design knowledge and get inspired. Below you’ll see problems and their design solutions for each project.
As I grew my technical skills through this disciplined, self-initiated work, I also pushed my conceptual thinking forward by researching and experimenting with new tools and ideas I had no knowledge of. I had a lot of fun and learned a lot by building this ever-growing collection!
Table of Contents
Parallax Scroll / Augmented Reality / Neuomorphism / Micro Interactions / 3D Flip / Glassmorphism / Slide - Out Menu / Interactive Map / Emoji Sticker Animation
Parallax Scroll
Portfolio Site
• Problem: Many portfolio sites are static, used merely as a medium to host one’s work.
• Solution: Incorporate parallax scroll effects and animated visuals to a designer's portfolio site so that the site itself is an additional means for showcasing talent. Delight the users with rotating elements, changes in object/text scale, and scroll reveal elements to create depth with fun, unexpected animations. These site upgrades could create more impressive and engaging experiences for their viewers which could land them more work.
Augmented Reality
AR Interior Decor Experience
• Problem: Furnishing an apartment can be risky and difficult without seeing the items in your space before purchasing. (I recently moved and experienced this struggle first hand, which inspired this project.)
• Solution: Design and prototype an augmented reality experience using 3D Transforms that gives users more confidence in their decor decisions and purchases.
Animated Landing Page
End of Year Sale
• Problem: Supplied wants to create a special experience for its users to celebrate its annual end of year sale, which boasts significantly higher discounts than normal.
• Solution: Design an engaging, delightful experience that promotes its sale and gets customers excited to capitalize on savings.
Neumorphism
Smart Home Display
• Problem: Decentralized information and home controls can waste a lot of time as a user jumps from one app to another.
• Solution: Experiment with the neuomorphism* trend to create a display that centralizes the most helpful, relevant information/controls that a user might need to start the day.
*To account for some of neuomorphism's accessibility issues, I colored the play/pause button and used bright, bold colors to add contrast.
Micro Interactions
Tab Bar
• Problem: Static tab bars are a missed opportunity to engage users.
• Solution: Design an experience that uses micro interactions and subtle animations to delight the users and elicit joy.
Card Flip x Glassmorphism
Credit Card Animation
• Problem: Credit cards can be boring to look at.
• Solution: Create a card flip animation using 3D Transforms and Auto-Animate. Make a colorful, blurred background and translucent card so the card really stands out.
Slide Out Menu
Data Analytics Menu
• Problem: Being overwhelmed with data slows productivity and can lead to mistakes.
• Solution: Design and prototype a slide-out menu to help a user quickly and clearly jump between sets of data. Use Component States and micro interactions to help highlight a user's location within the experience.
Interactive Map
Friend Finder App
• Problem: A group of friends has plans to meet for lunch, but their reservation only has a 15-minute grace period. Three of the seven friends will arrive on time, while the others frantically text their group chat about their ETAs and locations, which are hard to simultaneously track.
• Solution: Design and prototype an interactive map using Scroll Groups to identify friends' locations in real time.
3D Flip
Social Media Stories
• Problem: Humans have an innate desire to connect with one another and share their experiences and need a platform that allows them to do that.
• Solution: Design a stories experience using 3D Transforms to navigate between images while users discover their friends' content.
Reading Tracker
• Problem: People want to know how far along they are in their books, while also easily accessing subsequent pages.
• Solution: Design an E-reader experience that tracks users’ reading progress using the 3D Transforms tool to create a page-flip animation. Use auto animate to simulate reading a book in actuality.
Emoji Sticker Animation
Video Chat App
• Problem: Video chat experiences can often be too simplistic in functionality without much added engagement beyond seeing people's faces.
• Solution: Design and prototype a video chat experience where users can add stickers and emojis on screen using auto animate to bring these micro-interactions to life.