Animated Video Backgrounds 2022
Stakeholder: Discord (In-House)
Role: Illustrator, Project Lead
As a part of a broader mobile redesign campaign, Discord began developing news features to enrich the voice & video call experience while allowing users to connect with the app's environment on a more individualized level. Discord sought to create a body of animated backgrounds that would play behind user icons while participating in a call.
Research & Development
The primary focus on this project was to appeal to a broad range of users and expand Discord's appeal across user demographics, broadening the company's focus beyond gamers and Discord power users. To achieve this, our team decided to explore a wide range of subject matter and moods within a small batch of illustrations. At the time of development, Discord's illustration standard was restricted by a fairly rigid primary color palette and character-based minimal vector cartooning style. We decided to expand upon this and encapsulate a range of styles, incorporating line, texture, and dynamic shading, while maintaining a vector-like aesthetic that would mesh well with Discord's UI and existing body of illustrations.
A dominance concern among the team was that these illutrations extend beyond "gamer" themes, as Discord's reputation as a gaming app was a concern with onboarding new casual users. To do this, e gathered reference on trending aesthetics and gen-Z visual touchpoints that have strong appeal across user types, drawing inspiration from the limited animation background illustrations found in video playlists in the expanded genre of "beats to study to". An active effort would go into cultivating visual landscapes that were at once calming and stimulating, providing a gentle and unintrusive companion to video calls intersperces with easter eggs that add interest during moments of silence.
Rough Concepts
I pursued six initial concepts as value comps to give an impression of style, content, and presence without overly investing in color or detail before receiving feedback. At this stage, moments of animation were only loosely considered and the focus was on establishing a roster of varied concepts. The expectation was that feedback would help reduce these concepts to the three compositions that provide the most variety while functioning well as a background animation. This stage helped me explore different levels of detail and consider how I could later implement color, contrast, and repetition to prevent the imagery from becoming overwhelming.
Refined Concepts
After receiving initial feedback, only one concept was removed. To further explore the five remaining concepts, I refined the concepts as sketched outlines and further defined the style and content of each composition. In several concepts, I used different colors of line to describe where and how animation would be applied. At this stage, I began thinking about how to construct the layers of each illustration and provided notes to our team's animator to ensure files would be properly set up and easy to create animations from.
I didn't receive any major notes on these sketched compositions, so I created color mockups using the mobile crops of the backgrounds to also provide an example of how these illustrations would look in their narrow mobile formats. While most crops were pulled from a centered slice of the larger illustration, some mobile crops benefitted from slightly offsetting the image.
To prevent an overcomplicated review process, the only color variants provided for feedback were minimal adjustments to color temperature, mood, and small compositional changes. The only background that included more extensive color exploration was the Flowers & Bugs background. This was done for two reasons: (1) This composition was very color-flexible and could easily be modified to establish very different moods, and (2) If selected as a final concept, we could select a colorway based on which option provides the best range of color options when compared against the two other choices.
Final Art
The final decision was to move forward with the following three compositions based on popularity and broadness of appeal. After concepts were selected, my illustration teammate Alexandria assisted with building out the final illustrations in preparation for Kevin to animate, sometimes handing files back and forth to tackle difficult areas collaboratively.
The final animated backgrounds were rendered at a relatively slow pace, so I have sped up the animation in these final examples to help demonstrate the full animation more quickly.
