Post with all the imbeded images can be found on Medium
[ibimage==35811==Large==none==self==null]
I Got 99 Problems & Design Is 1-98
One thing most people don't understand about websites is how difficult designing one actually is. While it is pretty easy to come up with an untested “million dollar idea”, design is really the first step in turning that idea into an actual product.
The reason why design is so difficult is because everyone wants to have good design! No one except maybe Craigslist, wants a basic website that looks like it is from 1995.
While it is very easy to recognize good design (Apple, Square, Medium, IKEA) from bad design (most Microsoft products), if someone told you to build something from scratch that had good design, you would probably be lost because design isn't something that is quantifiable. It is more just a feeling.
So without any tangible way to measure “good design”, most companies and startups (Tripsy included) just try to build something that appeals to themselves.
How hard could that be? I mean we know what we like right…
For example, we came across this Nest brochure that we loved. It was very clean, simple, and communicated their message perfectly.
[ibimage==35812==Large==none==self==null]
But then what?
Are we going to blatantly copy every aspect from their brochure? Should we try to mimic their “We’re Nest. We reinvent things.” slogan? What about only using their font? What if we used their color scheme but inverted it?
Basically even if you find good design that inspires you, at the end of the day you still have to make choices on how to incorporate it into your product…
Build Your Dream House
The only analogy I can think of that captures how difficult web design is for startups is if HGTV called you and said you won a contest for building your dream house. HGTV will build your dream house and pay for it, all you have to do is tell them exactly what you want.
Sounds easy right?
“I want a 5 bedroom house with a 4 car garage, stainless steel appliances, large master closet, a pool, and plenty of space for entertaining.”
If you only told those exact features to an architect, they could technically build a house to meet your requirements but it’s highly doubtful it would match your vision for your dream house. You might even hate it (“Seriously who thought it was a good idea to put a pool in the dining room?”)!
So therein lies the biggest difficulty in design; Not only do you want to make something that has “good design” but before you can move into your dream house, you first have to translate the grand vision from your head into exact specifications so you can actually build it.
While big companies have full time web designers, as a startup, we are not only the future owners of our dream house / dream website but are also the architects and general contractor. So as the architects, we have to decide the specifications for each part of our dream house. How big should each bedroom be? Do we want an open floor plan? How open of a floor plan should it be? What should the front of the house look like?
To make matters worse, just like building a house, we have an unlimited amount of features and aesthetics we can add.
It’s not hard to see how some startups never end up releasing a product because they are so focused on getting the design perfect…
Our Design Process
Every “designer” has their own process. This is our process for Tripsy.
We are far from expert designers, so we are probably skipping many steps that professional designers would find unconscionable but this is what works for us.
Since we are still in the early steps of building out Tripsy, this design process happens on an almost daily basis for every single new page or feature we are thinking about adding.
This process isn't something we think about doing, it just happens naturally.
1. Talk It Out
The absolute first step in our design process is to always get the ideas out of our head and into the open.
This can be done by either writing it down on a piece of paper or just by talking about it. Since there are 2 of us, we prefer to just talk it out.
Getting the ideas out of our head serves 2 purposes.
First, much like building your dream house, communicating our ideas forces us to take an actual position (“I want 4 bedrooms” instead of just saying “I want a big house”) and starts the process of translating our ideas into a tangible thing other people on the team can understand.
Second, openly talking about our ideas exposes them to criticism and critique, and many times helps other team members come up with brand new ideas.
Almost every “good” idea we have had so far has come from one of us putting something out there and then the other person building upon that idea by saying “Wait, what about this...”
While it is very easy to get bogged down in small details like “Our house needs to have dark hardwood floors,” that is kind of irrelevant when you don't even have a floor plan yet! So when we engage in this process of talking it out, we do it at a very high level. We don't talk about colors, fonts, or any aesthetic details.
2. Hit The Whiteboard
After we are both verbally on the same page with the new idea, our next step is to draw it out on a whiteboard and start to visualize what we have been talking about.
This step is really just an extension of step 1 because there is still a lot of talking back and forth but by starting to physically draw something on a whiteboard, we can get on the same page in terms of design.
[ibimage==35813==Large==none==self==null]
Putting our design down on paper or a whiteboard also starts to help us think of our design from a user’s perspective. Many times, what started off as a “good idea” in step 1 (“Let’s be minimalist and not even have a navigation bar!”) quickly becomes a bad idea when we start to draw it out in step 2 and realize the user experience would be terrible (“How will users navigate then?”).
Again with the whiteboard, we are focusing on a very high level and only draw things in boxes and circles to get the point across. Also since everything is on a whiteboard, it is very easy to quickly erase and add new things since nothing is permanent.
3. Mock It Up
After we have a solid whiteboard design, then we begin the process of transposing our ideas and designs onto the computer.
While we certainly could dive right into building our design in HTML / CSS, we have found it far more useful to first mock things up in Photoshop.
Since whiteboard designs always look different when transposed onto the computer, the flexibility of Photoshop allows us to spontaneously test out new ideas (“What if we moved the navigation bar to the bottom. How will that look?”) with just a few clicks.
[ibimage==35814==Large==none==self==null]
It is also in Photoshop that we start to slowly test different color schemes and fonts after the main design is complete.
4. Code It
Finally, after we are satisfied with our Photoshop mock up, we start the process of coding it and turning it into a live working webpage.
Since we use Photoshop, we basically have an exact mockup of what we want the final webpage to look like. Therefore it is 100x easier to code it because you know exactly what you need to do. Imagine trying to build a house without a blueprint…
[ibimage==35815==Original==none==self==null]
Occasionally after coding the final HTML, we want to make a small change like use a different font. Since we now have a live working demo, at this point it is far easier just to use Google Chrome’s developer tools and make temporary changes to the CSS rather than go back into Photoshop and change the entire mockup.
Final Thoughts
While everyone wants a website that exemplifies great design, the reality is that design is an ongoing fluid process.
The original Twitter of 2006 looks nothing like the Twitter of 2014.
The first iPod was literally a brick…
If Steve Jobs & Jack Dorsey couldn't get “good design” down on their first try, it is very doubtful you will be able to either…
So regardless of how “poorly designed” you think the first iteration of your product is, it is always better to just get something out there and then build upon it over time.
We are fully aware that whatever we put out now for Tripsy will look like an absolute joke (by our standard’s and the internet’s) if we are still at this in 5 years but again we feel it is better to get something out the door now and keep working at it, rather than try to create the perfect design the first time and in the process never release anything.
As always , if you liked this post (or hated it), you can follow our startup’s journey on Facebook or Twitter.
