An Experiment with Designing in the Browser

A major part of our 2014 rebranding initiative is the launch of a new website. The current version of our site is over two years old and doesn’t reflect many of the changes we’ve made since it launched. Being our own best client is something we’ve always struggled with though; especially when it comes to such an important piece of the puzzle.

What I like most about internal projects is the opportunity we have to try new things before recommending an approach to a client. Live video feeds as background components and mobile optimization are a few of the things we’ve experimented first as part of a redesign.

This time around our exploration has more to do with process, specifically the design process, than it does with technology and new features. From an interface perspective we typically spend two or three weeks in Photoshop designing concepts and addressing feedback. We make adjustments in-browser too but not usually on a grand scale.

As many of our colleagues have done we wanted to explore a design process that relied much less on Photoshop and moved quickly to a functioning concept in the browser. To expedite the process further we sought the services of Hacker Studios to provide an isolated environment for our design team. Experimenting with where and how our team works is important too.

design-in-browser-img

The process started in October after we received the final version of our new logo from the awesome team at Carve. By taking a look around you can tell that we’re not live with a new site yet and have in fact abandoned much of what was created earlier on.

I took a minute last week to ask our Sr. Designer, Jon Rundle, what he thought of the process and how we might be able to modify it to work better for ourselves and our clients:

JK: What were some of the reasons behind taking this approach?

JR: We wanted to speed up the design process by skipping most of the time we’d normally spend in Photoshop. More focus on responsive design from the start was a reason too.

JK: So, we tried it but the results aren’t exactly what we’d hoped for. What was the experience like for you?

JR: The process itself was much faster than normal. I found myself working on interactions while designing which was a bit of a distraction but it also got me thinking about how things worked much earlier than I usually would. I felt a little limited in my ability to create the vision I had in my head without using Photoshop. The rigidity of designing in code meant it took me longer to see design results and I couldn’t always be as free-form and experimental.

The one thing I did like about the process was the emphasis it placed on writing proper mark-up.

JK: Looking back, what would you change about the process?

JR: I think there needs to be an appropriate balance of design in Photoshop and design in-browser. We moved too quickly into code without having a solid conceptual direction. Photoshop should be used to come up with broad, generally-accepted concepts with niceties and details in code. Most of the in-browser design work I’ve seen isn’t overly creative.

We’ve made some pretty solid progress since reverting back to our standard process and expect to launch our new site at the end of this month.




On


Ready to work together?

Reach out with questions or to get started on your next UX research or product design project. You’ll hear back from us within a day.


Contact us