Ancestry motion design & prototypes
Working with code to produce interactive experiences
Role
UX Prototyper, motion designer
At Ancestry, I brought mobile prototypes to real working products that could give us feedback on micro-interactions and logical flows. I was also able to use coding abilities to enhance simple screens into delightful experiences.
Producing actual working prototypes helped the UX team understand what a feature may feel like when launched, get more relevant feedback from user research, or give an experience to leadership in hand that could be presented across the company without spending much on resources to produce.
Learn the basics
I partnered with a designer on the DNA traits team who started designing screens for a paginated onboarding experience with simple but intriguing line art. I saw an opportunity to improve the experience and use Lottie framework within the actual product. The end result told a visual story on DNA traits through a user controlled gesture animation.
Learn the basics screens illustrations and screens
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.
Lots and lots of layers in Adobe After Effects
I worked backwards from the most difficult of the screens to animate, using this as a basis for creating really cohesive and relatable transitions between each screen.
This 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.
As the animation reached a state close to completion, I worked in Xcode to deliver proof of concept code along with assets that the developers on both iOS and Android 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.
Support across all platforms
Once shipped, the web team was inspired to get this into the desktop-web platform as well. They were able to use the code-base with minimal effort on their end.
The web version using the same JSON code produced in Lottie.
Spinners and launch screens
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.
Launch screen and spinners that were used in the AncestryDNA product.
Responsible for:
Motion design in After Effects using Lottie Framework
Swift & Java programming for iOS & Android
Ancestry 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.
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.
Responsible for:
Complete Swift programming
Motion design in After Effects using Lottie Framework
Custom transition and gesture actions
Production and delivery to Test Flight
Ancestry Vision Video Presentation
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
We’re Related Stories
The team on the We’re Related product line was looking to encourage more user engagement with a way to bring live stories from users. They needed something that could actually capture real user data and give a true native experience using the device camera to capture video. I took to task and created a native prototype.
Responsible for:
UX microinteractions
Swift programming
AV capture in iOS
Motion design and gestures
Multi-screen development using auto layout
Production and delivery to Test Flight