Tim Pham

Upperstudy

Establishing design foundations for early-stage startups

Role

Product Design Apprentice

Time

Jun 2021 – Feb 2022

Context

Upperstudy is design apprenticeship led by Adam Michaela and Josh Puckett, former Design Director of Airbnb and Principal Designer of Wealthfront, that partners designers with early-stage startups to help define and build their products. I worked closely with founders and their interdisciplinary teams to establish a creative direction and design innovative digital solutions.

Role

As a Product Design Apprentice, I collaborated with my design lead to craft user experiences and interfaces for clients seeking to improve their product design. My role was mainly execution, using a clear end-to-end design process as guidance. With each project, I was responsible for scoping design specifications and delivering key assets including user flows, wireframes, high-fidelity mockups and prototypes.  

Working at design agency gave me the opportunity to partner with a diverse range of companies: creating marketing pages, e-commerce platforms, and mobile applications. I contributed to a 60% reduction in time-to-market average, where time is critical for startups seeking product market fit.    

As part of my role, I actively participated in peer forums to share design feedback with fellow apprentices. I worked independently to conduct research, iterate on designs, and test solutions with users to ensure the best possible outcomes.

Notable partner companies include: Remix, Made Renovation, Texino, BestPracticer, Vanta, PumpkinPie, and Addition Wealth. I was eventually hired full-time by Addition Wealth as their Founding Product Designer in March 2022.

Selected Works

Remix.run
A modern web framework for building fast, scalable web applications.
Designed the marketing website with a scrollable, immersive experience.
Building a product is fun, but screwing around with build tools and data loading is not.
Remix brings you the state of the art in web development (and then some) without leaving behind the fundamentals that make it great.
Get Started
Download Remix
@timpham
React Router v6 is the best update yet! Can’t wait to use it in my app. I think maybe the best part is how easy it is to intergrate. SO COOL!!!!
@timpham
React Router v6 is the best update yet! Can’t wait to use it in my app. I think maybe the best part is how easy it is to intergrate. SO COOL!!!!
@timpham
React Router v6 is the best update yet! Can’t wait to use it in my app. I think maybe the best part is how easy it is to intergrate. SO COOL!!!!
Tim Pham
VP of DesigN
Remix has been a game-changer for building the web. It makes dynamically generating social images possible, portable, and fun. No external services needed.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
return <h1>Hello React Routerh1>; }

ReactDOM.render(
<BrowserRouter>
<App />
BrowserRouter>,
document.getElementById("root")
);
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
Remix is the latest and greatest React tool on the Web.
latest
greatest
Get hands-on support for Remix from our team
With over 2.4 million users, Remix is one of the most popular React tools on the internet. Our mission is to establish the core fundamentals of web development for all.

Great news! Remix is free and open-source now.
Get Started
GITHUB
Resources
Pricing
GitHub
NPM
Sign In
Resources
Pricing
GitHub
NPM
Sign In
ReactRouter
A popular library for managing navigation and routing in React applications.
Redesigned their brand and developer documentation for dark & light mode.
React Router
DOCUMENTATION
RESOURCES
Github
NPM
Guides
Primary Components
There are three primary categories of components in React Router: routers, like and
route matchers, like and
and navigation, like , , and
We also like to think of the navigation components as “route changers”. All of the components that you use in a web application should be imported from react-router-dom.
import { BrowserRouter, Route, Link } from "react-router-dom";

Routers
At the core of every React Router application should be a router component. For web projects, react-router-dom provides and routers. The main difference between the two is the way they store the URL and communicate with your web server.
A uses regular URL paths. These are generally the best-looking URLs, but they require your server to be configured correctly. Specifically, your web server needs to serve the same page at all URLs that are managed client-side by React Router. Create React App supports this out of the box in development, and comes with instructions on how to configure your production server as well.

A stores the current location in the hash portion of the URL, so the URL looks something like http://example.com/#/your/page. Since the hash is never sent to the server, this means that no special server configuration is needed.

To use a router, just make sure it is rendered at the root of your element hierarchy. Typically you’ll wrap your top-level element in a router, like this:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
return <h1>Hello React Routerh1>; }

ReactDOM.render(
<BrowserRouter>
<App />
BrowserRouter>,
document.getElementById("root")
);
import { BrowserRouter, Route, Link } from "react-router-dom";

01
02
03
04
05
06
07
08
09
10
11
12
13
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ANNOUNCEMENTS
The Future of React
Router
EXAMPLES
Basic
URL Parameters
Nesting
Redirects (Auth)
Custom Link
Preventing Transitions
No Match (404)
Recursive Paths
Sidebar
Animated Transitions
Route Config
Modal Gallery
StaticRouter Context
Query Parameters
GUIDES
Quick Start
Primary Components
Server Rendering
Made Renovation
A streamline experience to transform homes into stylish and functional spaces.
Redesigned the Leads Portal experience to improve client conversion.
Home
Your Project
Gallery
Reviews
Tim Pham
2649 Ranchwood Place
Welcome Tim!
We have only 10 spots left for a Summer build — reserve yours today.
Other Contractors
Involves managing everything from design to materials and finding a quality contractor
Construction
$15,000
Design
Not Included
Architecture
Not Included
Project Support
Not Included
Materials
TBD
Additional time cost
$24,300
Additional estimated hours
162 hours
Your time is worth
$75/hour
Est. Total
$39,300
Your Made Estimate
Our all-in-one service takes care of your entire renovation from start to finish
Construction
$15,000
Design
$3,000
Architecture
$1,500
Project Support
$1,500
Materials
TBD
Additional time cost
$0
Additional estimated hours
0 hours
Your time is worth
$75/hour
Est. Total
$16,500 - $19,500
Place My Deposit
100% refundable at any time
7th
largest remodeler in the nation
500+
bathrooms designed to date
80+
in-house team of bathroom experts
What to Expect Next
1. Reserve Your Project
Save your spot in line by placing a fully refundable deposit.
2. Finalize Your Design
Chat with a Design Consultant to receive your 3D render and review your final proposal.
3. Sit Back & Relax
Once kickoff is scheduled, Made’s fully managed team gets to work so you don’t have to.
Featured Transformations
View successful before & after renovation stories from our customers
East LA Crafstman
This is a description for this case study about a specific home in an area.
Read more
East LA Crafstman
This is a description for this case study about a specific home in an area.
Read more
East LA Crafstman
This is a description for this case study about a specific home in an area.
Read more
Show more
Customers Love Us
See what past customers had to say
Salan E.
Made took care of everything!
Made took care of our powder room (half bathroom) which required updating. The experience was great knowing they took care of the estimate, design (we kept modifying which they helped us through our many questions along the way), found the contractor, and ensured delivery of all the supplies. It was just easy working with one company for all parts of our renovation.
Los Angeles
Half Bathroom
Salan E.
Made took care of everything!
Made took care of our powder room (half bathroom) which required updating. The experience was great knowing they took care of the estimate, design (we kept modifying which they helped us through our many questions along the way), found the contractor, and ensured delivery of all the supplies. It was just easy working with one company for all parts of our renovation.
Los Angeles
Half Bathroom
Salan E.
Made took care of everything!
Made took care of our powder room (half bathroom) which required updating. The experience was great knowing they took care of the estimate, design (we kept modifying which they helped us through our many questions along the way), found the contractor, and ensured delivery of all the supplies. It was just easy working with one company for all parts of our renovation.
Los Angeles
Half Bathroom
Show more
FAQ
Question title
Question detail answer
Question title
Question title
Texino
Custom-built camper vans that combined functionality with modern designs.
Redesigned the marketing and Camp Store experience to drive customer sales.
VIEW model
Contact us
TANGO
Mercedes-benz
Utilitarian function meets minimalist design in our stealthy Metris camper.
The Tango is the perfect two-seater van for weekend warriors and gear haulers.
Pratica (formerly BestPracticer)
A coaching platform to help modern workers upgrade their skills and excel at work.
Designed a blog to showcase learning topics and promote customer sign-up.
Requirement Writing
Requirement writing includes 1) communicating the meaning and background of a project (via specs, one pagers, or product requirement documents / PRDs) and 2) explaining tasks (which can be stand-alone or within a project), including as User Stories or Job Stories.
Product Management
Learn this skill
Interested in applying Requirement Writing with one with our coaches?
We will handpick you an expert coach in your domain
Schedule a free consultation
Learn more about coaching
On Writing Product Specs
Jens-Fabian Goetzmann, Head of Product at 8fit
Gaurav argues that especially at larger companies, writing a comprehensive spec (in the vein of Amazon & Ben Horowitz) has the benefits of moving critical thinking up front, communicating efficiently, and raising accountability. Gaurav then provides an in-depth example.
Mark as read
A Framework for Modern User Stories
Jon Dobrowolski, Sr. Director of Product, InVision
Gaurav argues that especially at larger companies, writing a comprehensive spec (in the vein of Amazon & Ben Horowitz) has the benefits of moving critical thinking up front, communicating efficiently, and raising accountability. Gaurav then provides an in-depth example.
Mark as read
How to Write a Spec: Asana’s Spec Template
John Cutler, Head of Product at Tesla
Mark as read
Asana's project template is more detailed than the Atlassian team poster. It starts with sections for Background, Problems, Goals, Vision, and Hypotheses, and then digs into a proposal with concept mocks.
Great One Pagers
Jackie Bavaro, Head of Product Management at Asana
Mark as read
John explains how to focus on problems rather than narrowly-defined solutions in a project one-pager, and provides 17 different possible sections to include.
Project / Epic Documentation
Related Skills
Problems vs. Solutions
Customer Interviews
Customer Delight
Synthesizing Research
View all
What do you want to learn?
Sign up
Sign In
BestPracticer
Topics
Discover
Coaching
What You’ll Learn
Project/Epic Documentation
Task/User Story Documentation
PRD Templates
Project/Epic Documentation
Project/Epic Documentation

Learn more about other work