Product Design
2020 — Treehouse
Apprenticeship Program
Lead Product Designer
The apprenticeship program involves a lot of folks—community partners, hiring partners, Treehouse staff, and many students across the United States. I created an internal dashboard for the program which provides account management, cohort management, and progress tracking to ensure the vigourous program is on schedule. I lead the product design and contributed to the front-end, including developing a new theme in the design system.
skills: UI/UX design, web development
2020 — Treehouse
Proficiency
Lead Product Designer
Students earn badges and points as they complete content in app, but we wanted to take a deeper look at quantifying proficiency. In the apprenticehip program, mentors needed a way to evaluate candidates to place them in roles at the partnering tech companies. I collaborated with the team to create proficiency metrics in various skill areas. Certain features were scaled back to a MVP for launch.
skills: UI/UX design, web development
2020 — Treehouse
Techdegree Home
Lead Product Designer
The Techdegree is a structured online learning program that prepares students for a career in the tech industry. I've conducted user interviews to gather feedback on iterations of the home screen experience. One of the things I'm curious about is finding a balance between knowledge retention and new learning.
skills: user research, UI/UX design
2018 — Treehouse
Mentorship
Lead Product Designer
I added a mentorship feature to Treehouse Organization accounts (our B2B offering for teams), enabling mentors to see their mentees' progress and proficiencies in the app.
skills: UI/UX design, web + email development
Design Systems
Ongoing — Treehouse
Beam Style Guide
Beam is a style guide for Treehouse's post-paywall experience (this is where the learning happens). This internal documentation enables designers and developers to understand and implement our system with ease. I've made many contributions over the years, including: a new theme named Pine, animation utilities, data visualizations, alerts, boxes, icon refactoring, modals, and the one I'm most proud of...a responsive, accessible table. Built using Sass and Ruby on Rails.
skills: UI/UX design, web development
Ongoing — Treehouse
Leap Front-End Framework
Leap is a front-end framework and style guide that is primarily used for Treehouse marketing pages. It contains atomic helper classes and components that ensure everything we build is consistent and flexible. For most things we build, additional CSS isn't necessary so this greatly reduces redunancies in CSS/Sass files. Built using Sass and Jekyll.
Check out Leapskills: UI/UX design, web development
2017 — Treehouse
Bounce: A Front-End Framework for Email
After noticing that email styling had gotten inconsistent over the years, I created a front-end framework and style guide for Treehouse emails. Built using Sass and Jekyll. The templates and modular components has streamlined the email creation process.
skills: UI/UX design, web + email development
Marketing Design
2020 — Treehouse
Website Redesign
Front-end Developer & Design Systems Lead
In this project, the marketing designers created the mockups, and we collaborated on refining the design. I refactored the marketing Rails layout, reducing unneccessary Sass and ensuring backwards compatibility for old marketing pages. I also updated our Leap CSS framework to support the redesign. The tedious part came during the QA process, where I tested the new website in BrowserStack, fixing bugs to ensure functionality and correct rendering across browsers, devices, and operating systems.
Check out teamtreehouse.comskills: UI/UX design, web development
2020 — Treehouse
Apprenticeship Recruitment
Lead Designer & Front-End Developer
With apprenticeship cohorts popping up around the country, the team needed an easy way to start recruitment. Previously, multiple third party tools were used to manage this process. I created an internal system which made it easy to automatically create a landing page for each Treehouse Apprenticeship cohort. When interested students submitted an interest form, they gained access to a learning track and also appeared in the internal admin dashboard. This made it much easier for student support specialists to see their progress and provide additional access as they advanced through the program.
skills: user research, UI/UX design, web development
2019 — Treehouse
Gift Cards
Lead Designer
A reocurring customer request is the ability to gift subscriptions to friends and family. This was a fun project, as the user flow needed to take in account a few considerations. For the checkout flow, I provided a guest checkout process as well as a way for existing users to use a saved payment method. For the redemption flow, I included a signup process in addition to the option of adding the gift card value to an existing account. This project ultimately got put on the backburner due to other priorities.
skills: UI/UX design
2018 — Treehouse
Homepage
Lead Designer & Front-end Developer
It was time to refresh the homepage to better reflect Treehouse's products and services. I conducted user interviews to learn prospective customers' decision making process when deciding whether to sign up. After identifying the key areas for improvement, we did multivariate testing which allowed us to swap sections around and see which versions performed better. With that quantitative data in hand, I shipped the final version.
skills: user research, UI/UX design, web development
Teaching Projects
Ongoing — Treehouse
Misc. Designs
As a UX Design teacher, I've created various mockups to use as part of my instruction. Each course includes a project file that students work on as they watch the video lectures. Our teaching style is centered around hands-on learning.
skills: UI/UX design
Before & After: Color: students practice improving the use of color in a chat app.
Before & After: Layout: students practice improving the use of color in a chat app.
Before & After: Typography: students practice improving the typography on a news website.
Typography for Designers: students learn how to select and lay out type.
Typography for Designers: students learn how to use a grid.
Graphic Design
2020 — Climate Designers
Earth Day Poster
I created a poster for Climate Designers 2020 Earth Day Poster Collection.
2020 — 350 Bay Area
Sustainability Playbook for Business
350 Bay Area is a grassroots movement for deep carbon dioxide emission reductions. As a volunteer for the non-profit organization, I'm creating a guide to help businesses commit to climate actions, such as declaring a climate emergency, divesting from fossil fuels, improving product & supply chains, and advocating for policy that mitigates climate change.
Project status: In review; aiming to launch in August 2020 to share with businesses in a pilot program and conduct user research. Here are assorted images I've created for the guide.
skills: graphic design, UI/UX design, illustration, web development in WordPress
2019 — East Bay Animal PAC
Event Poster
As a volunteer for the animal advocacy group East Bay Animal PAC, I created a poster for an event where California State Senator Nancy Skinner talked about topics that impact our commmunity, including people and animals.
2019 — East Bay Animal PAC
Event Poster
As a volunteer for the animal advocacy group East Bay Animal PAC, I created a poster for an event where Oakland A's Liam Henriks was scheduled to talk about animal activism. The event was rescheduled and then postponed due to COVID-19.
