Overview
Research
Users
Information Architecture

Creating Randomness in Figma

Card Shuffle Figma FileSpinner Figma File
OVERVIEW
Mission
To create a tool to help UX Designers in the community.
Goals
  • Publish a project to the Figma community
  • Help other designers that work in Figma
About
In order to determine how to most effectively help UX designers, I conducted 3 interviews with designers in the industry. After our discussion, I decided to build a team building tool. Designers were unhappy with the virtual tools that existed at that time.

I was creating a happy hour tool and wanted a spinner to randomly select a theme. I went to the plugins community in Figma and there were no tutorials or copyable pages. I searched for a video or a blog but again, there was nothing. I was surprised that this had never been created. I contemplated how to prototype my vision. I had an idea and it worked!
‍
After discovering that this, I turned to my classmates to see if anyone else was hoping to create something random. Two of my classmates wanted randomly selected flash cards and I was able to follow the same prototyping concept to fulfill their needs. Seeing that the randomizer concept proved to be useful in a small pool of people, I thought it would likely be useful in a large group as well. I decided to divert my project and create a tutorial to teach designers how to hack randomness in Figma.
Client
General Assembly
Student Project
Year
2021
Duration
2 weeks
Field
UX Design
The randomness hack that I discovered in Figma proved to be helpful to my classmates so I decided to create a tutorial to teach others in the design community.
The Design Process
1Research
2Information Architecture
4Prototype
5Learnings
Research
Comparative Analysis
Mid way through developing my instructions, we had a lesson on autolayout. I thought the instructions were nicely laid out so I decided to pull inspiration.
Persona: Meet Britishia
Britishia is a compilation of my 2 classmates that used my random prototyping concept, Brittney and Alicia.
Problem Statement

Britishia wants to make flashcards for her classmates and other UX Designers but doesn’t want them to cycle through in the same order every time

    How Might We...

    Create flashcards at random so that they are more helpful?

      Pain Points
      • Figma doesn’t have the option to randomize.
      • Labeling components is an essential aspect of the workaround, but it is a hassle.
        Information Architecture
        User Flow
        My goal was to make the concept of prototyping easily understandable for all types of learners. Users can choose from various options such as reading the instructions, copying the prototype steps, reverse engineering, or combining different methods to achieve their desired outcome.
        Map
        To facilitate the learning process, I divided the lesson into different concepts and created two files - flashcards and spinning wheel. Within each file, I designed a consistent format and created a series of pages to ensure a coherent learning experience.
        Usability Testing
        Written Testing
        • Explaining the randomizer concept verbally over zoom was successful. I explained how it worked to Brittany and Alicia and once they understood it, we were able to help each other
        • While I was able to successfully teach the lesson verbally with minimal challenges, I found that users had difficulty comprehending the written instructions.
        Verbal Testing
        • Users struggled to follow written instructions.
        • 0 out of 3 participants successfully finished the task.
        External Factors
        • Length of learning time: the moderated tests had a time limit of 8-12 minutes whereas Brittany and Alicia had 2 weeks to complete their projects
        • Verbal testing participants had greater incentive to learn how to create random flash cards because it was important for their projects
        Although my classmates were able to understand my verbal instructions, they were confused by my written tutorial. After usability testing, I was able to pinpoint the problems.
        Pain Points
        1
        2
        3
        4

        Pain Point #1

        The amount of information was overwhelming and not organized in an easily legible way.

        Solution

        • I broke the instructions up into 2 files; spinners and cards. Although the concept is the same for both, people would likely be looking for 1 or the other.
        • I put different features on different pages within each file
        • I reorganized the pages in the way that most of my target demographic reads, left to right
        • I added a table of contents
        Version 1

        Version 1 was busy & overwhelming

          Version 2

          I was inspired by the Autolayout playground instructions but still stuck to my columns and kept a lot of information on the page

            Version 3

            I aimed for minimalism and focused on 1 step at a time

                Pain Point #2

                Participants were getting lost when reading the instructions.

                Solution

                • I created a set of frames with a copiable piece for every step. Not only could a user compare their work but a user who doesn’t like to read could easily reverse engineer by viewing all of these pieces
                • I created callouts throughout the instructions informing participants that they could copy the piece

                Pain Point #3

                Users didn’t know what they were creating and so they couldn’t conceptualize the end goal.

                Solution

                I created a demo page in the file to introduce the user to the design

                Pain Point #4

                Users didn’t know where to create their project.

                Solution

                I created a “Remix/ Create Your Own” page in the file to clearly show the users where to build their own creation.
                Prototype
                User Flow Video
                Watch how to create a spinner
                Prototype
                See it in Figma
                Learnings/ Next Steps
                Learnings
                • Creating instructions is more nuanced than just the wording. It is important to organize content in an intuitive way.
                • Teaching helped me improve my knowledge of UX terminology and gain a better understanding of Figma.
                Next Steps
                • Observe new successes/ failures in the community. Adapt accordingly.
                • Create an instructional video.
                • Post on more platforms.
                • Create a cheat for eliminating variants in my randomizers.

                Thanks for stopping by! Come again!