Professional Approaches for Effective UX Design
North Kingdom is a creative agency based in Sweden with an international scope. The studio works with clients around the world to create digital projects that build strong emotional connections between customers and their brands. One of their recent projects was the award-winning A Journey Through Middle-Earth, There and Back Again, an interactive website built for Warner Bros to promote their 2013 release of The Hobbit: The Desolation of Smaug. The interactive site got a full product upgrade for The Battle of the Five Armies because of its success. North Kingdom helped design the site, which used WebGL technologies, a JavaScript API for rendering 3D graphics in browser without the need for a plug-in.
One key player in the project's success was the company's User Experience (UX) director, Alfredo Aponte, an industrial designer whose brief sabbatical in Europe a few years ago first brought him into contact with the North Kingdom.
When Alfredo first discovered North Kingdom, the company was looking to expand its offerings beyond web design into more interactive products that were more UX-focused and took advantage of technologies like WebGL. Traditionally, North Kingdom was "creative-driven and design focused," he states, but the company was looking to bridge the gap between technology and design. UX would ultimately prove to be the "glue" that connected them.
To help extend their offerings, North Kingdom's founders would need to shift the company's collective mindset from one that was mostly artistically-focused to one that was more user-centric. UX needed to become a larger consideration.
At the time, Alfredo shared similar interests and being that his background was quite different from what North Kingdom had previously done, the studio was interested in how this product designer viewed the connection between users and products.
We recently spoke with Aponte (also a Digital-Tutors author) about his design experience, the Middle-Earth project, and his philosophy on UX.
"If you can first identify both the brand's goals and the user's expectations," Alfredo explains, "then you can start figuring out how to align and connect them." Discovery takes extensive preparatory R&D before even beginning to design, and is why "the first 10% of any new project is so important". The discovery step is where ideation takes precedence, where the creative process goes about playing with connection and approaches.
After discovery, comes the "definition phase". This phase is where specific ideas and approaches must be finalized. It's where you make the decision where you want to "put your attention...and nail down some of the key things you want to work with." Ideas are moving toward more concrete realizations. There is a plan and approach that's to be carried out. This is when the development begins the initial phases of forming a product.
First and foremost, building an effective product involves determining the best platform or medium through which to provide the experience. "Whether it's immersive engagement or through a product's service," Alfredo explains, "you look for the best form of communication and how to build that relationship through a project, through an app, or a product itself."
For the North Kingdom team, the platform for A Journey Through Middle-Earth was a web browser experience that used the power of WebGL graphics acceleration to enhance the immersive quality of exploring Tolkien's land and characters. The platform also provided a direct connection to the film by adding elements such as cut scenes from the movie. These scenes were usually taken from particularly dramatic moments, which helped established an emotional connection to the characters.
Supporting all of the discovery, definition, and development steps is a rigorous quality and assurance testing that keeps the project focused on the intended experience.
"Through design and development, we make sure that the UX we set out for in the beginning is being matched through the design elements. Through QA testing, we revisit some of that thinking and make sure that the QA testing honors some of our ambition but also to check off some of the functional elements that we know are essential for the project to work right."
Alfredo told us about the Build with Chrome project that North Kingdom began with Google and LEGO in 2012 to celebrate the 50th Anniversary of the iconic building block. BWC is an interactive site that let's users build with digital Lego bricks. Most of us are familiar with the audible snap of two Lego blocks as they're put together. This sound element was an essential part of North Kingdom's approach to making the building experience as tangible and familiar as possible. He explains:
"If you ever go through the experience of Build with Chrome and and mute the sound, it doesn't feel satisfying. There's something that is always missing. It's the simple sound of the LEGO bricks clicking and snapping. I think we spent three weeks just to make sure that snap was right. We knew that snap was so iconic to building with LEGO's. That sound element was so valuable for the visual experience. Even though you're not tangibly touching LEGO's, you know they're LEGO's because of how they're snapping together. When done right, that kind of feedback is so valuable to elevating the overall experience of products."
With such small details making such large differences in user experiences, it's easy to see how UX designers don't take anything for granted. Getting the snapping sound even slightly off could have meant the difference between users feeling immersed the digital experience or completely alienated.
Another future change Alfredo sees is towards the use of multiple screens. "I think Google is right when they said that the experience is going to be on multiple screens. It's not just going to be on one screen in the future. How we communicate on multiple screens is going to vary. It might be that I'm more immersed in my tablets or taking quick action on my phone while getting alerts on my watch. I think the form of communication is not going to be the same across, but it needs to work with all. That's going to be a big challenge for UX in designing for the overall user experience."
Defining UX
The phrase "user experience" or "user experience design" was first coined by architect, Donald Norman who was looking for an umbrella concept to describe the user's total experience. UX is sometimes confused with the term user interface or UI, but this is only one part of many components of the user's overall experience. UX can include visual design, information architecture, interactive design, human-computer interaction, and the like. With so many elements making up user experience design, it's obvious that UX directors like Alfredo have many variables to consider when organizing the design of an effective product. It's a philosophy that sees UX design as a kind of intersecting point between what a brand wants to do and what a user actually experiences. Identifying these two points let's you to begin narrowing down the possible solutions to the problem of how to connect the goals and needs most effectively. Another point to consider with UX is that it's practically ubiquitous within every industry from government to private industry. Whether you're designing a physical object like a seat on a commercial airliner or something intangible like an app, consideration for how users experience the product is key. This is a relatively recent priority for companies who mostly based the "success" or "failure" of a product on its functionality or aesthetic.Collaboration
For Alfredo, getting UX right is a collaborative effort among the North Kingdom team. "UX is a shared responsibility among all team members," he states, "Anyone can bring their perspective to the project." A collaborative approach to UX brings the practical experience of each individual department. "They understand the limitations of what is feasible or what feels right in their skill discipline," he explains, "be it development, design face, UI, or even on the service side." Good UX design teams know what's both desirable and possible.Steps within the UX Pipeline
The road to creating an effective UX for a product often begins with thorough preparation: an understanding of your client's goals and their specific customers' needs. Alfredo calls this the "discovery phase" of the process. It's where you come to understand all of the "ingredients and pieces" you have to work with.
"If you can first identify both the brand's goals and the user's expectations," Alfredo explains, "then you can start figuring out how to align and connect them." Discovery takes extensive preparatory R&D before even beginning to design, and is why "the first 10% of any new project is so important". The discovery step is where ideation takes precedence, where the creative process goes about playing with connection and approaches.
After discovery, comes the "definition phase". This phase is where specific ideas and approaches must be finalized. It's where you make the decision where you want to "put your attention...and nail down some of the key things you want to work with." Ideas are moving toward more concrete realizations. There is a plan and approach that's to be carried out. This is when the development begins the initial phases of forming a product.
First and foremost, building an effective product involves determining the best platform or medium through which to provide the experience. "Whether it's immersive engagement or through a product's service," Alfredo explains, "you look for the best form of communication and how to build that relationship through a project, through an app, or a product itself."
For the North Kingdom team, the platform for A Journey Through Middle-Earth was a web browser experience that used the power of WebGL graphics acceleration to enhance the immersive quality of exploring Tolkien's land and characters. The platform also provided a direct connection to the film by adding elements such as cut scenes from the movie. These scenes were usually taken from particularly dramatic moments, which helped established an emotional connection to the characters.
Supporting all of the discovery, definition, and development steps is a rigorous quality and assurance testing that keeps the project focused on the intended experience.
"Through design and development, we make sure that the UX we set out for in the beginning is being matched through the design elements. Through QA testing, we revisit some of that thinking and make sure that the QA testing honors some of our ambition but also to check off some of the functional elements that we know are essential for the project to work right."
Striking a Balance with UX
Another consideration for A Journey Through Middle-Earth's project was effectively engaging the large variety of users it would serve. The main distinction being people who like to be lead through an experience versus those who like to freely roam, choosing what experiences they want to have. Alfredo and his team wanted to design for both. He explains: "People have habits. They don't like to change those habits usually, but people also want to feel engaged. They want to feel like they have control. It gives them pleasure and confidence that they know exactly what they're doing." For designers like Alfredo, establishing this balance of user control is the holy grail for UX. This is another way that UX design is still so widespread and important. Whether it's a video game, a film, or a website, designers must consider how much the user experiences control of their environment. Give them too much, and they may become confused or unknowingly miss the intended experience. Give them too little, and they may experience frustration and abort their interaction outright.Building Emotion in Your UX Design
Getting a user's full attention and connecting with them emotionally is what UX is all about. However, there exists an almost infinite number of ways to go about the process. What design elements you choose will depend on, at the very least, the project's context, viewers, and intended experience. But we asked Alfredo which design elements he felt were most effective at appealing to users emotions. "I think that audio cues are an example of an element that projects fail to take advantage of," he explains, "Sounds can be build very emotional and powerful moments that can go a long way." Movie-goers understand how important musical scores are building suspense in a scene, for example. But Alfredo isn't talking about such larger elements of sound. For UX designers even the smallest sound elements can have a profound effect on a user's experience.
Alfredo told us about the Build with Chrome project that North Kingdom began with Google and LEGO in 2012 to celebrate the 50th Anniversary of the iconic building block. BWC is an interactive site that let's users build with digital Lego bricks. Most of us are familiar with the audible snap of two Lego blocks as they're put together. This sound element was an essential part of North Kingdom's approach to making the building experience as tangible and familiar as possible. He explains:
"If you ever go through the experience of Build with Chrome and and mute the sound, it doesn't feel satisfying. There's something that is always missing. It's the simple sound of the LEGO bricks clicking and snapping. I think we spent three weeks just to make sure that snap was right. We knew that snap was so iconic to building with LEGO's. That sound element was so valuable for the visual experience. Even though you're not tangibly touching LEGO's, you know they're LEGO's because of how they're snapping together. When done right, that kind of feedback is so valuable to elevating the overall experience of products."
With such small details making such large differences in user experiences, it's easy to see how UX designers don't take anything for granted. Getting the snapping sound even slightly off could have meant the difference between users feeling immersed the digital experience or completely alienated.
Challenges for the Future of UX
We asked Alfredo what the future of UX looked like from his perspective, what challenges it may face moving forward. One interesting point he brought up was the growing absence of physical objects to represent actions within user interfaces. Symbols like phone and keyboard icons are becoming more and more unfamiliar to newer generations of users because they've never used this technology. "The icons and the language we have on our phones aren't familiar to some younger users anymore. They're like 'why does this icon look this way?'. There's a whole lost history at the moment. It's going to be interesting to see how that unfamiliarity butt heads with current representations. Are brands going to make the switch or are they going to be stubborn and stay put? It's going to be interesting."
Another future change Alfredo sees is towards the use of multiple screens. "I think Google is right when they said that the experience is going to be on multiple screens. It's not just going to be on one screen in the future. How we communicate on multiple screens is going to vary. It might be that I'm more immersed in my tablets or taking quick action on my phone while getting alerts on my watch. I think the form of communication is not going to be the same across, but it needs to work with all. That's going to be a big challenge for UX in designing for the overall user experience."
