Graphic and Motion Designer – UX/UI
We developed and constantly evolved the strategy for social media marketing while I was at Hiyoume. Through a fast-paced ideation, user research, testing, and growth process, we landed on a video only approach for Instagram.
Designed with After Effects and Figma to showcase the Hiyoume app within the App Store.
This design was later changed to design seen in App Store (shown above) - it was changed create more contrast in each slide between the iPhone screen UI and the background, and also align with an evolving brand identity and design system. This design was build to integrate video into App Store previews.
These are graphic designs for social media marketing. These designs we all posted to social media and increased brand interaction on Instagram. The posts concepts were designed according to trends, current events, or just to promote the brand's message, e.g. 'cuffing season', Christmas holidays, mental health. All designs are build in Figma. They were later archived when we decided to move to video-only marketing and only use reals for social media marketing.
Post-production video edit and graphic video of an in-house video shoot I was assistant director for at Hiyoume, and used for social media marketing. Built using After Effects and Figma.
A 'mental health' instagram post I created that integrated motion. Designed in Figma and animated in After Effects.
Instagram post created with Figma, Illustrator and After-Effects
This was created using Figma, After Effects, and Wix. I designed and created the video embedded in the website and designed the website using Figma. It is meant to be a simple landing page that sparked users interest and moves users directly to the App Store to download the app.
%20Website%20Prototype.png)
This was the first iteration of the website. A much more expressive design made to be more fun. The middle phone screen would be a video in this prototype. This was later parred down by request of the marketing manager to simpler landing page.
Hiyoume App Launch Screen Animation
This was built using Illustrator, Figma and After Effects, and then exported into Lottie format to integrate into app development in the engineering side. I first created a prototype within Figma to show and explain my design. After approval of proof of concept, I deconstructed the logo (the rose) into 13 individual vector pieces within illustrator, slicing the pieces out of one static image to create usable scalable vector images. Then I took those pieces and animated them with extremely fine detail to move all individually but together to create a "blooming rose" effect. This involved making individual movement paths with precice keyframes for each piece, some with 3D animation, and having them land in the perfect spot as the logo comes together. Then I made the transition into the Home Screen of the app look completely seamless.
Preview of the finished launch screen animation project in After Effects
Here you get a sense of the complexity of the project, and how finely tuned each element within the animation had to be. There are many layers and parts that had to be made individually but made to work seemlessly with each other. The animation also had to be very fast witch added a degree of difficulty when making each part animate so precisely. It was such an interesting project and I gained a ton of knowledge about After Effects from it.
Motion graphics made for in-app experiences, and UI elements.
