The Problem
In 2017, Salesforce had started implementing animations into its products. My project was to research what designers and developers would look for in terms of guidance from the Lightning Design System and design a section of the website to meet their needs. Along the way, I went through several design iterations, and implemented the page in React.
The Research
I began by conducting guerrilla research with my team, heading down to the Salesforce coffee shop and offering donuts in return for a quick survey. I was pleasantly surprised with how successful it was and how much information I got from the activity. It was a good reminder that research doesn’t have to be a formal affair to get huge benefits.
It quickly became clear that the Lightning Design System website was where both designers and developers would look first to find guidelines and examples. I also explored what to title the section: I originally started with the term "Motion" but, due to the results of the survey, moved towards “Animation,” which was more all-encompassing and had less negative connotations for my demographic. My research told us that our developers wanted code, so I kept that in mind as I designed.
The Design
My design started on a whiteboard as I worked through the major moving parts with my manager. I shared my design with my coworkers who helped me uncover problems early on, and as the critiques became more nitpicky I knew it was time to move to a higher fidelity mockup. I chose to use Adobe XD because it allowed me to share my high fidelity design with my coworkers, which became a crucial aspect of my testing strategy moving forward. I found the feedback I got from an interactive mockup was of much higher quality than if I just showed a static design. This was invaluable moving forward; I made several more iterations as I gathered feedback from my coworkers and other designers outside my team.
The Development
After settling on a final design, it was time to implement it with React. I took advantage of create-react-app to maximize my time coding. This was my first time with React, but thanks to the tireless mentorship from my coworkers, I quickly developed the prototype and implemented all the features discussed in my design crits. Next, I presented it to my team’s accessibility specialist and asked for his feedback.
Crisis! He didn't understand the layout, which made sense to my coworkers who iterated with me, but not to someone new to the project. I’m grateful for his candid feedback; after looking at the design with fresh eyes, I was able to redesign the hierarchy with clarity in mind. After approving the new design with my manager, I worked with the UX engineers on the Lightning Design System team to port my code to their website. Thanks to the solid foundations I had, I submitted a pull request with the new subpage and had it accepted and deployed internally.
The Reflections
My time at Salesforce was extremely valuable to me and my career development. My manager did a great job giving me a hard design problem and allowing me to work hard and overcome challenges to tackle it. I saw how valuable research and feedback were in action, as they shaped the design of my project. This project will help Salesforce centralize their animation efforts and reduce coding overhead for future projects.
