About
Shift is an enterprise web and desktop application that encompasses all of the cloud features a video team needs to collaborate securely and remotely on any content. Shift has a web, desktop, mobile and Apple TV application.
THE CHALLENGE
When I started on the product team in 2018, there was only one Sketch file and a handful of art boards for the entire application. There was no shared visual language, no design system, and no design process in place. Engineers had little to no design direction and were often faced with making UI/UX decisions themselves.
MY ROLE
As the principal product designer, I partner closely with Business and Product Leaders to scale and maintain the core design system, raise the visual and interaction design quality across products, drive resource efficiency, and improve cross-functional collaboration to create great products and ensure designs and user interfaces deliver on core product strategy and vision.
Design Impact
• In 2019, I transitioned the team from Sketch to Figma to create a transparent design process and maximize collaboration between Product, Design, and Engineering. I created Figma files for every key screen and worked retrospectively to update the information architecture, user experience and visual interface of current screens in the application.
• By 2020, the product team was operating from a shared Figma component library that spanned across nearly 20 Figma files for desktop, tablet, mobile and key features.
• In 2021, I transitioned the team to Figma Organizations to continue scaling the design processes through branching workflows. I introduced advanced variants, and interactive components, enabling Figma preview views to be as accurate as possible for engineering.
• In 2022, I began an initiative with engineering to bridge design and code via a Storybook React version of the design system connected to Figma components. View the Satori Design System project to see the initiative to create the Shift Design System from the ground up.
Business Impact
For each feature, I follow a streamlined design process
- Define the user story, problem set and opportunity
- Craft a shared product objective
- Map the proposed user journey
- Explore possible design solutions
- Refine these solutions based on customer and stakeholder feedback
- Handoff to engineers
- Iterate over time
Before - File Sharing
The Process
1. Define the user story, problem set and opportunity
This includes understanding the space and auditing the sharing pathways that exist (or should exist).
2. Craft a shared product objective
3. Map the proposed user journey
An advanced UX matrix showing each potential pathway through a sharing experience:
4. Explore possible design solutions
Iteration and prototype V1. View the interactive prototype here.
5. Refine these solutions based on customer and stakeholder feedback
Iteration V2
Iteration V3
Final Iteration - Simple View
Final Iteration - Customize View
6. Handoff to engineers
The documented matrix and Figma file were handed off to PM & engineering
7. Iterate over time
Ongoing. This feature will be shipping soon.
Before - Project Browsing
Product browsing before UX Design Cycle (no attention to information architecture, density, contrast, accessibility, or empty states)
After
Shipped: product browsing after UX Design Cycle (improved information architecture, clear hierarchy of presentation, tightened density, clear action buttons)
Before - Video Review Player
After
Shipped: Video review after (improved overall experience based on customer feedback, improved architecture, additional features):
Read the product update.
Prototyping Exercises
A prototype of a file drag interaction:
Collaborative Product Process
We use ProductBoard, Github, Slack, and Figma to manage product design. PMs prioritize features and requests and brings those to a squad. Within the squads, we evaluate the customer need and hone in on the primary challenge to solve for. I participate in customer interviews, analyze features in other platforms, create proposed user journeys, layer on our UI, and build prototypes in Protopie to support presentations.
.jpg)
