Being a Designer at a Startup
If you have ever been a solo designer at a startup, you know how many hats that means you wear.
Hi, my name’s Derek. I’m currently on a design team of one at a startup called SamCart, an eCommerce SaaS product based in DC suburbia. We supply users with shopping cart templates geared towards marketers and people selling things online, along with reports to measure all of their sales data. Recently we launched our main product with a redesigned UI and revised product model. But let’s start from the beginning of my journey as a solo designer at a startup.
December ‘15
SamCart hired their first in-house designer (me)
*Side note: I finished my interview with a backwards swish basketball shot on our half-court basketball hoop. The whole team went wild. It was awesome.
But anyways, I was hired to bring a consistent design language to the SamCart product through an in-depth redesign, as well as redesigning the marketing page. I thought, “I’ll finally be working as a product designer, something I’ve been working towards for a while now, and not have to focus on the rest of the stuff I want a break from, like print and video.”
Boy, was I wrong.*
*In a good way.**
**We’ll get to what I mean.***
January ‘16
Rebranding SamCart with a new logo and color scheme
We’ll start with the logo. There were a couple things that we felt could use some improvements upon with the logo. We thought that the logo could work in just one color, so we chose a brighter blue and set the entire mark in that color. Secondly, the cart looked a bit more like a wheel barrel with the two handles instead of one. Along with the new blue, came complimentary colors, and a slew of grey’s to accompany the primary and secondary colors.
Below is the color palette from our design system and examples of the logo redesign.
With all good logos, comes it’s entrance, and exit, in a looping GIF. It’s more so just something I love to do, whether we use it for a loading animation or a video intro. We actually have used it for a few different applications.
I figured, if we are going to use this as a loading animation, it should be written in code, not just a GIF file. So I got to work on that.
February ’16
Animating new feature ads
Around this time, we were releasing a lot of new features. Since I had experience in motion graphics, I was asked to create short animations to promote these features.
March ‘16
Launching our new, redesigned marketing website (my first big web project with the company)
The first major web task I took on was redesigning the marketing website, or what you see when you go to samcart.com. I worked closely with one of our developers to get this built, and we used Sketch and Zeplin during the handoff phase. The landing page as it was, felt too long, information on it was redundant, and styles were inconsistent.
The screenshot of the pages are just too big to show here, so here is a link to what the site looked like when I started.
Original Site:
https://web.archive.org/web/20150910093402/https://samcart.com/
And here is a link to the new site implementing the new branding we were continually creating.
New Site:
https://web.archive.org/web/20160610065413/https://samcart.com/
April ‘16
Creating a custom icon library
As a connection to the general branding of SamCart, we needed to start creating an icon library. We knew these had to be a cohesive family of icons that could be used on the marketing website, the product, and any other materials we may create.
Below is what my icon Illustrator file looks like at this very moment as I am writing this. As you can see from the original grid, it is constantly growing. Most of them we have used, and some we have not, but that’s how these things go.
In order to keep the icons scaleable for the web, and change styles in CSS dynamically, the icons needed to be written in SVG and styled in CSS. So I created a library that we use everyday and that I add to as needed.
As an experiment for the website mobile menu, I created a prototype of two different options for us to use, then asked the Dribbble community what they thought would work better.
Then I built the winner in animated SVG/CSS to use for the web. (This was before I knew too much JQuery, so there are two files; one that opens and one that closes the menu.)
May ‘16
Starting to think about the main product redesign
Ah, one of the main things I joined the team for, to redesign the main SamCart product. Similarly to the previous marketing site, there were a lot of inconstancies from button styles, to page layouts, navigation, and graph illustrations.
For now, here some screenshots of what it used to look like. (Later you will see what it looks like now! 👀 )
Okay fine, so this is the very first digital sketch I made for the new Dashboard.
June ‘16
Creating Facebook ads for launch promotions
As we started doing more and more big launches and promotions, we needed Facebook ads to market to our target audience.
Did you know? Facebook ad guidelines require you to not have any text taking up more than 20% of the ad, and you can’t have anything that resembles a button. Limitations are fun though.
July ‘16
Designing print collateral for marketing purposes
With these big promotions came affiliates and people that we wanted to send print collateral to as a thank you and to offer them more marketing materials.
So, I got to oil my rusty print design joints. But hey, that’s what comes with being the only designer at a startup.
We printed this quad-accordion-fold booklet to explain to people the 1-Page Funnel concept. Here are the files we sent to print.
August ‘16
Accompanying promotional video with custom animations
Preparing for our biggest launch yet, we put together a series of videos to talk about the SamCart product and what the launch was all about. This meant adding flare to the almost one hour of total video with custom animations.
Here are some screenshots from those videos.
September ‘16
Launching the new SamCart with a redesigned tool
Finally! My designs were finally coming to life with this release of the new SamCart. After months and months of design and development work, we launched the redesigned tool.
October ‘16
Redesigning the redesign of the marketing website to match our new scope
At a startup, everyone is always busy working on something, and it got to the point where I wanted to maintain a certain design standard for the company, but was unable to get a developer to jump in there and change what needed to be done.
“That’s when you grab the code by the horns and teach yourself to do it. So I did.”
With a new release of the tool and new scope came the need to revamp our marketing site. Except this time, I built all of the front-end myself. Over the course of the past few months, I was able to get more involved with development. We hooked up the development environment on my computer and I dove straight in to fixing small design details that the other developers were just too busy for.
Here’s a screenshot of the new website above the fold, but go check out the actual site here.
It’s now much easier for me to maintain the marketing site and add or change anything needing work.
Side Note: I use real copy in my web designs, for a couple reasons. Doing so allows me to design around how much realistic text I might have in my layout. Also, it helps whoever is writing the copy to have somewhere to start from in case they are busy or need any inspiration. Lastly, it will only help my writing skills, which I am always working on.
Currently
Cleaning up the main product UI
Now that I am able to get into the codebase, I have been working on cleaning up the admin side of SamCart, the product tool. Being a startup, we tend to have to ship things quickly, meaning all of the details aren’t necessarily polished. And that’s okay. This just means I, as a designer comfortable with front-end code, can go in, change what I need to in order to clean up the interface, and ship revisions.
There aren’t really any screenshots to share with this point, so here is a list of tools I use that help me work alongside other developers to ship new code.
- Atom
- Terminal
- Command Line
- Git
- GitHub
- HTML
- CSS
- Chrome Dev Tools
Other Random Stuff
And there’s plenty of other random design tasks I’ve done out of need and fun
Other Stuff:
Company Swag (tee shirts, magnets, stickers, etc.), eBooks, Presentation Templates, Blog Images
***What I mean by being a designer at a startup product wasn’t what I imagined it would be is a good thing is this: realizing that my role and design team of one was not just originally what I was brought on for actually has helped me grow into a more diverse designer. I now can call myself a front-end designer, meaning I can confidently jump into the front-end codebase, change or add anything I need to, and even build new things from complete scratch. It also means I have improved my time-management skills, balancing many diverse projects with tight deadlines at once, understanding how to sell a product and with what design materials.
In Conclusion
Being a designer at a startup, especially the only one, requires a lot of focused work. But it helps you to learn more skills than you thought you could, adapt to fast moving projects, compromise on everything not being perfect, being able to figure out how to fix the things you compromise on, and just be an all-around better designer.
If you have any questions about my process or journey so far, tweet me @dmtors. Also check out SamCart if you sell things online, and let me know if you have any questions regarding our product.
