Tasked to build microinteractions onto a feature on a pre-existing website,
I chose to redesign a category selector card on
Unity’s website. It is a card with an image, a title and description, and a link that
leads to a page with the services Unity offers
regarding that category. At the time of research, the existing card
had no interaction changes happening on it besides a cursor change. My vision for
enhancing it was to add more movement and color when hovering and clicking different elements.
Context & Challenge
Unity has many dynamic and lively microinteractions, reflecting on its services as
a graphics development platform, but I was surprised to find a set of cards linking to different pages
not having any other interactions on them at all. At the time of discovery, the Industry
Category card would not show any changes when hovered or clicked upon
besides a cursor-to-pointer change. To improve this, I decided to elevate the existing
feature (while using the same content and layout) by adding new microinteractions to it
– including a drop shadow appearing when hovering on the entire card, color changes and
animations when hovering on the text link, and a zoom effect and simple blue line animation
when hovering on the image.
This would be a project that I would develop on my own, and I had begun by
visualizing what I wanted the microinteration to look like prior to building it.
Process & Insight
Creating the final microinteraction build was truly a step by step journey. Early on in the
process, I knew I wanted to retain the original interaction’s style, colors, content, and
layout. After they were replicated through HTML and CSS, I had to arrange what kind of
microinteractions I would add to the build to enhance it. Though I had some initial ideas,
making it have multiple interactions and be more dynamic did pose a challenge.
I started out small by compiling images and editing them to depict what I wanted to program –
this included
a hover effect on the image that would make it zoom in, a hover effect on the entire card that
would change the color of the drop shadow from blue to dark gray, and a hover effect on the
link where it would turn a lighter blue and an underline would animate from left to right
underneath the text.
Unity is a website for people who are learning and applying digital
graphics (in video games, architecture design, etc.) and the user base is comprised of young
adults to middle aged adults who are well-versed with digital products. To me this meant that
I could add more flashy elements that were attractive and engaging without being too much for
the user to apprehend.
The Solution
I decided to have a motif of a blue animated line (one when hovering on the link and one that
appears when hovering on the image) moving from left to right to encourage acting upon it, as
well as to match Unity’s color scheme to be more cohesive. These hover animations were one key
component of the build. Another main feature was that the image would enlarge in its container
when hovered upon. The last main interaction was of the entire card itself; on its own it has
a drop shadow that’s gray, when hovered on the shadow turns blue, and when clicked the shadow
becomes a dark gray. Additionally when clicked on, the entire card expands in its place.
It was enjoyable to retain the website’s original feature and to work on microinteractions to
enhance it. I aimed to make it have more movement and color and I feel the final build reflects
just that. Something that I would keep in mind for the future would be planning out the process
beforehand and having a clear vision of what I want the microinteraction to be. This would help
me create a more coherent and cohesive product, ensuring that the microinteraction is easy to
understand for its intended users and that it is consistent with the rest of the website.
