Developing Stages: Part 9 — Rethinking Animation
Chronicles of an interaction design student turned UI engineering intern.
Week 9, Day 1: More SVGs!
Restructuring the SVG implementation last week means figuring out a new scaling method is first on the agenda this week. By the end of the day we have fully responsive designs which can be repositioned as necessary for different viewport sizes.
On to our weekly project meet up, revealing the new colour scheme and more for the first time. With the different features falling into place, I take the opportunity to look at one of the last features which we finally have the data for and is now in desperate need of a redesign.
Observations:
- There will always be sections which need refinements, further iterations, or redesigns so prioritising your tasks and deliverables is key.
Week 9, Day 2: (Re)Design Standards
Start the day off by tidying up the copy with some revisions and new content to finally be rid of all placeholder or rough versions. Then it’s time to tackle a personal nemesis: the forgotten feature. It has been on the back burner while awaiting animation and while evaluating the consistency of the overall design I realised it is no longer appropriate. Time for a redesign!
Today is also the fortnightly team meeting, gathering all the folks from Ireland and across the pond. Looking at a variety of new projects and topics but seeing the differences in default styling between iOS and Android in one prototype particularly intrigued me. As an iOS user, I am now interested to learn more about the Android standards and compare.
Observations:
- Is there a visual dictionary of UI terms/elements? Because there should be.
- Always reexamine. Sections can get left behind as you iterate and sometimes you need to mercilessly rework.
- The things people do to text with SVG filters are insane. Today’s SVG text shenanigans paled in comparison. I must experiment more in future.
Week 9, Day 3: The Git Beast and User Testing
For the first time I can say a merge conflict is well and truly conquered! A combination of the honourable `git rebase` and `git mergetool` (remember them, they will be your best friends) slew the beast and racked up enough experience points to level up my Git knowledge.
Even more exciting, I sat in on some UX testing for a new application during my lunch break. As an observer, it was an excellent opportunity to learn from both the testing itself and how the process was conducted. Participating in an actual UX interview/testing has been on my bucket list for a while and I can’t wait for the next one! Lunch with the lovely Laura, Senior Product Designer, after the testing also led to her talking me into putting forward one of our project features for this week’s design critique. This should be interesting!
Observations:
- Maximise every opportunity. Even lunch breaks.
- Users will always present a fresh perspective.
- Sometimes it’s best just to say yes and worry about the details later. Participate in a design critique for that feature you’re still redesigning and don’t have a working prototype for yet? Sure, why not.
Week 9, Day 4: IT’S ALIVE!
What’s this? Something is moving! And not only that, it’s moving seamlessly in Chrome, Safari, Firefox, Internet Explorer, and more. Yes, the breakthrough key to using Greenock in React finally unlocked my brain today. Nesting components! The animations themselves can be components and dropped in wherever necessary. It’s brilliant!
The rest of the day was spent dabbling in motion design, a growing hobby of mine, and creating not only the UI animations but also mapping out how they can be broken down into reusable pieces.
Observations:
- You have no idea how good it feels to see something actually move.
- Components don’t have to be things, they can be actions, animations, anything!
- Don’t get so caught up in the details that you make a mountain out of a molehill. I was so focused on the problem of overusing refs and bloated pages of code while trying to emulate how I used GSAP normally that I didn’t take a step back and think that maybe that’s not how it should be used in this context.
Week 9, Day 5: My Head Hurts (But It’s Okay)
Walking into a design critique with the rough mockup of the redesign you only started a few days ago can be ever so slightly nerve-wracking but it doesn’t need to be. In this case, we received valuable feedback on the design itself and how to approach the issue and better communicate with the stakeholders. They also mentioned the possibility of doing some user testing around the lab for the feature, which would be brilliant!
After that morning of design, it was head first back into the code. I had no idea React mount/unmount animations could be such a headache. We’re getting there but it’s going to require some rethinking on my part to seamlessly integrate the transition animations (especially with the current conundrum of why transformOrigin refuses to cooperate).
Observations:
- Once you stop being too attached to any one design critiques become much less intimidating and far more enlightening. It frees you to focus on the feedback and improving the product and opens up for proper discussion because no one needs to worry about hurt feelings.
- I am now entering the final stretch of my time at Allstate. It doesn’t seem possible!
