Look To The Futura: Our Design Process
Someone’s got to dive into design at DreamHost. In this case, it’s me. At the beginning of last year, I became the first designer/front-end developer working in DreamHost’s development department. My primary focus is working on the admin panel you all know and love. The biggest project I’ve had a hand in is the user interface for DreamObjects, the public cloud storage service we recently launched.
We didn’t really have an established design process that I could jump into, so part of my time was spent trying to figure out how to optimally work with the team. This post is basically a behind-the-scenes summary of our process.
When you partner with DreamHost, you get access to WP Website Builder and more than 200+ industry-specific starter sites for free!We’ve Got the Ultimate Website Design Tool
1. Research
Every new design project starts with a common element – lots of questions. Questions like:
– What is involved?
– What are the business and technical requirements?
– How is this solved elsewhere?
– What do we have to work with?
My sketchbook is 75% lists, notes, and questions and 25% sketches from those discussions. Part of my goal is to make an interface that is easy to use. You really need to understand the whole system before you start trying to figure out ways to present it.
2. Wireframes
By far, my favorite part of design is wireframing. There are hundreds of methods you can use; paper sketches, Adobe Illustrator, Keynote. My drawing skills are on par with a four-year-old who just chugged a can of Coke, so I use an app called Balsamiq Mockups that I really love.
Related: How to Wireframe a Website (In 6 Steps)
The point of the wireframe stage is to focus on structure and user interaction; you can rapidly get your ideas down and not worry about aesthetics. I used to go straight to Adobe Photoshop and work my ideas out there, but I was spending too much time on trivial things like whether this 1px drop shadow should be mother-of-pearl or off-white…(It’s eggshell, btw).
3. High-Fidelity Comps
Once the layout is locked-in, Photoshop comps are created to get the right look-and-feel. This is where the visual language is refined – color, type, callouts, buttons, etc. This is where the shiny happens.
With DreamObjects, we wanted to level-up the design of the panel. We spent a lot of time working on a more modern look to these pages. It was challenging to design a page that wouldn’t look out of place surrounded by the old panel navigation and header elements.
Sometimes skipping high-fidelity designs and going directly from wireframes to code is possible. Hi-fi comps take the most time out of the whole process. I try to save them for when there’s a significant amount of layout change. When there are already good design patterns in place on the page, going straight to code for small features can save you time. And we all need more time.
4. Iteration
Some designs get honed, some never leave my hard-drive. Once I have three to five versions that I’m confident in, I’ll get the team together to discuss them and get feedback (more notes). Sometimes requirements change and new ideas come to light. You have to be able to adapt.
Once a design path is narrowed down, we’ll invite a few users and run functional user experience (UX) tests on the design. We want to make sure the user interacts intuitively with the interface. UX testing is great for determining if we actually are on the right path. It helps us avoid being blind – after staring at a feature for days or weeks, you start getting comfortable with the user flow and can overlook obvious flaws. This is the time to bring them to light – before they’re in the wild.
There are different ways of doing UX tests, but the one we often use involves making a Keynote presentation. Keynote allows you to create hyperlinks on elements to act as navigation, basically making a prototype of a working user interface. Two of us will be in the room while the user is using the interface. Being so involved in the design, I prefer to watch and to take notes while the interviewer asks questions.
5. Prototypes
The end goal of a prototype is to have working code that I can hand-off to another developer to make work with the system. I replicate as much of the functionality as I can, so even though it doesn’t actually do anything, it looks like it’s doing something. This makes it easier for developers to integrate into the system because they can see where the back-end heavy lifting needs to happen. It also makes the Product Manager’s job easier because it simulates having a working product.
Last year I aimed to get a good CSS framework in place. This will make front-end development easier for everyone in the future. We’ve rolled our own version of Bootstrap to use, which is still getting tweaked and honed. Just last week I made an icon webfont so our icons aren’t images and can scale freely. There’s a lot of front-end optimization that can happen, and new tools are being made every day.
6. Reap the rewards
Collaboration is a big part of working at DreamHost. Iteration is key because everyone’s ideas are valid and we’re all building the best product we can. At the end of the day, you’re who we’re making this stuff for, and a designer’s job is to make it easy for you to use.
As a first post about design, I thought an overview would be helpful. In the future, I’ll drill down into the gritty aspects of design, UX and front-end coding.
