Directory is a workplace app that helps onboard new employees. It’s part of a suite of apps developed by HR Cloud- a human resources enterprise SaaS company.
My original role was at first an animator. I worked with one other visual designer to redefine the brand through animations to evoke more empathy and approachability to our products. Eventually my role expanded to be a part of the product and design team as a Motion Designer.
Directory is an app that lets you 'put a face to the name.' It connects employees together and reinforces company culture and team building. For its marketing campaign, I wanted to visually show the effect Directory can have in the workplace culture.
The video illustrates the app's features and ability to eliminate the common pain point of not knowing anyone, especially your direct team.
We carried the playful animations into the onboarding component. It was a delightful moment we wanted to make sure the users have as their first impression.
The animations were mocked up in AfterEffects first before exporting it for Xcode.
During the development of this project, I realized the value in knowing how to code. My animated mockups were not necessarily the best way to communicate with developers.
Using the interaction prototyping tool, Framer, I quickly immersed myself in learning coffeescript. Translating my animations from AfterEffects to Framer helped me communicate how each interaction should be handled.
This led to an improvement to the app's transitions and timing.
This was a prototype to encourage users to invite more of their colleagues. As the user invites more friends, the mascot on top will act as your cheerleader.
This was important because for the first time, my animations had an interactive component. I realized I could leverage my animations not only to surprise and delight, but to influence a behavior and action.
The design team loved the pitch and it got implemented. In the end, we saw this design lead to a 20% increase in user invites.