web-design_3-434850-editedTalk to any engineering team about their process and you’ll hear a common theme: speed. There’s an entire culture around shipping fast and deploying constantly. But getting an MVP out the door isn’t just about making sure it works. It also has to have a valuable user experience. That’s why it’s critical to have a design process that doesn’t just keep up with development, but helps designers stay one step ahead.

Designers should play a key role in every iteration of a product from concept to launch, and beyond.new_twitter_bird_vector_by_eagl0r-d2yth6g I saw how much of an influence that can have on a final product while working on Tally, a light-weight app we created to get feedback from our customers. We use it all the time internally to help us gauge how customers react to new features in the HubSpot product.

When we started, we had 11 weeks to design and build the app for our scheduled release. Our Engineers were in our Dublin, Ireland office while our Product Manager, UX Researcher, and myself were at HubSpot headquarters in Cambridge. Because of the distance and tight time frame, we had to come up creative ways to share ideas to make sure we were constantly aligned.


Sketching to Set the Pace

The clock was ticking so we had to keep it simple. Starting with too many features would mean rushing to the finish line and result in a weaker user experience. Cutting everything you can at the beginning enables you to focus on making a few features really great. As we narrowed down ideas, I would do some rough sketches on paper to clarify those ideas visually.

I took pictures of the sketches with my phone, uploaded them to inVision (our favorite), and linked them together. I was then able to share a link to the sketches in our HipChat room and the team could click through the flow. This made it incredibly easy for everyone to visualize how the app would work early on and work on iterations together. Collaborating around sketches allowed us to do this very quickly and define the scope of the entire app with a matter of days. The added benefit was that we could imagine how the product would look once we were done, getting everyone energized around the same goal. There was more momentum once we saw what we were working toward. 

userexperience_sketchesEarly sketches of Tally

 

There’s something immediate about drawing out an idea and sharing it with someone. Even if it’s rough, a sketch provides definition and sparks questions.new_twitter_bird_vector_by_eagl0r-d2yth6gQuestions like, “It looks like we removed several buttons, are we taking away those features?” Design plays an important role in simplifying the problem. And the simpler a design, the faster you can build it.


Communication is the Most Powerful Design Tool

With all the screens defined and the overall flow in place, we then moved on to high-fidelity mockups. As I designed the mockups, I would replace the sketched versions of each screen. That way, everyone could keep going back to the same place to see how the design was evolving and be part of the process the whole time.

sketches_mockups_tallyTurning sketches into high-fidelity mockups

 

After all the screens were designed, it was a matter of turning that into an actual product that looked like the designs. Sometimes, things can break down a bit at this stage. The designer “hands off” the designs and hopes the developer gets it right and knows the intent behind everything we were thinking. At first, we had some back and forth. A developer would ask me questions about details, like colors or font sizes, so we decided that it would be easier if they had the original design document to work off of. I design with Sketch, so I just sent over the Sketch app files. This ended up working really well. They were able to inspect all the elements and easily export anything they needed. 

I think we were able to remove a ton of friction from our process by keeping an open dialogue like this every step of the way and by getting everyone on the same page early. The more we communicated, the better the end product started to look. Sometimes that meant working together to figure out the best plan of attack, other times it was as simple as sending a design file with an icon on HipChat right when they needed it. I even made a few UX related pull requests on GitHub to try and compliment their workflow. Things like this take minimal effort but can make a developer's life way easier.

Staying engaged throughout the process did two things: it helped keep the execution aligned with the design and helped me to build trust with the developers. When design is integrated really well within an engineering team, it not only helps ship stuff fast but also ships a delightful user experience.


Fast Design Doesn’t Have to Be Bad Design

On a weekly basis, it’s not uncommon to hear someone say “I love Tally!” We even had someone that uses Tally a lot give a presentation titled, “Tally: A Love Story”. It doesn’t just work, users actually love using it. That response is a result of all the little steps we took to get to production; if we didn’t take a scrappy, collaborative design approach, Tally would have been a totally different experience.

userexperience_tallyTally in action

It also helped to have amazing developers. It made executing designs much easier because they could infer interactions from the static mocks, injecting their creativity into the process. Their execution inspired my design and my design their execution. That’s why if you’re a designer, you shouldn’t underestimate the power you have to influence the direction of a product. The minute you put something on paper, it becomes a reality that people can talk about it. Then you can gather feedback, iterate on ideas that are tangible, and work closely with your team to bring that idea to life whether you have 3 months or 3 weeks.

Sometimes design can be seen as something that slows engineering down. At HubSpot, we know that design should do the exact opposite. Smart product design simplifies problems, freeing up engineers to ship even faster without sacrificing quality. 

Recommended Articles

Join our subscribers

Sign up here and we'll keep you updated on the latest in product, UX, and engineering from HubSpot.

Subscribe to the newsletter