1. Introduction to Research Project
Enhancing user engagement is crucial in design, particularly in the digital realm where attention spans are fleeting. Motion graphics combine a diverse range of graphical elements such as text, graphics and more (Geng, 2016) and have become a valuable dynamic tool in recent years to enhance user engagement, particularly within online platforms and websites. By dynamically moving around the page, motion graphics not only enhance comprehension but also provide user feedback to actions such as scrolling or hovering, elevating the overall engagement.
This project serves as a continuation of my case study that aims to discover the potential of motion graphics to elevate interactions and amplify engagement, particularly within digital portfolios. The central question that drives this exploration is ‘How can we use motion graphics to improve interactions and enhance engagements in user experiences?’. By diving into this question, I aim to deepen my understanding of UX and UI design, empowering myself and other designers to craft designs that not only resonate but captivate users’ attention.
After conducting thorough secondary research in the first semester of this project with my research proposal, it is evident that motion graphics have a large impact on capturing and retaining user attention in a variety of fields. Studies have demonstrated their efficiency in supporting visual appeal (Lai et al., 2019), and aiding content comprehension (Hanif, 2020). However, insights regarding the efficiency of motion design within digital portfolios remains limited. To address this gap, my approach involves practically applying all of what I have learned from my comprehensive research, designing an online design portfolio enriched with motion graphics (Figure 1.1). By taking this approach, actionable insights for designers and other creatives will emerge to understand the importance of utilising different forms of media, particularly animation, to showcase their work effectively to potential clients and employers.
An additional layer to take into consideration is addressing the integration of United Nations’ Sustainability Development Goal 4 - Quality Education (Figure 1.2). This goal advocates for universal access to quality education. Therefore, I intend to investigate how motion graphics and animation can enhance comprehension, aligning with existing literature, such as (Hanif, 2020)’s research that indicates motion graphic media is more effective in education and enhances students ability to comprehend materials. To achieve this, I will integrate this exploration into the website’s project development pages and investigate if video content is more comprehensible to viewers than a static counterpart.
For a more comprehensive overview of my project’s development, brief, and the underlying thought processes, see my Milanote board here (Figure 1.3).
2. Time Management and Considerations
Before beginning project development, meticulous planning was essential to ensure effective time management and mitigate potential risks over the 12-week period in this semester. To achieve this, I devised a tactile to-do list categorised into project milestones (Figure 2.1). For instance, during the planning phase, tasks involved time management planning and risk assessments. This tactile approach not only provided a clear view of all tasks to be accomplished within the project’s timeframe, but also facilitated quick recognition of segments that would require more time than others, influencing the creation of a detailed Gantt chart (Figure 2.2). Recognising that website development would be particularly time consuming due to tasks such as designing and prototyping, I allocated a substantial portion of three weeks to this phase on the Gantt chart. Alternatively, I decided to allocate less time on the Gantt chart to segments like brand design.
In addition to effective time management, identifying and addressing potential risks is crucial for smooth project development and minimising setbacks. One significant risk is unexpected technical issues with Figma, the chosen prototyping platform for this project. To mitigate this risk, I will need to regularly save project files locally and consider diverting to prototyping platforms such as Adobe XD. Another crucial risk involves unforeseen personal circumstances also disrupting the project. To mitigate this, I’ve allocated more time than I believe necessary to each section on the Gantt chart, accommodating for any personal disruptions without sacrificing the progression of this project.
3. Branding and Visual Identity
While the project’s primary focus may be on animation and motion graphics, it was crucial to prioritise the overarching brand identity by crafting compelling visual designs, as these elements form the backbone for effective animation integration. Ensuring that animations and motion graphics align with the brand’s identity and seamlessly integrate into the user experience is crucial to prevent them from becoming ineffective or getting lost.
Drawing inspiration from platforms like Dribbble, Behance and Pinterest, I created a moodboard reflecting my personality and preferred design style (Figure 3.1). I found myself mostly being drawn to vibrant colours and large images with minimal UI. Learning from this, I moved onto sketching some ideas for the logo (Figure 3.2).
My logo ideation process aimed to capture the essence of what I do. Experimenting initially with pixel and a more ‘blocky’ design style, I decided these concepts felt more aligned with game design rather than the graphic design I specialise in. Therefore, I pivoted towards a more approachable design, incorporating subtle elements like pencil tip illustrations into the lettering of my designer name. This idea not only reflected my style but also offered flexibility for future creative endeavours, allowing me to swap out the pencil illustration for other design tools I might be experimenting with while still maintaining brand familiarity.
Alongside logo development, I created a vibrant colour palette and selected the ‘Poppins’ font for its readability and friendly feel (Figure 3.3). Complementing this choice, I personalised the lettering of my designer name in the logo with ‘Nunito’ before adding in the pencil illustration to replace the letter ‘I’ (Figure 3.4-5). I exported the logo as an SVG file, ensuring its scalability for future use across various sizes. Using similar techniques, I created an accompanying logomark for instances where the full logo couldn’t be accommodated, such as social media profile pictures or favicons (Figure 3.6-7). This version features solely the initials, while still preserving the distinctive pencil shape for instant recognition.
The resulting visual identity, detailed in my brand guidelines(Figure 3.8), embodies a harmonious fusion of personality and brand recognition, setting the stage for seamless animation integration within the user experience.
4. Sketches and Wireframes
To effectively implement the insights gained from my primary and secondary research on motion graphics in user experiences, I initiated the process by meticulously mind mapping all important considerations (Figure 4.1). This comprehensive approach not only served as a roadmap for creating this online portfolio but also doubles as a handy checklist for fellow designers and creatives aiming to enhance user experiences through motion graphics. Key aspects that were accounted for include narrative, colour schemes, subtle animations and more.
When developing the website’s sketches (Figure 4.2), I integrated insights from both my primary research survey and extensive literature review conducted during the first semester. When approaching the creation of these wireframes in Figma (Figure 4.3-4.7), I strategically placed motion graphics and animations on the website pages, drawing inspiration from Lai et al. (2009) to prioritise minimal animations that enhance visual appeal without overshadowing content. Research by (Cheung, Hong, and Thong, 2017) and responses from my primary research support this approach, highlighting how subtle animations can enrich specific elements and prolong user engagement.
Furthermore, considering findings from Cheung, Hong and Thong’s eye-tracking study, which indicated that animations attract user attention more effectively than static content, I carefully wireframed areas for animation use to guide user interaction without distracting from important textual information. Leveraging the educational benefits of motion and video content identified in current literature (Hanif, 2020), (Santoso, Ghassany, and Putri, 2021), I have also considered incorporating video content on project places. This not only enables visitors to understand the thoughtful decisions behind a designer’s creative choices, but also aligns with the broader goal of understanding how we can enhance education experiences with motion design, contributing to Sustainable Development Goal 4.
5. Figma Development
To develop this project, I used the versatile prototyping software ‘Figma’, utilising the Relume Figma Kit (Figure 5.1) to streamline the creation of website elements and components. This approach allowed me to have ample time to dive into the realm of animated elements. A key decision was to infuse subtle animations across the entire website to reinforce visual identity to identify if findings from research align with this project. Therefore, I added gentle animations to the brand shapes, strategically placing them around the site to ensure there was subtle movement throughout, even in areas without a focus on animation (Figure 5.2).
Given the project’s emphasis on animation and the goal to understand its advantages, I opted to prototype the design with relevant GIFs and motion design elements. This enabled users to interactively explore and experience the animations firsthand. However, to maintain a realistic project scope, I confined the prototype to Figma. In the prototype, all buttons and links were interconnected, mimicking the functionality of a live website (Figure 5.2).
To dive into the benefits of user interactions and see if discussion in current literature was reflected in this project also, I integrated hover effects over images and buttons (Figure 5.3). This involved creating components with distinct hover variants, linked with Figma’s prototyping tools. By using ‘smart animate’, transitions between the two states appeared smoothly, aiming to enhance user satisfaction with a more fluid browsing experience.
To understand the effectiveness of video content compared to static alternatives, I created two project page templates, one featuring a video detailing development processes, and the other presenting a static step-by-step breakdown (Figure 5.4). This involved screen-recording the process and integrating it as a video fill in Figma, alongside capturing screenshots for the static demonstration. To assess whether existing literature advocating for video content in comprehension extends to online portfolios, I gathered data in a primary research survey. Nearly 67% of the participants expressed a preference for the video tutorial format (Figure 5.5). This consistent preference across diverse mediums underscores the importance for educators to consider integrating video content into educational materials to further contribute to a better quality education (SDG 4.)
To view the finished prototype of this website and explore the design (Figure 5.6), see the Figma file here.
6. Animated Header Development
For the homepage on the online portfolio, I’ve chosen to experiment with an animated header. While scholars like (Sundar and Kalyanaramam, 2004) have argued against animated banners, claiming distractions and negative associations, the landscape seems to have evolved since then. (Fattahi, Shir, and Asadollahi, 2014) have observed a shift in trends, noting increased adoption of animated banners by companies in online advertising. I’m intrigued to explore how this shift might impact this project and animated banners as a whole in the current online realm.
Drawing on (Geng, 2016)’s insights, narrative and emotion play a significant role in creating a successful animation. Therefore, I storyboarded an inspiring journey from a rocket on a designer’s desk that would embark on an adventure into space to symbolise the designer’s creative journey (Figure 6.1). Similarly, considering insights from (Azahari et al., 2020) who emphasises the significance of colour choices in animation, I opted for colours from the brand guidelines to ensure visual coherence throughout the website while maintaining attention-grabbing colours (Figure 6.2).
In After Effects, I crafted the rocket’s liftoff journey and smoke effects (Figure 6.3). Using individual shapes for each component of the smoke, I animated their positions to blend seamlessly, creating a cohesive cloud effect trailing the rocket as it takes off into space. The rocket’s liftoff and journey through space was animated with multiple adjustment layers and keyframes (Figure 6.4). When creating the solar system, the planet’s paths were adjusted to follow their circle’s line, using the adjustment layers to mimic the feeling of zooming out far into space before zooming back into the rocket on the designer’s desktop.
Despite criticisms of animated headers from (Sundar and Kalyanaramam, 2004), when asked in a survey if users preferred the static homepage header or the animated header, a surprising 72% of respondents favoured the animated header over its static counterpart (Figure 6.5). This suggests a shift in user attitudes towards animated banners, possibly influenced by evolving trends noted by (Fattahi, Shir, and Asadollahi, 2014) and (Hong, Thong and Tam, 2007) . Moreover, the success of animated headers on creative websites instead of e-commerce websites, where users may not feel pressured to make purchases, could contribute to this positive reception.
7. Conclusions
In conclusion, this project has provided valuable insights into the role of motion graphics in shaping user interactions and engagement within digital portfolios. By combining comprehensive research with practical experimentation in a real-life project, it is clear that motion graphics can be used to enhance user experiences in online portfolios in addition to other online applications.
Throughout this project, I developed soft skills, such as time management and creative thinking. Using my time effectively, I was able to adapt to last minute changes as I had allocated extra time for any risks that might come up during this 12 week project. By thinking outside of the box and forming my own opinions and applications, I was able to contribute to the discussion around motion graphics online by discovering that animated headers are not always negatively received, despite criticisms from other scholars.
The findings from my primary research, which can be found here, highlight a clear preference for subtle animations and interactive elements among users, challenging earlier criticisms of animated headers and underscoring the importance of dynamic elements in digital design. Moreover, the effectiveness of video content in improving comprehension, particularly in educational contexts to communicate information more clearly, aligns with the broader goal of fostering quality education as outlined in Sustainable Development Goal 4 - ‘Quality Education’.
Looking ahead, there are several routes for further exploration and refinement. Developing this project fully into a live website could help explore a clearer understanding on how to combat video content slowing down the devices of some users with file types and smaller file sizes, with avenues such as utilising Lottiefiles or smaller GIFs under 1mb. Fine-tuning educational video content based on user feedback could optimise its effectiveness as a learning tool, while also unlocking further opportunities going forward for engagement in a variety of applications.
While this project’s findings align with existing research on motion design in online applications, the online landscape is always evolving, with new tools constantly emerging that could reshape perception’s of animation’s role in user experiences. Presently, animation stands as a pivotal tool for enhancing user interactions, yet its significance may shift alongside evolving technology and trends. By continuing our exploration of motion graphics’ transformative potential in user experiences, we can not only enrich interactions across digital platforms but also contribute to ongoing advancements in design and education.
References // Bibliography // Appendices // Primary Research // Research Proposal // Initial Research Project