Originally published at Adobe Blog. https://medium.com/adobetech/run-a-remote-hackathon-to-build-an-adobe-xd-plugin-7b7e624e42d
Learn how Yummygum ran a remote hackathon to build an Adobe XD plugin in one day. Read about the process, tactics, and tools they used.
As the world swiftly transformed before our eyes the past couple of months, we found ourselves in an odd place. At Yummygum we always push ourselves to be innovative and stay creative, but lately it has been tough. It can be a challenge to avoid creative fatigue and even sometimes be a struggle to have fun at work.
To help the team process events and take our mind off things, we planned a one day remote hackathon to create an Adobe XD plugin. Hackathons are a great way to connect your team, spark new enthusiasm, foster excitement, and learn new things. Building an Adobe XD plugin is easy, and it is feasible to create something amazing in just one day as we’ve done before. This time, however, our whole team was remote.
Glitch for Adobe XD
To spark your enthusiasm we’d like to share our results first. Glitch is an amazingly simple plugin to create that symbolic “glitching” effect on shapes or text. You’ve undoubtedly seen this before in movies or on YouTube as it’s a popular visual.
We felt this would be an amazing companion to our Confetti plugin to make a tedious design process easy and fast. It was incredible to build something like this in a short amount of time. Download the plugin in the Adobe XD Plugin Manager or on the website and be sure to tweet us your creations.
Let’s dive into our process.
How to Run a Remote Hackathon
It might sound scary if you don’t know what to expect, but in the current digital age running a remote hackathon is super easy to do. Our team is about 10% remote which gave us limited experience with remote working. There are many tools out there that can help you during this process, and the following tools work with both synchronous and asynchronous communication.
For quick chats we use Slack, and for longer, more personal conversations we use Google Meet with video. Context-related communication is also often done within JIRA with comments.
We track tasks, progress and planning with JIRA Cloud.
Designers are spoiled with many great design tools but the collaboration features in tools like Adobe XD are essential for a remote and continuous workflow with multiple designers. Be sure to check out more details on the coediting within Adobe XD, it’s very smooth.
In the end it’s important to trust each other to complete the work, do their best, and trust your process to get the outcome you wish for. It isn’t news but important enough to repeat; communication is essential so invest in a good setup.
Phase 1: Define Scope, Squads, and Timelines
Preparing your day is essential for a smooth process and achieving your goals. A pro-tip is to define your goals and deliverables at least a week before hackathon day. This helps to get everybody on the same page before time is of the essence. It may also help to define squads and separate the work into themes like a website, plugin, AI, marketing, etc.
Set up a detailed plan for the day with timestamps and delivery milestones, and be sure to share this often so everybody is up to date throughout the day. If the whole team understands what needs to be done, by whom and when, it’s go time.
Phase 2: Dive in, Share and Ask
Being distant from your colleagues can introduce a struggle to communicate, and having kids or running cats at home can demand your attention. Be sure to respect each other’s household situations.
That said, our mantra on a day like this is “share early and share often”. This keeps your colleagues up to date and allows them to chime in whenever necessary. As a bonus, it shows when you’re available for a quick chat if you share something.
Planning a milestone call on Google Meet is also amazing to get direct input and thoughts from others. For example, we planned a call to share the first alpha version of the glitch effect with the full team. This allowed designers to give quick UX feedback on how the plugin should work.
End phase 2 around lunch time to share progress and plan for the rest of the day.
Step 3: Trim your scope and finalize
As lunch is about halfway through your day, it’s a good moment to review and assess if you need to make adjustments to your scope and plan accordingly. In our experience we’re usually too ambitious in our scope so we trim it after lunch and discuss the next steps.
Make that final sprint to the finish line and collaborate towards the final deliverable.
Step 4: Celebrate with drinks and a video call
As shared by a lot of people on Twitter, having a bit of down time and relaxing at the end of the day does wonders. Make sure to celebrate the results of the day — regardless of if goals are met — by cracking open a bottle or soda together on a video call. Briefly discuss how the day went, and what you can improve next time.
Quickly switch to a more social call with topics like weekend plans (tip: plan your hackathon on a Friday), pets, kids, family and other fun stuff. End the day on a happy note of fun stuff to come in your personal lives. That concludes a full day of working together professionally to a more informal setting.
End the call with an applause for yourself and the team.