My first big platform build

At Dare we’re proud to partner with brands that are loved across the world, creating remarkable work that delivers experiences people love. Our experience in creating beautiful and usable designs is rooted in human behaviour and is a product of our core skills married with our clients’ practical considerations and bigger business ambition.

One of our visual designers, Dan Bray, reflects on his first platform design and build.

I was told big platform builds never end. They just constantly evolve as we learn more and more and more. The production phase of my first big platform build is well under way, so what better time to reflect upon my experience as a designer on one of the biggest challenges of my career so far.

A few fundamentals to know about the project — the design approach was modular, in the sense that page structure is broken down into smaller partitions that are flexible in nature, to be reused with a variety of content in a variety of contexts. We changed our way of working to suit the client — working with them in their environment to learn and educate each other. We split the production phase into sprints, giving stakeholders regular interaction and daily visibility on progress.

So what has the last five months taught me? Here’s my top 5 from inside…

1. Understand your audience and their need

This goes without saying. You need to put yourself in the shoes of those who’ll be interacting with the design that goes live — what are they trying to achieve? How will the design and experience make it easier for them to interact with, digest and action the content being displayed? This can be superficial, such as choice of typographic rules and palette to introduce hierarchy and structure, as well as relying heavily on the type and quantity of content. But, what about when the module is interacted with and how is this effected by the device being used? Does all the required content have to be visible at one time or is segmentation an option at specific breakpoints? Is interaction even required or can you remove a step via automation? I’ll spare you the psychology lesson but the point is how can you produce an informed solution to a problem you don’t fully understand? We answered questions like these by completing a deep discovery phase, and used genuine user data to both create a set of personas and define a shared vision of the future experience with our clients. This tried-and-tested Dare approach informed a set of bespoke experience design tools against which we validated our design decisions throughout the process.

Once you and the target audience become acquainted, make sure you frequently reference your findings throughout the design process to ensure your solutions are fit for purpose and remain tailored.

2. Consistency is king

Creating a flexible toolkit of typographic rules and colour can be tricky but are crucial in forming hierarchy and structure. Similarly, the fundamental rules you form around each style at a component level such as padding, leading and kerning, will separate a fluent and well-polished flow from a patchwork quilt.

“We’re not designing pages, we’re designing systems of components”
Stephen Hay

This isn’t to say consistency should become a dominating factor. You don’t want to create so much rigour that it limits variation and experimentation — after all, we’re moving towards a culture of everything not having to be perfect and part of the process is to celebrate this — test, learn and move forwards to improve. However consistency at a foundation level is pivotal to success. When working in a big team in a fast and iterative way it’s good to know what levers we have to push and pull to ensure the experience matches the ambition of the brief.

Water tight consistency doesn’t happen overnight either. It will require a reiterative approach to refine the fundamentals into robust solutions, that can flex under stress in a number of environments and still remain identifiable. For example, link language should be clear and unified in order to create a recognizable pattern and learnt behaviour.

“There’s no learnings without trying lots of ideas and failing lots of times.”
Jonny Ive, VP Apple

This may mean starting off with a wide variety of exploration but will soon filter down as you begin to test and rationalise your thinking. Justifying your design choices will not only strengthen your argument but can help the refinement process by highlighting faults and provide actions for improvement.

3. Variants and practicality

Simplification of design layouts tend to result in clearer paths of action but there is often a requirement for some degree of variation or customization based on business nuances. Design solutions need to be flexible enough to accommodate different scenarios, whether it’s hiding basic elements such as headings, body copy and images or more complex like switching to a better-suited layout or mechanic. This is where our systematic approach and flexibility in creating components comes to life.

Building up from a granular, or ‘component’ level allows for an interchangeable system or ‘atoms’ to be re used in a variety of more complex layouts, which in turn form larger reusable building blocks or modules. Brad Frost suggests that this methodology ensures each component focuses on performing its individual function efficiently, thus contributing to the overall effectiveness of the parent module.

Building up to molecules from atoms encourages a do one thing and do it well mentality.
Brad Frost

Visibility of all possible variants is obviously a must but you have to be proactive enough in your decision making to consider how each style or layout can flex not only across variant but also breakpoint. Similar to the premise of the modular approach, starting small and working your way up should be applied when designing across mobile, tablet and desktop. Starting at mobile forces you to consider the content at its simplest and most efficient state, therefore increasing the likelihood of the design and experience working as the real estate increases.

Something else to consider is future proofing your designs by stress testing. This will reduce the possibility of having to crack open those PSDs after finding out that one extra word has wrapped and broken your entire module’s design in html.

4. The bigger picture

Often I find myself getting stuck into the details and forget to take a step back and look at the bigger picture. Each module is a small piece of a much bigger puzzle — it may seem obvious but it’s easy to lose sight of how it affects the overall flow of the page. You might have crafted it to absolute perfection in isolation, but when sat next to the others on the page it may be overpowering and unfit for purpose. It could also cause deviation from rules you’ve set at component level, meaning as you learn, these foundational elements continue to evolve and change as consistency tightens through the process.

It’s also a good opportunity to test designs using prototyping tools such as InVision, After Effects and even scamps on paper to gather feedback from both the client and those completely alien to the project. Be brave. Test early and be prepared to fail fast..

5. Don’t think in flats

Creating tangible prototypes in browser both aids the creative process and opens up more collaborative and fluid ways of working. It tests concepts and thinking, pushes parameters and quickly gives you an indication of whether an idea is worth pursuing or not.

Your designs could be fantastically immersive but too technically complex in an environment where performance and reliability is paramount. This way of working and also dialogue also opens up a channel of communication with both front end and back end, and helps highlight any technical requirements or limitations you should be considering throughout the design process.

This isn’t to say you should always choose the safe options — pushing the boundaries of interaction, flexibility and immersion is what will distinguish a bog standard output from an out of the ordinary one. This is where the intricacies of animation come in. It’s an aspect you should consider throughout the design process and testing in build, due to its heavy dependence on layout and interactivity. It’s particularly relevant to movements triggered by interaction, as tactility is much easier to communicate and gauge in the correct context.

Animation can be incredibly powerful way of storytelling and doesn’t have to be overly complicated, e.g. creating hover states for actionable elements can easily increase tactility as well as clarify intended functions. It can also help teach new behaviours if the mechanic or interaction isn’t familiar. Google’s material design is a prime example. Similarly, choosing global animation patterns that affect how the page loads or transitions can elevate the experience and help set pace in the flow of content, making journeys more memorable.

It’s been fast paced, constantly challenging and a steep learning curve but an experience that has enhanced my design mind for sure. One I recommend to those both new and experienced in the design industry.

How do your experiences compare?

References:

http://www.webdesignerdepot.com/2016/02/design-trends-flat-design-2-0/

https://material.google.com/

http://bradfrost.com/blog/post/atomic-web-design/