I’m a product designer and front-end developer living and working in San Francisco. I love design systems, code, economics, red pandas, karaoke, purple things, and learning.
Sometimes people call me Chelsea.
As we began building our product, it became clear to me that we needed to implement and document a set of guidelines to keep the product consistent while keeping the development process light and fast. I built this styleguide as a way to communicate and enforce the idea that we're not just designing features — we're building a system.
The styleguide leads with brand colors, SCSS variable definitions, and HEX values.
Each section defines base and modifier classes for each component.
Each component is shown as a working example alongside code example.
In Vouch's early days, the application and approval process for a loan was complex and unruly. We needed a method to plan our shift from manual processes to a fully-fledged product.
This visualization focused on identifying the main user flows and reward loops we wanted to create to promote viral growth. Ideally, happy sponsors and borrowers would recognize Vouch as valuable method for getting affordable credit and grow their own personal networks, exposing Vouch to an ever increasing number of customers.
This more complex flow shows the interaction between different customers in the Vouch ecosystem: prospects, borrowers, sponsors, and internal staff. We used this as a tool to prioritize features, educate new employees, and solve design problems. A full size version is not available. If you'd like to see it, please contact me.
Vouch's desktop and mobile web experience is the main point of entry for the majority of our prospects. We discovered early on that until a borrower has an active loan, a native application doesn't provide much value to them. While we initially planned on mobile usage being a native experience, we soon realized it would be more valuable to focus on a responsive web experience.
This version of the homepage attempted to illustrate how sponsorships could get you a better rate on your loan, build trust in us as a company, and encourage prospects to focus on long-term savings.
This series of screens brought a user from applying for their loan all the way to a funded loan. I worked closely with legal and finance to create a usable, web-friendly version of a promissory note — a document with strictly regulated standards that most lenders deliver as a PDF or piece of paper.
Vouch’s first iOS app focused on the prospect flow — bringing in prospective borrowers and providing them a quick path to checking their rate and growing their network. Customers who used the iOS app were much more likely to grow their networks.
We soon discovered that, while a native iOS app could provide a better social experience, customers seeking loans didn't want to go through the hastle of downloading an app just to check their rate.
A few key screens from the prospect flow of the iOS app. This flow focused on bringing a prospect through sign up and loan application flow while encouraging customers to enable push notifications.
Our finance, customer service, and verification teams are the backbone of our business. They provide valuable insight to our customer's everyday lives. The first versions of the tools we built for them were ad-hoc and thrown together without much thought to design or user experience. I wanted bring a new standard to internal tools — an area often neglected by design.
I implemented many of these features using React and ES2015 via BabelJS.
A typical customer information screen.
A universal search for any user, loan, or application. Customer service agents often jump from user to user very quickly. The search is triggered by a keyboard shortcut and populates results as the agent types.
With a new "Start a Petition" flow already in place, it was my job to take the existing design and optimize it for mobile web while keeping the majority of features intact.
Bigger inputs and call to actions, simplified information display, and one-column view make starting a petition easier for mobile users.
A mobile version of an autocomplete component. Bigger targets allow for better targeting on mobile. Shorter results ensures the user doesn't have to try to scroll to see all the options.
Soon after I joined TaskRabbit, our team was tasked with building a cross-platform product to focus on and streamline deliveries through the TaskRabbit platform. I designed and directed a mobile-first responsive customer experience for deliveries and managed the project to launch.
User flow depicting both desktop and mobile designs for major steps of the customer experience. (See full size)
Some sample screens from the mobile web version of TaskRabbit Deliveries (previously TaskRabbit Go). A customer can request a delivery, choose a price and timeslot, and then track their delivery as it's on it's way.
An example of how we scaled mobile designs up to desktop and tablet designs.
I designed and implemented an early version of the WordPress.com store, a site where customers could learn about and purchase paid upgrades for their WordPress.com hosted blog.
The WordPress.com storefront.
Customers could track and manage their upgrade subsriptions.
KaraokeNight is a mobile web app that helps you build a karaoke repertoire and match the songs you want to sing against Karaoke songbooks near you. As an avid karaoke enthusiast, I'm always trying to find new songs and new places to sing — so when prompted to build a project as the capstone to Bloc.io's front-end development course, Karoke Night seemed like just the thing.
This project is currently under way.