How we won a global Figma design jam on our first virtual camping trip
Four designers from three different time zones come together to help make design more accessible, and win first place at Camp Figma.
Written by: Vanessa Seto and Carol Chu
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:
- As a new designer, how can I refine and level up my toolkit?
- 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.
Through a collaborative voting process, we decided that the underlying theme for many of these pain points was getting over imposter syndrome and learning how to gain confidence as a designer.
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:
- Getting over imposter syndrome & gaining more confidence
2. Becoming specialized in one aspect of design (ex. I’m a designer, specialized in UX research)
3. Portfolio building, knowing where to start, building case studies and projects
After coming up with numerous ideas for Figma plugins, apps and files, we narrowed our list down to our top ideas by voting on our favourite ideas based on feasibility, innovation, and originality. Some of our top ideas included:
- A plugin with portfolio templates to get started 📓
- 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 🤪
And last but not least, our winning idea:
- A Figma plugin that asks questions and keeps track of progress throughout the design process. Eventually helping to build the foundation for case studies afterwards ⭐️
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:
- User onboarding process and personalization
- 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
Through our wireframing, we made sure to lean back on our problem statement, objectives, and constraints. Some questions we asked ourselves to stay on track were:
Does this add value to our plugin and help solve our overarching problem?
Is the flow intuitive and easily digestible?
Would this feature be accessible to all new designers?
Is this feasible to implement as a plugin?
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.
Applying the visual elements of our brand to our high-fidelity mockups, we created a prototype of better showcase the flow of our plugin. Here’s how our plugin fits into the Figma UI.
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:
Can our plugin be engaged with immediately, or does it require a learning curve?
How does it build upon existing ideas to show us something novel and valuable?
How did the team work together to accomplish the task?
Does the idea encourage others to engage with it in interesting ways?
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.
Participating in events such as Camp Figma, meeting new people from around the world, and seeing how each group was able to tackle a problem from a unique lens, was really motivating and inspiring to all of us. 💡
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.
Designing a plugin — Despite having experience with mobile and web applications in the past, this was the first time we designed a plugin for Figma. This required a bit of research on how plugins were accessed, how they functioned within the Figma ecosystem, and what their limits on functionality were.
How to make quick decisions — Due to the fact that we only had 24 hours to create a solution, it was crucial that we didn’t spend too long on any individual task, and that we followed a streamlined process. Additionally, we used a polling system to efficiently make design decisions.
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.
Overall, Camp Figma not only allowed us to refine our skills as designers, it challenged us to design in a different medium and create something that would ultimately allow us to give back to the community.
Thank you to the Figma fellowship for organizing an event that really allowed us to think outside the box and design with passion. ❤️
Stay connected with Team Helvetica. Visit our portfolios! ✨
Vanessa Seto, Carol Chu, Donna Kim, Anthony Teo
