In their A New Toolbox: Secrets from Happy Cog presentation at Texas State University, presenters Kevin Sharon, Design Director at Happy Cog, and Sophie Shepherd, Designer at Happy Cog, reveal Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way.

• When kicking off a new web site project, talk to stake holders and the people at the front desk. They know where the weaknesses are in the company’s forward facing presence because they hear them every day from the customers calling in with questions.
• Talk with client contact or liaison before kickoff meeting to get a feel for project and political landscape. This approach avoids walking into traps and reduces the chances of messing up the start of project.
• Use survey tool like Ethnio to get site design feedback and generate leads for user testing later on.
• Design involves a Character, Conflict, and a Resolution. The Character is the site users illustrated in a user profile. The Conflict is the problem with site or business. And the Resolution is the design solution you work with the client for the Character.
• Give client 30 celebrity mugshots with goal to pick which ones fit business’s brand. Then use Style Tiles based on each celebrity.
• Learn clients’ internal language and help them learn your design language.
• No more wireframes. Build prototypes instead, but call them “HTML Wireframes” to avoid confusion that is how the site will look.
• Tools to make quick HTML wireframes: Codepen for elemental pieces, grid systems, and roll your own for more customization
• If you can’t click through it, it’s not a prototype. Prototypes are for user testing.
• A sign of a good designer is that they do a lot of paper sketching as this is the quickest way to get the best idea.
• Turn HTML wireframes into design modules.
• Don’t just brush up an approved wireframe with type and be done. Go the extra step and design within that space.
• Keynote resizes grouped elements in a way that Photoshop can’t, which makes it ideal for creating responsive design modules or element collages.
• Involve developers’ input into the design process as they make a lot of decisions in the building responsive web sites.
• Selling a design continues after you get the project. You have to get clients engaged, so don’t show design comps or other elements of the design process like you are showing an apartment.
• Always have a reason for your design and each part of your process. Finding your reasons start with research.
• Practice your writing skills to improve client communication as everyone on a team gets a direct channel to the client.
• Realize that a good writer is someone who can organize their thoughts.
• Add a small touch of humor when writing to clients. For example, tell them in passing on a deliverible, it’s National Margarita Day today. (Only works on February 22^nd.)
• Two things a designer has to get used is taking public criticism and realizing that clients will change a design after it’s handed over.
• It’s not Responsive Web Design, it’s web design.
• Every client needs to have a project manager to work with an agency. Projects that didn’t have a client liasion haven’t gone well.
• Even if the client liaison or project manager is part-time, temporary employee for the client, it benefits the project as you need someone to filter email messages, be mindful of political landscape, work on deliveribles, etc.
• Take sketches of HTML collages, scan them, and use them to compose different layouts that are then giving to client/design review
• Use tool like GatherContent to, well, gather client content.
• When working with clients on a project, expect: requirements, content, and feedback.