Yextension
Yextension
Yextension
Yextension
Project Vision
Project Vision
Pages is a SaaS product that directly integrates with other product interfaces used by Yext's customer base.
When our team transitioned Page's base files from Sketch to Figma in the winter of 2021, essential components were broken and lost. I helped spearhead an initiative on the team to help resurrect lost elements, as well as elevate the product's potential by adding essential upgrades, elevating the fidelity of the base product.
Pages is a SaaS product that directly integrates with other product interfaces used by Yext's customer base.
When our team transitioned Page's base files from Sketch to Figma in the winter of 2021, essential components were broken and lost. I helped spearhead an initiative on the team to help resurrect lost elements, as well as elevate the product's potential by adding essential upgrades, elevating the fidelity of the base product.
Responsibilities
Responsibilities
1. Elevate static mockups with native motion graphics
2. Build new competitive features into base files
3. Update our base files in tandem with developers’ code libraries
1. Elevate static mockups with native motion graphics
2. Build new competitive features into base files
3. Update our base files in tandem with developers’ code libraries
My Role
My Role
UX/UI Generalist
UX/UI Generalist
Tools Used
Tools Used
Figma
Figma
THE GOAL
To apply native motions graphics to Page's files via Figma prototyping.
To apply native motions graphics to Page's files via Figma prototyping.
To apply native motions graphics to Page's files via Figma prototyping.
Ideation & Exploration
Ideation & Exploration
Ideation & Exploration
Ideation & Exploration
The foundation for any successful project is building a road to the finish line. To launch this project with the wider team we came together to discuss our goals and expectations. Using Figjam as our vision board, we documented our ideas and discussions. We wanted to find ways to make our experimentation with Smart Animate useful. We identified a few areas of opportunity that would immediately enhance our files.
The foundation for any successful project is building a road to the finish line. To launch this project with the wider team we came together to discuss our goals and expectations. Using Figjam as our vision board, we documented our ideas and discussions. We wanted to find ways to make our experimentation with Smart Animate useful. We identified a few areas of opportunity that would immediately enhance our files.
Shortly after our planning meeting I wanted to provide us a space to document our findings. I created a template for us to begin building our motion graphics in – encouraging teammates to document their process to share back to the group. This template provided a synchronized structure to our exploration so that we could focus all of our attention on our individual tasks.
The team had made a lot of discoveries along the way that expanded our original impression of this project. Using the shared knowledge acquired, we created an additional action plan to add our animation work to our starter files and find a way to organize the new features in a way that is easy to use and add to our client work.
At this stage we made sure to loop in our development team. Whatever decision the design team makes tends to have a higher impact on development. We met with some developers to gain their input. To make sure that our decisions weren't negatively impacting development, we made sure that our default interactive data matched the values used in consulting's base code. We also tested sharing files across teams and discovered natives ways development could use Figma files to find relevant motion data. This would make file handoff across teams easier than expected!
Shortly after our planning meeting I wanted to provide us a space to document our findings. I created a template for us to begin building our motion graphics in – encouraging teammates to document their process to share back to the group. This template provided a synchronized structure to our exploration so that we could focus all of our attention on our individual tasks.
The team had made a lot of discoveries along the way that expanded our original impression of this project. Using the shared knowledge acquired, we created an additional action plan to add our animation work to our starter files and find a way to organize the new features in a way that is easy to use and add to our client work.
At this stage we made sure to loop in our development team. Whatever decision the design team makes tends to have a higher impact on development. We met with some developers to gain their input. To make sure that our decisions weren't negatively impacting development, we made sure that our default interactive data matched the values used in consulting's base code. We also tested sharing files across teams and discovered natives ways development could use Figma files to find relevant motion data. This would make file handoff across teams easier than expected!
Adding Native Motion Graphics
Adding Native Motion Graphics
Adding Native Motion Graphics
Adding Native Motion Graphics
I took some time and used Figma’s native prototyping tools to add all the necessary noodles. This included buttons, links, and other UI elements. By linking these elements, all future implementations would have motions graphics fully integrated. This heightened our fidelity from static designs to interactive mockups. Below is an example of a client project based in Figma, displaying interactions similar to the live experience.
I took some time and used Figma’s native prototyping tools to add all the necessary noodles. This included buttons, links, and other UI elements. By linking these elements, all future implementations would have motions graphics fully integrated. This heightened our fidelity from static designs to interactive mockups. Below is an example of a client project based in Figma, displaying interactions similar to the live experience.
I took some time and used Figma’s native prototyping tools to add all the necessary noodles. This included buttons, links, and other UI elements. By linking these elements, all future implementations would have motions graphics fully integrated. This heightened our fidelity from static designs to interactive mockups. Below is an example of a client project based in Figma, displaying interactions similar to the live experience.
I took some time and used Figma’s native prototyping tools to add all the necessary noodles. This included buttons, links, and other UI elements. By linking these elements, all future implementations would have motions graphics fully integrated. This heightened our fidelity from static designs to interactive mockups. Below is an example of a client project based in Figma, displaying interactions similar to the live experience.
Competitive Analysis
Competitive Analysis
Competitive Analysis
Competitive Analysis
I used some user research templates that I made previously to better understand how our client’s audiences were using our pages. Thankfully we already had a growing list of competitors from previous projects, giving me the ability analyze different industries. Competitor sites featured a variety of sections that didn’t exist in our base files for Pages.
This analysis lead to the inclusion of new UI layouts, additional features like carousels and testimonial sections, and other inclusions that improved our base file libraries.
I used some user research templates that I made previously to better understand how our client’s audiences were using our pages. Thankfully we already had a growing list of competitors from previous projects, giving me the ability analyze different industries. Competitor sites featured a variety of sections that didn’t exist in our base files for Pages.
This analysis lead to the inclusion of new UI layouts, additional features like carousels and testimonial sections, and other inclusions that improved our base file libraries.
I used some user research templates that I made previously to better understand how our client’s audiences were using our pages. Thankfully we already had a growing list of competitors from previous projects, giving me the ability analyze different industries. Competitor sites featured a variety of sections that didn’t exist in our base files for Pages.
This analysis lead to the inclusion of new UI layouts, additional features like carousels and testimonial sections, and other inclusions that improved our base file libraries.
I used some user research templates that I made previously to better understand how our client’s audiences were using our pages. Thankfully we already had a growing list of competitors from previous projects, giving me the ability analyze different industries. Competitor sites featured a variety of sections that didn’t exist in our base files for Pages.
This analysis lead to the inclusion of new UI layouts, additional features like carousels and testimonial sections, and other inclusions that improved our base file libraries.
Impact
Page's base files are now fully prototyped – allowing designers to build designs that are as close to high-fidelity as possible with our base templates. The additional sections also allow for quick ideation and exploration.
These inclusions rose our team's efficiency and output by 33%, allowing us to get more done in same amount of time.
What I learned
Planning and preparation aren’t a bad thing, but diving head first into a project is sometimes the only way to figure out everything. As long as you can keep track of what you’re doing and why, you can gain a lot from tinkering around.
Made with love by Kev Schoenblum
Made with love by Kev Schoenblum
Want to work together? Reach out! I'd be happy to learn more.
Want to work together? Reach out! I'd be happy to learn more.
Want to work together? Reach out! I'd be happy to learn more.
