Figma projects

Figma Sponsored Designathon - 2nd place 🥈

Prompt

A warehouse processes hundreds of e-commerce orders every hour, with demand peaking midday and evening. Communication is fragmented, workflows are unpredictable, and priorities (expedited, normal, canceled) are hard to manage.

Three roles keep operations moving: pickers locate inventory, packers prepare items for shipment, and shippers handle labeling, final checks, and logistics. Each role faces delays from fluctuating order volume and last-minute changes.

A flexible, real-time system is needed to integrate these tasks, refine demand predictions, and keep the team aligned without relying on a rigid workflow.

Painpoints

  1. Order Prioritization: Staff struggle to quickly distinguish and process expedited, normal, and canceled orders.

  2. Communication Gaps: Fragmented updates between pickers, packers, and shippers cause misalignment and delays.

  3. Demand Surges: Peak hours create up to 50% more orders, overwhelming existing workflows and leading to bottlenecks.

High-fi mockup

Goals

  • Streamline communication between the pickers, packers, and shippers

  • Organize incoming orders by order status

  • Display warehouse and individual tasks with an intuitive UI

Interactive Demo

Overview Page

  • Designing for a Tablet (used in warehouses)

  • Sidebar for quick page access

  • Differentiate between personal/other tasks
    single click for marking tasks complete

My Tasks Page

  • Tasks grouped by status with color coding for instant prioritization

  • Order cards display all key details upfront (number, address, quantity, priority, and location) reducing communication gaps.

  • Real-time task view helps packers handle peak demand and spot overdue orders quickly

  • Visual hierarchy makes expedited and critical tasks stand out immediately.

Picker Dashboard

  • Real-time dashboard gives both pickers and packers visibility into order progress.

  • Color-coded statuses make bottlenecks easy to spot

  • Orders are tied to specific users, creating accountability and reducing confusion

  • Centralized tracking replaces fragmented updates

Studi - Study Spot Web Application 🛋️

Problem

University of Michigan students face challenges when picking places to study around campus:

  1. Students are not aware of what study spots are available to them.

  2. Popular study spots are oftentimes crowded, loud, or not open late enough.

  3. Studying can feel dull and repetitive.

Goal

product Features overview

High-fi Mockup

Interactive Demo

Build a study spot tracker website with a social media feel that makes discovering, rating, and sharing campus study spaces more engaging, ensuring U-M students always know where to go and what to expect.

  • Users can rank study spots based on 8 metrics and post them to a live feed

  • Users can see and interact with posts in their feed

  • Each post contains an average overall ranking out of 10 points, user notes, location, a photo, and option to tag other users

  • On the profile page, users can acccess all of their previous rankings

  • The Leaderboard, where you can find the top-10 highest rated Studi spots on campus

  • Users can access directions to study spots directly in the website

Technical elements

  • Remix.js, React.js

  • Supabase

  • Github OAuth

Home Page

  • Title and tagline invites users to explore study spaces.

  • "Post now" button for users to contribute their own reviews

Feed

  • Users can see rankings of different study spots and a brief description

  • A search bar and filter options at the top allow users to narrow results

Profile Page

  • Personalized welcome and an indicator of how many study spots a user rated

  • Displays user’s recent rankings

  • "Post now" button encourages user to contribute more reviews

Leaderboard

  • Features the 10 highest rated spots on Studi

Previous
Previous

Product Design for The Daily

Next
Next

Creative Dev @ The Athletic