WE'LL BE BACK!
STAY TUNED
Managing the Component Libraries in Figma
Background
What was the original experience?
Numerator's products were growing and scaling at an exponential pace. Everyone on our product design team was using different design tools: Sketch, InvisionApp, Axure, Adobe XD, Adobe Illustrator. This made it difficult to collaborate and help each other on projects because we were more unfamiliar with these tools, other than our own.
​
Realizing this could not have come at a better time because our next project was to revamp all the products' UIs to align with the Numerator brand guidelines and follow the insights design. We needed a new design software that was collaborative among our team and a component library that served our existing platforms.
The Challenge
To define our brand guidelines and foundations and to create easy-to-use components that already exist throughout our platforms within Figma.
My Role
I proposed Figma to my design team and eventually to the product team. It became my responsibility to learn Figma and create a library for our existing components and foundations.
My Process
This is my typical design process for projects. I start by understanding the user needs and observing the current user experience within the product. Then I converge and define the objectives to a specific problem.​ Once the scope is defined, I brainstorm potential solutions and ideas. Then I create mockups to test with clients and ideate with updated revisions based on their feedback in order to reach the best solution possible.
Image: My Design Process
Empathize
User Research
I am the user!
Image: The Survey Atlas and Research Teams!
User Persona & Task Flow
In order to fully understand the Contact Directory and its sole function, I created a user persona of a survey researcher and potential task flow to visualize the user's experience of querying a survey sample.
Pain Points
Current experiences within MSTR and Qualtrics were too rigid. MSTR was outdated and only legacy users had prior knowledge on it, but most of those legacy users had already left. Qualtrics had a clean UI, but couldn't reach more complex use cases.
Define
Objectives
After conducting user research for the power user, I was able to streamline the objectives our team would be solving for:
-
Create a more flexible user experience that captured more functionality integrated into one tool
-
Maximize efficiency for research associates, experienced users who would use this tool in their day-to-day
-
Sales and Services team can use Contact Directory to help query for project scoping and proposals (future use)
Ideate
Low Fidelity Mockups
I collaborated with our team of front-end and back-end engineers to develop potential ideas for a research team's user experience. I created lo-fi mockups and wireframes to create user flows and building more use cases off that.
.png)
.png)
Image: First Sketches
Image: Wireframes
Prototype & Test
High Fidelity Clickable Prototypes
After we defined the proper use cases and its flows, I built the high fidelity prototypes. As part of Numerator's product line, I kept the color palette consistent throughout the Contact Directory system, providing a clean aesthetic for data visualization.
Image: Hi-fi Prototypes
Click here to view the full prototype.
Testing with the Survey Research Team
Initially, we tested the prototypes with some of the Surveys Research team. We asked them to complete a specific task in any way that was familiar to them, which helped us tremendously in finding bugs and other discrepancies in the user flow.
Images: Testing Contact Directory & Keeping track of bugs
Outcome
Contact Directory was a high priority item in the pipeline, so it was built immediately after testing. This unique interface received overall positive feedback from the team, but also has room for improvement in future ideations. Our goal in testing was to improve the usability and efficiency of the power user in order to create an experience that was user friendly and intuitive, despite how unfamiliar the interface was. We have an ongoing bi-weekly meeting to discuss further improvements with the system and go by a list of prioritized tasks to meet the research team's needs. We're now in the process of making the interface more user-friendly and intuitive for new users as they onboard.
Key Takeaways
1. Teamwork makes the dream work! Since Contact Directory's interface and use cases were more complex and unique, it took a lot of brain power and different perspectives to make the common vision come alive. Clarifying our goals and priorities was crucial in this project's management, and defining our roles and expectations beforehand maximized our efficiency as a team.
2. We were designing for the power user. Contact Directory was originally intended for the experienced survey research associate, someone who utilizes the various tools to query a survey sample. Maximum efficiency for these particular users was a higher priority than for a new user. Because Contact Directory is new, I was inspired by the other survey tools used and integrated some of their functionalities into the system, such as sorting in Microsoft Excel. I wanted to include some familiarity within this system, so it was easier to use for not only the power user, but can also be scalable to a new user eventually.