The Intersection of Design and Technology: How to Find Development Harmony

August 10, 2015

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.

Champion Advertisement
Continue Reading…

A History of Separation and Reconciliation

Computer-science classes have traditionally emphasized functional engineering, while the art schools in which visual designers have been siloed focus only on look. But as the software industry’s focus has shifted from software for professionals to software for the masses, these disciplines have begun to overlap. Plus, user experience has emerged as a critical factor in software development.

Consumers now expect authentic branding that flows into seamless Web experiences. They naturally gravitate toward brands and services that have clear visual identities. But branding and visual design only get people in the door. If a product lacks features or functions poorly, users will switch to another service. This is why Gmail now dominates—even though it was late to the email game. Its massive storage capacity, powerful search, smart spam filter, and easy-to-use user interface have delivered both form and function, leaving other email providers in the dust.

Think Like a User

However, it’s not possible to accomplish the mission of marrying form and function until UX designers have learned as much as they can about their systems’ users and how they work. They need to gain such a deep understanding of users that they begin to think like them.

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

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. 

Founder and President of Rubenstein Technology Group

New York, New York, USA

Jaron RubensteinJaron had an early interest in human factors and human-computer interaction that transitioned into a focus on creating modern, empowering user experiences. His experience, deep technical expertise, and passion for design imbue his work with his creative partners. He empowers them to identify opportunities, manage complex projects, and maintain the integrity of their work. Rubenstein Technology Group is the leading technology partner for some top creative firms. Brands ranging from Bloomberg to Harvard University to Wolf-Gordon have benefited from his team’s design-led engineering approach.  Read More

Other Articles on Design Process

New on UXmatters