Virtual Lab
A virtual lab simulation for students.
Grand Canyon Education (AWS)
Project Overview
Role
Web Design
Team
1 manager, 1 project analyst, 2 web designers, 2 developers, 2 videographers
Tools
Adobe XD, Adobe Illustrator, Adobe Photoshop, After Effects, Bodymovin, Lottie Animation
Challenge
The GCU Master of Forensic Science program is new and is still growing. There have been requests to make it as hands on as possible to stand out from other similar programs on the market.
Solution
Build a new interactive simulation to one of the classes in the program. The simulation would create an interactive option for students to learn and conduct presumptive drug testing.
Project Background
I was working as a web designer for a small department called Academic Web Services (AWS) under a much larger company, Grand Canyon Education (GCE). Much of our work was to support Grand Canyon University’s (GCU) course curriculum.
About a year prior to this project kickoff, virtual lab research had been done to prepare for simulations like this, experimenting with tools like Lottie files to build out interactive components. Because of this, much of the mockup work and framework for the development phase was completed, which significantly reduced the scope of this project.
The Colorimetric Testing of Toxicants Virtual Lab was going to be our department’s first time taking this research and applying it to something real. The comps were handed off to me with the idea of creating this interactive lab for students in the new Master of Forensic Science program. With COVID-19 still on the rise, this would give students the ability to learn and conduct presumptive drug testing virtually and to complete an assignment that would be submitted and graded online. As the main web designer on the project, it was up to me what this lab would look like and how it would play out knowing the tools and resources that were available.
Next Steps
Next steps for this project will be to evaluate how students are interacting with the lab. Are they understanding what to do and is this helping them learn what they need to know? Collecting metrics would help to raise any potential problems or bugs that would need to be fixed. If this project is successful, it could be a great opportunity for the Academic Web Services department to create more interactive pieces like this in the future, using this one as a reference point.
What I Learned
Asking for help doesn’t make you a bad designer. Sometimes in the process of mocking up solutions, you get stumped. With my specific problem, reaching out to my boss to pick his brain helped us both to reach a really fun solution that made sense.
Clear communication with the developers will go a long way. Part of the reason the final product for this feature was so successful was because of the communication that took place between myself and the developer. There was some trial and error during the development phase and it truly took working through these problems together for us to reach the best outcome.
A designer isn’t finished until the final product has been launched. That step between a developer being “finished” building the thing and a product being deployed was often skipped and ignored at GCE, but with the amount of effort that went into this project, I wanted to make sure the development of this application was as close as possible to the comps. A feedback loop took place where I’d catch small design flaws in the code and bring them up with the developer. Going the extra mile of double checking everything looked good and functioned properly through my own lens gave me the assurance that it was the best that it could possibly be.
Dropper Animation
Animated with After Effects
Spatula Animation
Animated with After Effects
Bottle Animation
Animated with After Effects