Taken For A Ride
A web-based report on the hidden prices gig workers pay
My Role
UX Designer at the University of Texas at Austin, Human-AI Interaction Lab
Tools
Adobe Suite
Figma
Procreate
My Contributions
Established and maintained a design system with 500+ components and 40+ local variables.
Crafted a concept-driven illustration with pen and paper, finalized the illustration in Procreate.
Carried out layout, typography, and icon designs while ensuring visual consistency throughout the site.
Led 11 rounds of design iterations, from wireframes to high-fidelity mockups.
In Short…
Imagine a manager who pressures you to work more, changes your wage without explanation, pays people differently for the same job, and raises the quota for earning a bonus whenever you come close to reaching it.
This is the experience for many ride-share drivers on Uber and Lyft. Classified as individual contractors by law, they work on their own terms in theory. The technologies designed by these platforms, however, tell a different story.
Taken For A Ride reports the technologies Uber and Lyft use to manage their drivers, plus a data tool that reveals the hidden costs that rideshare drivers pay.
Full Case Study Available Upon Request
Project Impacts
70+
Pages of research synthesized into one robust site
40+
Figma Variables created, ensuring brand consistency
500+
Figma Components established, optimizing workflow efficiency
Context
More people are turning to gig work to earn a living. In 2021, 16% of Americans have engaged in online gig work and 58% of active gig workers rely on this income for basic needs. Despite this, the technologies that decide their schedules and wages remain unregulated and hidden. What's the impact of these unchecked technologies?
For 4 years, Angie Zhang and colleagues studied the algorithmic management technologies Uber and Lyft use. They interviewed drivers, policy makers, and worker's right advocates. This website project (demystifying-gigwork.com) distills 70+ pages of their research and a data tool they developed into one responsive web case study.
Frame the Problem
“A well-stated problem is half-solved”
At the beginning of each project I hone in on identifying the right problems to solve. I do so by asking many questions, probing and flipping the assignment on its head to look at it with fresh eyes. The goal is to answer these questions: Why does this project matter? Who are the core audiences? What do we want people to think, feel, and do after interacting with this digital product?
Questions I asked
Feature-Based Inspection Scan
With the prioritized problems in mind, I explored platforms and tools that solved similar problems. What parts worked well, and why? What parts fell short, and why was that? I checked with our team lead, developer, and researcher to stay on course. Weighing these options against our project timeline and technological constraint, I began to outline my first iteration of this website design.
Establish a Design System
Never be that designer
I use the Modular Typography tool by Precise Type to determine the typographic scale of my design system.
Local variables I set up in Figma to allow for more flexibility and customization.
Our Process
How our team makes iterations
Tuesday team meeting ➡️ Organize next steps➡️ Design iteratively ➡️ Check-in with team.
The cycle continues 🔁
Wireframe sketch of the site
Closer Looks: Improving UI to Drive User Engagement
❌ The old layout
Justified text set wrong: massive rivers running through the paragraphs, disrupting visual flow.
Ambiguous visual flow: With two mobile screenshots close to each other plus the last paragraph had similar distance from the two images, it was not immediately clear which text block belonged to which image.
Lacking typographic hierarchy: Besides the title on top, all the texts were the same size and weight. The visual did not reflect the information hierarchy.
✅ The final layout
No more rivers: Setting the paragraphs centered or left-align to eliminate rivers.
Crystal-clear visual flow: Using variation of color, size, weight, proximity, and texture, I presented a visual flow that is easy to follow. The visuals reflect the logic and hierarchy of information represented.
Bonus: Sticky nav bar added on top, now user can navigate to different sections of the report with ease.
Illustrating the Big Idea
An effective design should serve its intended function. Art, on the other hand, can exist without a function or creates unintended impacts. My design and art practices overlap and influence each other. As design trains me to sweat the details, art guides me to trust the process. The illustration for the gig worker website demonstrated my learning from both design and art.
A word map I made to figure out key messages of this case study.
Team
Lab Manager: Min Kyung Lee
Team Lead: Angie Zhang
Research and Writing
Rose Rana, Nithila Sathiya, Angie Zhang
Data Probe Development + Research
Alex Boltz
Data Probe Simulations
Praveen Mogan, Anjie Liu
Website and Graphic Design, Illustration
Meah Lin
Website Development
Jake Lohman, Surain Saigal
Additional Thanks
Joseph Lee, Jonathan Lynn, and Bianca Talabis
Sources & Credits
The design system was built upon Irina Nik’s Free Accessible Design System
Open-source vector illustrations of people from undraw.co