Overview
My role
Timeline
~1 months
Deliverables
Figma prototypes
Summary
As part of my onboarding to familiarize myself with the design system and sharpen my Figma skills, I contributed to the Base gallery by recreating non-Uber product experiences with Base components.
Method
Influenced by the design process, this is the process I followed to learn Figma advance prototyping and the Base design system.
Competitive Research
I met with 24 designers, design engineers, and engineers from the Base team and cross functional partners to gain insight on how they familiarized themselves with Base.
Explore & Feedback
Base video tutorials
Learn directly from the Systems experts and designers to see how they envision designers to use their components.
Practice, practice, practice
Recreate the examples from the video tutorials to learn the techniques and become more familiar with the tool.
Building with Base
Recreating a few screens from the Medium app, an online publishing platform I use everyday, with Base.
Iteration & Feedback
Pay attention to semantics
Identify the functional nuances between visually similar components.
Base style
Develop a better understanding of Uber's brand style and identity (i.e. layout, motion, spacing).
Advanced prototyping w/ Base
Explore micro-interactions, autoscrolling, and how to prototype with Base.
The results
Added this apple prototype artefact to the Base gallery to demonstrate the power and flexibility of the Base Design System with one of the leading design systems praised by the community, Apple.
Base gallery
More results
I was inspired by all of the fun transitions and animations that Netflix launched early this year and showed off the power of prototyping in Figma.
Netflix prototype
Outcomes
I shared my learnings and knowledge by co-leading the Build with Base onboarding class, co-leading the advanced breakout room of Uber's inaugural Figma Prototyping class, and was the Base expert for the apprentices.
