Cravy Dark Mode
Overview
The goal of this project was to take the MVP version of the CRAVY app and give it a visual overhaul, using Dark UI design characteristics, thus improving the contrast and style, and adding skeuomorphism where possible to stay current with modern UI trends. I also used Figma animations to create a working prototype of the new design.
FILTER PAGE
RESTAURANT PAGE
HOME PAGE
LIKES PAGE
Animations were created in Figma for each of the interactive components in the design. I had to use a combination of component sets as well as overlay modals and timed delays, to create realistic, smooth-looking animations for page transitions and interactive elements. I also created a unique loading animation for the app using elements of the Cravy logo.
Figma Animations
Creating Animations
SEE MORE BELOW
CRAVY Animation Breakdowns
SKEUOMORPHIC CONTROLS
With the filters page, I knew I wanted to incorporate a skeuomorphic element somewhere, and the “Deals only” toggle switch was the perfect candidate. Creating this design was super fun and I felt inspired by the design team at Airbnb to create one element on the page that stands out against the rest. I loved how the final product turned out after animating the toggle component.
CRAVY LOADING ICON
As soon as I decided to animate my new designs in Figma, I knew I wanted to create a unique loading icon. I think custom loading icons always add a certain level of delight for users, and makes the whole digital experience feel more cohesive as a product. The Cravy icon was super fun to play with, and the little food balls In the ball were the perfect element to give some life too. The concept was simple: make the bowl spring upwards to launch the food into the air, and loop.
RESTAURANT PAGE
With the restaurant page, something key I wanted to add was the modal experience for users who click the “call” button. It was a matter of creating a modal that replicated the native iOS experience, and having it push upwards from the bottom of the screen once the Call button was tapped. That was a fun one to create, and it mimics the real product’s experience as well.
SCROLLING
I used two different scrolling styles for this project. The CRAVY home page uses a parallax-style scrolling effect which I animated using smart animations, and the Liked Restaurants page uses a standard scrolling option for users browsing through their list of saved restaurants. I chose to go with a parallax scroll effect for the home page to give it more of a “Tiktok” feel, and to ensure each restaurant card is given proper focus.