What are the Actual Deliverables?

The mobile Tipping Point is now behind us. E-commerce is booming on mobile while it’s leveled off on PCs. And no matter your age, your parent(s) probably use a smartphone now.

This is the new reality in which we’re operating. Pundits had been predicting it for years so it comes as no surprise – and it’s likely the stakeholders in your organization have some understanding of what digital success looks like in this new world.

But just because your stakeholders know good multi-device user experience, it doesn’t mean your internal processes are ready to make that happen. We are creatures of habit and it is not easy to abandon trusted methods that worked in the past.

Generalities about a different process are one thing. But one of the first things you may wonder when it comes to a multi-device interactive project is “What are the actual deliverables?” The short answer: that depends.

Sorry.

In this article we’ll describe how Crux Collaborative has been evolving our client deliverables in these ever-changing times.

Growing Expertise 

As recently as three and a half years ago, many organizations did not see the need to worry about mobile at all – and industry experts couldn’t blame them.

“Not all websites need to go mobile now. Companies that need to extend their core services to their users (like those in travel and banking) certainly do, but a manufacturer of commercial jetliners and military aircraft or a provider of specialized industrial gases would probably not need a separate mobile website now, though that may change in a few years.“

– Lyndon Cerejo, Smashing Magazine (May 2011)

Crux Collaborative has now been through many projects requiring multi-device support, whether responsive site redesigns, hybrid site overhauls, web apps or native mobile apps. We’ve learned lessons and adjusted our methods along the way, all while keeping a keen eye on the successes and failures of others in the industry.

Your organization probably has less opportunities to rapidly learn, repeat, and become comfortable with the new ways teams are working to support all devices. More challenging still – your leadership may not be aware of the biggest challenges standing in the way of success today.

Designing for Every Device

But before we talk about the deliverables and process, let’s review the landscape. In some ways, layouts and functionality have evolved to be simpler. We’ve done away with “pop” in favor of well-spaced and usable content.

New constraints and limitations, however, can make basic solutions very challenging when accommodating for myriad factors like screen size, thumb size, geo-location, screen orientation, swiping and zooming (to name a few).

This is precisely the reason why old-fashioned wireframes are less useful today than in the past. We must account for so many factors that cannot be shown on a static sheet of paper. But we know that at least some of your stakeholders will be expecting to see them.

The Wireframes Void

Wireframes have played such a critical role in the past – and we at Crux Collaborative long opined they are vital to the success of a project. This is because, in our experience, they have served two essential purposes.

Traditionally, wireframes served as 1) a mechanism for client approval of key functionality prior to visual design; and 2) critical blue prints for both front-end and back-end developers.

That is the challenge facing us. Interactions have become too complex for static wireframes, yet we must account for their vital role in the past – and educate stakeholders about this seismic shift in the process ahead of time.

The challenge becomes helping the client and project team feel comfortable with the fact that the problem solving is happening, even if the wireframes are not. When you don’t have the satisfying thump of a thick wireframe deck to show all the work that’s been happening, you need trust and comfort between client and project teams to recognize that the “work” shows up in a different way, and on a different timeline than we’ve all been used to.

Project-Based Deliverables

We could try to define a magical process and use it across the board on all projects – but that would guarantee disaster. Each project and team is unique. As consultants, we tailor the project and deliverables to meet the clients’ needs.

In some cases, it may still make sense to build a small set of core traditional wireframes to establish a common language around the user experience and subject matter. In other cases, we work down an iterative path using Axure, UXPin, or another tool to both show and describe the functionality. And in other cases, we may avoid formal documentation altogether and transition directly from hand sketches into visual design or prototype.

The key in this early phase of projects is to ensure everyone knows what to expect, and they understand that things may change as a result of discoveries made along the way.

Visual Design and Prototyping 

If a team is knee-deep in .PSDs before considering layout changes and alternate viewports, opportunities for optimization and innovation will be overlooked.

– trentwaltcon.com (July 2, 2103)

Project goals vary significantly when it comes to visual design. We have found one universal fact to always be true: client teams become more engaged when they can see something “whole” on which to base their feedback.

So, with caveats in place, we often provide a glimpse into a couple of pages at 2-3 breakpoints. We have the luxury of a code-minded team, which helps us avoid suggesting or designing unrealistic features or layouts.

This brings us back to the wireframes void discussed above. Once the visual system is at least partially approved, we can move into the prototype phase. An HTML prototype is the only way to see how a site will actually behave on all devices. Design work will be ongoing in collaboration with a front-end developer – but integrated into the evolving prototype. Working over several iterations in collaboration with our clients, we refine and adjust the final functionality.

In some cases, our clients may be uncomfortable socializing an “unpolished” prototype without greater context. Providing screen captures at different sizes with accompanying documentation can help solve this issue and empower them to share the progress and get the feedback and buy in the project needs to keep moving forward.

The key during the iterative prototype phase is to make sure all stakeholders understand that there are more variables nowadays – and that requires greater flexibility. What works on a PC may prove problematic on a smartphone – and solutions must be delicately balanced to support all devices.

Technical Deliverables 

Our typical technical deliverables usually include fully optimized HTML templates with all supporting files and a working prototype to demonstrate functionality.

Back-end developer groups typically determine modules based on additional factors such as CMS features – and prefer to “slice and dice” the templates themselves. Nonetheless, we believe a well-organized front-end system makes their job easier.

Whenever possible, we provide templates in a way that encourages an atomic design mindset – providing much of the modularity from the outset.

We believe this creates a strong connection between the user experience goals and visual system with the nuts-and-bolts administration and real-world implementation and usage of the site.

So, to recap:

1. Awesome: your organization understands that it needs to design for multiple devices. Uh oh: this means the deliverables you’ll get are different from what you’re used to.
2. The good news is that there are standards emerging to help with multi-device experiences. The bad news is that there are a lot more factors than ever before to consider.
3. You might not be getting a wireframe deck. Breathe. You’ll still be able to see the experience come together.
4. The experience is going to look and behave differently on different devices. That’s ok, it’s supposed to do that.
5. Your back end team will get the inputs they need to build the experience. We pride ourselves in working to deliver work that is (easily) implementable.

Have a multi-device website or application you need help with? Talk to us about the right approach and deliverables for your project.