How we won a global Figma design jam on our first virtual camping trip

Grab your sleeping bag, some bug spray, and a laptop — We’re going (virtual) camping 🏕

Camp Figma is a Figma sponsored design jam that took place over two days, run by the Figma Student Campus community. Over 300 students and new grads from universities around the world took part in Camp Figma this year. Having met for the first time days before the design jam, our team went into this design jam with the expectation of simply having fun and meeting fellow designers in the Figma community. Little did we know, we would become winners in a global design jam.

01 — The rules of the camping grounds 🌲

For this challenge, we were given the prompt to ‘Make design more accessible’, while considering the following questions: How can we help newer designers level up? How can we lower the barriers and warmly welcome more people to get started designing?

The prompt

Given the ambiguous nature of the prompt, we knew that we would have to think outside of the box and explore more ambitious ideas. We had to step outside our comfort zones to create an innovative, feasible, and inclusive plugin, while also keeping it simple enough to be completed in just over 24 hours.

Our team

We’re Team Helvetica — four aspiring designers from three different time zones who share a passion for design.

02 — Navigating the problem space 🧭

The first step of our design process was discovering the given problem area and defining a problem statement. As a group of aspiring junior designers ourselves, we looked back on our personal experiences when getting into the design industry. Though this exercise, we realized that there were varying pain points depending on an individual’s level of experience. Using a jobs-to-be-done framework, we identified two main gaps in the journey of becoming a designer:

  1. As someone whose never designed before, how do I get started?

Brainstorming

Under these two categories, we collectively held a two hour brainstorming session to come up with themes to answer the above questions. From learning about the step-by-step design process to figuring out how to “ask the right questions”, we leaned heavily on bouncing ideas between each other while conjuring up our own experiences.

03 — Defining our route 🚘

While there are many ways in which people can overcome imposter syndrome, we all agreed that it was vital for new designers to focus on developing their own toolkits and learn by doing. In the language of a budding designer, common goals would be to build stronger design skills through learning how to use and apply the design process to a case study. Through an analysis of objectives and constraints for this concept, we were able to narrow down on our problem statement:

04 — Ideating around the campfire 🔥

With a more narrowed focus on the problem we wanted to solve, we could now start ideating on potential solutions to fill this gap. We began ideating under the theme: Gaining confidence as a budding designer. With this theme, we came up with as many ideas as possible using digital sticky notes. While also keeping in mind the problem statement, we came up with sub-themes to help keep us on track while ideating:

Sticky note brainstorming for ideation
  • A plugin that gives provides motivational, funny and uplifting quotes as you design ✨
  • A fun quiz (similar to Buzzfeed quizzes) to figure out what type of designer you are, then links you to similar designers to learn more 🤪

05 — Late-night jam sessions 🎸

Onboarding user flow

To begin our prototyping phase, we began by creating a user flow diagram in order to organize our ideas more clearly. Creating a user flow chart helped us understand and visualize the user experience more clearly, and allowed us to consider all aspects of our plugin from start to finish. Firstly, we outlined the framework for our onboarding flow, from installing the plugin, to beginning a design project.

Design process user flow

After creating our user flow for the onboarding experience, we revisited the five step design process for the plugin itself, to outline the design stages that users undergo. For each stage in the design process, we included tips and notes associated with each stage to act as notifications for users. While coming up with the tips, we asked ourselves: How can we make the information digestible and motivate our users?

Wireframing

Following the steps outlined in our user flow, we created wireframes to better visualize how the flow of our plugin. Main features we wanted to highlight in the wireframes included:

  • Easy to follow step-by-step design process
  • Ability to add new slices to each phase of the process
  • Ability to track progress
  • Useful links and resources along the way

Visual design

When curating our style-guide, we wanted to ensure that the visual brand of our plugin matched our goals and objectives. We decided to use blue and teal as our primary colours to match the functional aspects of our product: a tool that helps individuals learn about the design process and productively develop their design skills. Additionally, we used brighter secondary colours to convey a friendly and welcoming visual image. This was important as we wanted our brand to be easily approachable and accessible to new designers.

Why Slice?

The name Slice comes from the idea of breaking a large component down into smaller, more digestible chunks. For a new designer, starting a design project can often be overwhelming and they may not know where to start. Therefore, we want to break the process down, slice by slice.

Plugin name brainstorming

Introducing: Slice 🍉

An engaging onboarding experience

Our plugin starts out with a login / sign up experience. For new users, they can create an account, and select a designer level (new designer, junior designer or senior designer). These different user types allow Slice to cater towards the users’ specific design project needs.

Easily integrate with a design project

After setting up their account, users can create a project or select existing Figma projects to use Slice with. Users will also select a phase of the design process to begin with (empathize, ideate, define, prototype, test)

Guiding users through the design process

The plugin highlights each slice of the five-step design process, starting from Empathy and ending with Test. Using the checklist, designers can easily track their progress. To learn more about each slice, they can read up on useful resources.

Receive tips and notifications

Throughout your project, users will receive notes from Slice with design tips, specifically catered to to the stage in the design process users are in.

Effortlessly create a case study

Once users complete a design project, Slice creates a summary of their project on a separate page, with saved screenshots, presented in the form of a slideshow. This takes the user’s work throughout each step in the design process. For new designers especially, this summary can help them break into design easily and gain confidence not only with the process but also within themselves.

Our pitch

Check out our submission video here!

06 — Packing up our learnings and takeaways 🎒

Judging and presentation

As a part of our project evaluation, we were being judged on innovation, ambition, inclusivity and feasibility. Some of our criterion included:

Reflection

At the end of the 24 hours, we were psyched to hear that we came in first place for the Make Design Accessible category! 🏆 Albeit this quantitative result, there were so many other qualitative takeaways from participating in this competition. As many other designers can relate, being in quarantine can definitely take a toll on an individual’s room for creativity.

Key learnings

Collaborating remotely with new people — Effective communication and collaboration was essential for our team, especially being remote. We learned to communicate about each others’ goals and understand everyone’s strengths.

07 — Next Steps ➡️

As part of our prize, our team has been invited to present our plugin at the Figma Show and Tell: a live stream for the Figma community to present demos of plugins and new Figma features. As for the future of Team Helvetica, we’ve reflected on our entire experience and have also discussed the idea of developing this plugin using the Figma Plugin API.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vanessa Seto

Vanessa Seto

Design @ Palantir | Systems Design Engineering @ UWaterloo