Newton, CCH Walkup
Figma, Asana, Confluence
UX/UI Designer
Hyphen is a fin-tech company providing high interest loans to borrowers. I was their first UX designer hire, and this role was when I really started to come into my own as a designer. I'd been using Figma for about a year and half at this point, but was still very much learning. Hyphen gave me the task of starting their design system from scratch, selecting a color theme, and setting the overall tone for what design would look like across the company. I was brought on specifically to work on Newton, their first SaaS product.
This was my first time creating a design system with purpose, and I started by making my Figma files as neat as possible from the get-go. It may seem like a small detail, but having my design files organized, labeled, and easy to navigate for the product manager I was working with was really important to me. Below is an example of how I made my design files easier to navigate.
Hyphen asked me to design a logo for Newton, a general style guide that could be used throughout the six SaaS suite products, multiple high-fidelity prototypes for their payments product, and a mobile walkup app for a client. I used Figma for every part of the designs and wrote up documentation in Confluence.
I completed the work in the requested three week turnaround time, all while familiarizing myself with the company and the highly-regulated world of banking.
One of the reasons Hyphen hired me was to design their first SaaS product, Newton, beginning with the logo. I decided to keep the Newton logo similar to the company's, but with a slightly different font and new, yet complimentary coloring.
Below are both Hyphen's original logo for reference (right) and the logo I created for Newton (left).
Since this was Hyphen's first in-house product, I knew I needed to begin with a style guide and general guidelines to empower developers, engineers, and anyone else who would need the structure.
When possible, I like to start with colors. Below, you can see a simple colors guide I made with hex-code values and their uses.
The first product I designed for the Saas suite was for payments. Hyphen's top priority was to enable users to upload NACHA files to Newton. This needed to be simple and display all necessary data, and we knew it would set the tone for the rest of the product suite regarding layout and navigation.
View the interactive prototype here.
The image above is the main page for NACHA upload flow. This screen is meant to give an overview, show the user the list of files that they have already uploaded, and, most importantly, offer an easy way to upload a file. This layout design, with the left sidebar for navigation and right drawer for further details, would be implemented product-wide.
The image above is what the drawer looks like when open. Whenever the user clicks any of the blue "file details" buttons in the files table, this drawer opens up. The action buttons at the bottom change based on the state of the file in question. In this example, the file hasn't been sent yet, so the "send file" and "delete file" buttons are available. If the user were to click on a file that had already been sent, they wouldn't see any action buttons.
The image above is the first step in the NACHA upload process. The user has clicked the "upload file" button, has selected the file with their operating system's "browse" functionality, and is waiting for it to upload. For loading states like this one, it is important to show the user that something is happening, even if they have to wait a few moments for the results.
Step 1: The image above shows that the user has successfully uploaded their file. It is very important to let a user know if their action has been completed successfully (in this case, that they have successfully uploaded their file).
Step 2: The image above shows how the user must enter in the file name before continuing on. The "upload file" button will be disabled until they enter in their chosen file name into the input field.
Step 3: The image above shows the final step in the "upload file" user flow. They've named their file, meaning that the upload file button is enabled and the user can proceed with uploading.
Hyphen's third-party client, Closing Cost Help, requested a mock-up of their prospective mobile application incorporating their brand themes and colors.
View the fully-interactive prototype I created here.
Unfortunately, Hyphen's SaaS project funding fell through, and the entire 16 person team hired for the project was laid-off, including me. I loved my time at Hyphen, and I'm grateful to have had the opportunity to grow so much as a designer while it lasted.
Even though this job was much shorter-lived than anyone expected it to be, I learned a lot, grew exponentially as a designer, and strengthened my Figma skills. Through this learning process, I was able to approach my next job with an even deeper understanding of design systems, best practices for setting up a component library, and some tips and tricks for developer handoff.
