flUX
flUX is an educational guide for incorporating animation into web and mobile design and development in useful, beautiful ways, all specifically catered toward students and newbie designers. With a curriculum that builds UX animation knowledge from the ground up, flUX disrupts an educational landscape filled with material that is either too complex, too incomplete, or too abstract.
In flUX, the four content modules synthesize key principles and best practices to provide the launchpad students need to use animation in future web projects. Starting with WHAT, the lessons teach basic terms and background on UX animation. This leads to WHY which explains why animation can create a better experience for your user. HOW delves into the code and more technical side of it all, giving users exposure to CSS and JS strategies to incorporate animation. Finally with WOW, users take all that they’ve learned to the next level, learning extra tips that will be useful to them or their employers.
flUX is available now as a free online resource for desktop and mobile. Don’t miss the train to animation station — get onboard at fluxanimation.co.
“Animation is no longer just for delight; it is one of the most important tools for successful interaction.” — Smashing Magazine
It is easier than ever for aspiring web designers to independently learn the basic skills they need to succeed. With a plethora of free resources for learning to code or understanding the ins and outs of design software, students and young professionals alike can learn almost anything from scratch.
Knowing this, when Claire Jordan and Caroline Windham embarked on their Emerging Media Masters journey they decided they wanted to learn how to incorporate animation into their digital projects. So they hunted, and hunted, and hunted some more, but in Fall 2018, they couldn’t find anything that fit the bill. Of course, there were some resources available, but many of them either just provided a list of quick theoretical tips or went through a whole tutorial that was too complex for a beginner. There were no resources that explained the theory and purpose of animation as well as how to actually implement it for a robust user experience.
So they decided to create their own. And in January 2019, flUX was born.
A Solution By Students, For Students
flUX is a responsive website built in a Bootstrap framework using HTML, CSS, and JavaScript. It is hosted through GoDaddy, and uses a lightweight Bootstrap template which was built upon as the structure of the site came to fruition. These basic coding tools are taken to a more advanced level with their application to animation throughout the site, but sticking to the key languages young designers and developers know makes the site more approachable. By hosting flUX online, it remains a free resource for users to learn from and reference whenever needed. Also with the exercises, no specific software is required which provides equal opportunity for users. Due to the fact that our primary audience is students, it was important that we weren’t placing another expense in their laps.
Like many digital learning tools, flUX’s curriculum is broken up into a series of modules—what, why, how, and wow. Each one of these categories includes 4 to 5 lessons for users to work through. For a user new to animation, the 4 modules are best completed in sequence:
- WHAT: The theoretical. These lessons teach basic terms and background on UX animation.
- WHY: The functional. These lessons explains why animation is so useful and effective for interacting with the human brain.
- HOW: The technical. These lessons delve into the code and explore the development of animation, teaching students to create animations in CSS and JS.
- WOW: The next level. Users take all that they’ve learned and are shown strategies on how to apply their skills in ways that are useful to them or their employers.
The lessons are packed with examples, visuals, additional resources, and interactive elements. Users have the opportunity to test and practice their new skills throughout a variety of quiz elements and application activities. People learn in a variety of ways, and so flUX’s material reflects that variety.
Back up a minute…
What you see above is the flUX of today — polished, purposeful, and chock full of educational content. But like any digital product, it had humble beginnings.
Research
In January 2019, Caroline and Claire joined forces with Kendall Lake, and all we had was an interest in animation and a pile of giant sticky notes. We wanted to create the kind of resource we wished we had access to. Like we mentioned before, we wanted to create a resource for students that isn’t a financial burden but still offers something useful to add to and complement their repertoire of skills.
We started by determining our target market. flUX is catered to students or entry level professionals ages 18–25 who are majoring in or working in media or technology related fields. The ideal user for flUX is someone who is tech-savvy, has some basic coding or design knowledge, but is still looking to develop their skill set.
We found that many resources for students wanting to gain a new skill in the UX animation field expect students to have prior knowledge of the concepts. With flUX, experience in UX animation isn’t necessary, and users walk through lessons and exercises to slowly build up their skill set.
We looked at our competitors to find things to aspire to as well as things to avoid. Similar options to flUX include Adobe Inc. tutorials, LinkedIn Learning (formerly Lynda), and Youtube videos by either professionals or amateurs. We plan to appeal to the niche group of their users who feel overwhelmed with all of the content and lingo on big sites and want a place to get a solid foundation before delving into complex software and higher-level tutorials. We want to lean into our angle of “by students, for students.” Keeping that principle in mind, we chose to create a free resource that didn’t depend on any kind of cost-prohibitive software.
It should be noted that months after we started working on the project, InVision released an Animation Handbook that was close to the resource we were craving in the first place. A major firm seeing the same market gap we had identified was both affirming and disillusioning.
However, due to its position as a free, entry-level resource, flUX complements rather than competes with other tutorials and lessons in the marketplace.
Design
We use a subway motif to display movement and color throughout the project visuals. A subway, like animation, moves with purpose. Throughout the flUX curriculum, we continuously remind users that their animation needs a destination. Where are you taking the user with this movement? What action are you trying to predict, prevent, or point to? The subway system exists to expedite, ease and unclog the commute for passengers. Animation acts as a similar tool in the user experience.
Color is a strong, purposeful character throughout the project visuals and deliverables. Our audience is mostly students and young professionals. We want to use color to display a fun tone. Like animation, color livens up the user experience but also has purpose. Our palette consists of four vibrant colors (subway, train, tube, and metro) that are used in the artistic elements as well as header designs. The off-black and stark white colors (underground and rail) are used for main text.
Alpha & Testing
With all of our initial research and planning out of the way, we created the flUX Alpha. Our Alpha included all of the top-level functionality of the site but only included one lesson for each category.
In JRMC 8016: Interaction Design and Usability, we had the opportunity to create a user test for our Alpha. Like with any good user test, our eyes were opened to many things that we, the creators, had missed. When you’re really invested in a project, it’s hard to envision how your users will actually interact with it. We tested six participants who fit our target market, asking them to complete a variety of tasks, give verbal feedback, and complete a worksheet for the System Usability Scale.
Our main problems consisted of the following:
- Navigation and Categorization: Currently, the site is divided into four sections: What, Why, How and Wow. Although the participants found the wording clever, they were consistently confused by this layout. Ultimately, we decided to add a “how to use this site” section to the homepage to help clarify the sections.
- Where do I go now?: We observed major difficulties with users trying to determine the next step when looking through the website. This was particularly evident when we asked users how they would begin using the website. To fix this, we changed a “learn more” button on the homepage to read “get started,” then added a pulsing animation to encourage users to click on it.
“I wish it led you a little more. Like, ‘Oh, go here for the next step.’”
Minor issues included:
- Landing Page: Only 50% of our participants could accurately tell us from only looking at the landing page what flUX’s purpose was. To remedy that and create clarity, we created a small introductory paragraph as well as stating what the four categories represented.
- About Page Confusion: Initially, we had the “ABOUT” tab as the first one in our navigation bar. This caused people to go there first instead of delving into the curriculum like we planned. We moved the “ABOUT” tab to the end of the navigation bar to better show the hierarchy of information.
- Lesson Structure: Users had trouble completing tasks associated with specific lessons due to the lack of hierarchy and summarizing, and those tasks were recorded to have taken the most time for users to complete. We incorporated an introduction of each lesson at the top of the page, as well as “Next” and “Previous” buttons at the end of each lesson page to take the user to the next lesson in the correct order.
While we did have issues that were pointed out to us, we also received positive feedback about our site. Many of our users stated they enjoyed the color scheme and overall visual design.
“I like the simplicity, even though it’s talking about something that’s complex. It reminds me of the IKEA store.”
Our System Usability Scale score also indicated overall effectiveness and usability of our site. According to Usability.gov, a score over 68 is above average, and our calculated mean score was a 73.75.
Beta and Testing
For the Beta, we wanted to address all of the changes from our user test findings as well as create a full curriculum of content. At the time of the Beta launch in April 2019, flUX included 17 lessons across four content categories.
As we prepared for a full launch of flUX, we conducted another round of user testing to polish out any additional problems in the Beta. The second test followed a method similar to the first test, but with additional tasks to evaluate more of the content.
This test showed improvements in our overall user experience, like the fact that adding a “Get Started” button on the homepage aided in improving our first task’s success rate from 50% to 86%. Also, people still enjoyed the visual and overall design of flUX.
“A lot of learning sites can come across as really intimidating, but this has a friendly feel to it.”
After another set of evaluations from the System Usability Scale, the flUX Beta had an average score of 83.05, a 12% increase from our spring test.
Along with the good, there were also new issues, the main ones being:
- Homepage: To clarify what flUX is and minimize confusion, we put a long paragraph right where people would first see. Users commented that they wouldn’t want to read that much text when initially landing on our homepage. So, in flUX 1.0, you’ll find only a concise sentence at the top of the homepage.
- Visuals in Lessons: The less text the better was the consensus we got from users; considering the dominance of a visual learning style amongst our participants, this makes sense. We got feedback that the lessons could be more effective if we added more visuals, or at least formatted the text in a more engaging way. To better cater towards a visual learning style, we incorporated more visuals into lessons and broke up text to make information more digestible.
- Interconnectivity: Our users spent an average of 25 seconds looking for specific lessons in tasks two and four, and there were multiple comments that they wished there was more clarity on how all the different pages of flUX were connected. To increase connectivity between lessons, we added a hovering “top of page” button to each lesson page.
Along with these major issues we also discovered a handful of technical and design flaws that have now been corrected.
Overall, this test taught us the importance of testing and iterating multiple times. We shouldn’t have assumed we worked out all of the problems in the spring! As we made our final changes leading up to launch, we kept the user in mind by taking care to focus on what they actually want, not what we think they want.
1.0 and Launch
After two user tests, nine months, two classes, 17 lessons, and countless hours of ideating, writing, and developing, flUX is available now as a free online resource at fluxanimation.co.
Looking Forward
With things getting more complex, it’s more important than ever to make the basics of animation simple so that those who see the potential but don’t have experience aren’t overwhelmed by all the information available. Based on trends predicted in 2019, user interfaces are moving towards being more simplistic which means that animation will be even more important in helping the user navigate with less on the screen. We believe that the rise of animation in product design combined with the lack of available beginner information will create a high demand for our guide.
We anticipate flUX being utilized specifically by the New Media Institute as a tool for their students who are interested in UX animation, or for those wanting to incorporate some aspect of that into their final capstone project. There is potential for partnerships with other educational institutions as well. Broadly, we hope this can be a resource young professionals can turn to if they find themselves wanting to add a new tool to their toolbox or to make themselves more attractive to potential employers.
Looking Backward
Claire
A year ago, I knew I was interested in animation and wanted to explore it further. I did not know what it would look like, but I was excited to learn more. I never imagined something as cool and versatile as flUX. Throughout this project, I have grown in skills beyond web animation. I have strengthened my design skills through my role as the main visual designer of this project. I have learned to write more concisely and create lesson plans that make sense to students like me. However, I am most thankful for the valuable teamwork and project management experience I gained over the past year and a half. I hope this is the first of many similar experiences — creating a purposeful product with a creative team.
Caroline
Coming from a background studying entrepreneurship, journalism, and studio art, I never imagined myself working on a UX animation project for capstone. It turned out that the skills I had gathered from those fields served me perfectly to be able to aid in content creation for flUX, as well as serving in a more business analyst role for the behind the scenes cultivation. I’m really pleased with how it all turned out, and having teammates that complimented my skill set has helped immensely and brought flUX to what is it today.
Kendall
For me, the biggest challenge of our journey was trying to teach a subject I was still learning for myself. As the lead developer for the project, a lot of my time was spent just wrapping my head around everything we wanted to explore. I was a journalism major in undergrad, so coding is not my forte. I had to do weeks and weeks of research before writing a single one of the development lessons! But this struggle helped me to understand why grad school (and EM in general) is such an enriching experience — you get to dive in deep to learn something you’re really passionate about. With that in mind, be sure to pick a Capstone project that will be able to keep you engaged and excited!
Advice
To all the future EMers out there: document everything! When you first start your project in 7011, Capstone is going to feel like a world away. But as your project starts to come together, be sure you’re keeping detailed records and taking plenty of photos along the way. Your advisors aren’t messing with you: every class you take will contribute to your Capstone project in some way. Whether it’s a tangible piece of work or critical knowledge, each piece of the EM curriculum is a tool to help you get to the finish line. So, keep an organized toolbox — we recommend Google Drive.
flUX: fluxanimation.co
Project Website: flux.mynmi.net
