The Intersection of Design and Technology: How to Find Development Harmony
When design studio karlssonwilker came to me with a concept for Wolf-Gordon’s new Web site, another development firm had already given up on their vision. The studio wanted an interactive experience that would allow users to leaf through wall-covering swatches as though they were in a bricks-and-mortar store. Their previous development firm had believed that this vision was too ambitious. The site design would require a cutting-edge technology implementation.
Anyone who has ever tried to bring a product to market knows this challenge well. There’s a tough balancing act between form and function. Functional solutions often lack visual appeal, while designs with a visual focus sometimes lack functionality and usability. But that’s no reason to cite irreconcilable differences and give up. By taking the right approach, designers and developers can marry form and function—hitting the sweet spot between simple engineering and a seamless user experience.
A History of Separation and Reconciliation
Think Like a User
Two straightforward ways of gaining user insights are generative user research and usability testing, through which you can understand how users work, learn what capabilities they need in an application or system, and identify the painpoints they struggle with. By working to remove the most serious issues, you can greatly improve the user experience. While conversations with users can yield useful insights, many users have difficulty explaining their experiences. So observe them in action, preferably in the environment in which they typically work. Ask users to perform the tasks for which you’re designing solutions. Having users follow industry-specific workflows for particular tasks can enable you to map patterns across an entire industry and develop solutions that ease an industry’s adoption of your product.
Observe users interacting with competitive solutions that were designed to address the same issues as your product. Determining where you’re falling short and where you’re succeeding can ensure that you don’t add or eliminate the wrong features—negatively impacting the user experience.
When interviewing users, make sure to ask them about cases where their current tools simply don’t enable them to accomplish their goals. Dig for details. When users get bogged down by a time-consuming manual process or an odd circumstance that requires a workaround, they’re probably not the only ones. Addressing these painpoints can lead to design innovations.
How to Marry Form and Function
Now that you understand how your users perceive your system, you can start thinking about how to marry form and function. In the brand era, harmony is more important than ever before. Throughout every stage of a project, you should take an integrated approach to design and development. Here’s how to make sure that form and function go hand in hand every step of the way:
- Design at resolutions that people will actually use. Whether you’re designing for the desktop, tablets, or mobile devices, create visuals at the right aspect ratio and pixel dimensions for the target screen. If your first canvas matches the final display, you’re more likely to design with aesthetically pleasing proportions.
- Create an interactive walkthrough. Present interactive designs to your team or a client using a browser and a device emulator or an actual mobile device. Using realistic presentation throughout the design phase will help you to identify common issues for smaller screen sizes—for example, text that’s unreadable or buttons that are too small or too close together.
- Use an iterative design process. Plan for iterative cycles of research, design, development, and testing, and expect that features will change at every stage of development. Today’s leading technology designers create user experiences incrementally. For example, Steve Jobs famously demanded that hardware designers change the first iPhone’s screen from plastic to unscratchable glass just weeks before production began, because he realized that his keys had scratched his phone in his pocket.
- Test on real devices. Before beginning development, create a prototype of the user interface using real code and displaying it on real devices. Test your prototype experience in the most critical browsers and most common devices for the target audience, then iterate your design further, if necessary. Save the heavy-duty coding until the last stages of development to ensure that you’ve got the user experience right from the start.
- Gather user analytics during and after development. W. Edwards Deming famously wrote, “In God we trust; all others must bring data.” Your team or client will want quantitative measures of project outcomes, so build analytics into each solution before it launches.
By taking an integrated approach at each step of the design process, you can ensure a happy ending for your team or client and your users.
Consider Google In-Page Analytics and heatmap visualization tools like Crazy Egg. These will show you how much time people spend on your site or application, which of its functions they use, and how they interact with it. In future releases, you can use these metrics to optimize the user experience and information hierarchy.
My team followed this process to find the intersection of form and function for Wolf-Gordon. Through collaboration, real-world experimentation, and iterative design, we were able to develop a seamless experience—without abandoning karlssonwilker’s core concept.
Any product development team may experience conflicts, but that doesn’t mean form and function need to be separate. By taking an integrated approach at each step of the design process, you can ensure a happy ending for your team or client and your users.
This article originally appeared in UXMatters.com.