Somayan

Part 1/4: Base UI components

Designing components for all Uber apps

Problem

  1. Due to a lack of platform components, teams across Uber were designing and building their own. This led to inefficiencies and inconsistent designs.

Solution

  1. As part of Uber’s Base design system, the Design Platform team designed and built a library of commonly used UI components.

What I did

  1. I helped the team design, prototype, and write design guidelines and technical documentation for bottom-sheet and fintech-related UI components.
  1. Bottom-sheet component behaviour
  1. Money-related input components

Outcome

  1. The bottom-sheet component was built and used across multiple Uber apps. The money-related input components were designed, but not built.

Demo of Money products using money-related input components

Part 2/4: ProtoKit

An easier, faster way to share any design prototype

Opening iOS, Principle, and Framer prototypes from the ProtoKit iOS app

Problem

  1. In a large organization like Uber, it’s a hassle for designers to share prototypes. It gets worse when they use different prototyping tools.

Solution

  1. One tool that allows anyone to quickly share and access Framer, Figma, iOS, and Principal prototypes internally.
  1. In an internal Google Sheet, Uber designers can upload info about their prototype


Outcome

  1. Rider and Money design teams are starting to use ProtoKit. While it was too early to gauge success/failure, design teams were excited and interested in using this.

Part 3/4: Figma live preview

Bringing Figma designs to life with native iOS components

Problem

  1. For highly interactive designs, designers can't instantly feel how a design works without building a prototype.

Solution

  1. An app that overlays native iOS UI components on Figma designs, thereby giving designers an instant feel how their designs work.

Overlaying custom iOS inputfield UI on top of the Figma design

Overlaying custom iOS slider UI on top of the Figma design

Overlaying custom iOS picker UI on top of the Figma design

Overlaying custom animating iOS label UI on top of the Figma design

Part 4/4: iOS prototype library

Contributor to an internal iOS prototyping library of UI components

Summary

  1. I contributed to an internal iOS prototype library. This helped iOS prototypers build faster, without compromising the quality and flexibility of our prototypes.