Working prototypes to capture feedback closer to a real product
AncestryDNA Learn The Basics Paging Animation
Learn The Basics
I partnered with the designer on the DNA traits team who started designing these swiper screens with simple, but intriguing line art, I saw an opportunity to open the doors to using Lottie framework within the actual product. The end result told a visual story on DNA traits through a user controlled gesture animation.
Responsible for:
Motion design in After Effects using Lottie Framework
Swift & Java programming for iOS & Android
I worked with her to simplify and translate her line work from Sketch to Adobe Illustrator and also recreated existing illustrations that had been broken apart.
I started animating what I thought was the most difficult of the screens to animate, and from there continued creating really cohesive and relatable transitions between each screen, a task that proved difficult but ultimately proved its value as none of the screens were initially set up for it. As I created and ran into issues, the designer and I worked together to find solutions between the artwork transitions.
The“storyboards”
As the animation reached a state close to completion, I jumped into code to deliver proof of concept code along with assets that native app developers on both platforms could use and learn from. I also worked to make sure the animations worked on all versions of targeted OS platforms and various mobile device screen sizes. Once shipped, the web team was inspired to get this into their platform as well and worked to release a version in the following month.
Within the next few months we went on to release a branded animated launch screen for our mobile apps and a congratulatory screen that produced animated confetti for our DNA Traits beta testers.
Ancestry Vision Prototype
Swift Vision Prototype
Produced as a walk-thru of the 2017 Ancestry Vision prototype. This was a necessary deliverable to help support the product org’s vision direction. It was uploaded to the App Store Test Flight for download. Stakeholders included executive level, legal, and members of the board. Download was also made available to our user research team to get feedback from actual users and validate ideas.
Responsible for:
Complete Swift programming
Motion design in After Effects using Lottie Framework
Custom transition and gesture actions
Production and delivery to Test Flight
I used this project as a way of introducing Lottie Animation Framework to Ancestry for proof of concept. And while it did not make it into our products for a year, I was able to have a working version ready to work with the mobile developers.
Presentation to inspire the vision - Hope you like Odesza!
Working with a team of two UX designers, a design lead, and the AncestryDNA director of design, I worked to create a video presentation that was showcased at our Product & Technology offsite to the entire product and tech teams. This video was part of the strategy to show a future direction for a complete and unified Ancestry experience.
Responsible for:
Complete UI motion design and animation
Motion graphics and video transitions
Story-telling
Video production, export, and set up
I worked with static screens produced by the designers and helped influence and advocated for motion within the UI.
Working prototypes to capture feedback closer to a real product
AncestryDNA Learn The Basics Paging Animation
Ancestry Vision Prototype
Ancestry Vision Video Presentation