New and Improved

UX design is a fascinating and constantly evolving discipline. In recent years, the surge of handheld device usage has made it a hot topic of conversation, pushing it to become recognized as a much more critical part of the design process. Formerly the domain of user experience designers, the importance of educating all team members with regards to UX trends and best practices cannot be overstated.

At Plank we do just that. Peer-to-peer learning sessions, eBooks, and ongoing discussions on responsive design, mobile case studies, and the more technical aspects of how code is served involve everyone, to a large extent. In short, we look at UX from every angle.

We understand that UX design is strengthened by aligning the objectives of content creators, strategists, designers and developers in order to create a solid digital product that not only looks good and functions well, but also achieves what it set out to do.

So when it came time to rethink, we had countless brainstorming sessions on everything from the main menu to how the content would be organized. This is the UX side of the story of Plank Design 2012.

Rethinking, rewriting, redesigning

Looking back, I canʼt lie and say it was a smooth ride. There were countless debates (as Geoff pointed out in his last post) and concessions were made all around. The design team wanted less text. Warren wanted a more narrative approach. The developers wanted to ensure the site was structurally sound, the code was clean and the site would load quickly, regardless of which approach we chose. But we had to choose.

Some early questions we asked ourselves were:

  • Do we break with convention and place the menu on the bottom or keep it on top?
  • How do we create an experience that is both intuitive and allows for discovery?
  • How can we design a full screen experience that is responsive and loads quickly?

From “Websites that Matter” to “Carving Digital Goodness”

While Plank has been “doing digital” for close to 15 years, our previous site told only part of our story. Our experience developing digital projects was much more broad than the narrowly defining “Websites that Matter”, and it was time to make that clear, not just in terms of saying it, but doing it as well.

This led to an early decision to target tablet viewers as our main audience. Whether that was statistically true or not was not the point. We were looking a bit further down the road. Besides, what better way to show our ability in (and enthusiasm for) designing for handheld devices than to apply some of that expertise to our own site?

Breaking with convention

It was a decision that was met with scepticism at first: to create a fixed, bottom navigation that would expand and collapse. Gary and I needed to convince the team that creating a more “app-like” feel for our new site would pay off in ways that could not be measured. While a bit unconventional for desktop, the expandable / collapsible bottom menu seemed a natural fit for the tablet.

Of course to simply design a bottom nav and define its basic functional aspects was just the starting point. We also needed to define behaviours that were intuitive and easy for the user to learn. For example, the site loads with the navigation bar open, and it remains open as the user navigates the site, unless, of course, the user closes it. We figured the payoff of gaining screen real estate would be worth an extra “tap” (remember our target) to expand and collapse the menu.

To scroll or not to scroll

One of the biggest debates we had during the redesign process concerned scrolling. How much was the user willing to scroll to access content? It was especially complicated, as the issue was directly tied to unsolved debates on how to best structure the content.

During this phase, we took an iterative approach, exploring and testing 3 different sub navigation options to determine which one made the most sense in delivering the content we wanted on our site:

  1. On the main menu bar
  2. As a sidebar (with the option to hide or show)
  3. As in-page navigation options on section landing pages

The result: none of them worked.

We found the main menu bar became too crowded and functionally complicated when we considered the behaviours we had defined earlier. A sidebar took up too much screen real estate and allowing the user to show / hide it worked against the simplicity we were trying to achieve. Besides, we already had an expandable / collapsible main navigation. We also felt that adding a landing page for each section would frustrate too many desktop users.

All the options we had explored seemed “forced”. So we decided to simplify things by re-organizing the content and making each section one long page with the ability to expand key content such as our case studies and our team.

Scaled to fit

One UX consideration of particular importance to the design team was to create a consistent viewing experience across tablets and the various desktop screen resolutions while keeping file sizes down. Starting with designing for resolutions ranging from a tabletʼs portrait view to 1440 x 900 pixels, we expanded our visual tests to include larger resolutions, such as the Apple cinema display. We tested (again and again and again) the size and positioning of the images and text relative to the screen size,
all the while considering the quality of the image vs. the loading time.

While creating a consistent viewing experience was one of our goals, we also appreciated the amount of content that could “comfortably” be displayed within a smaller browser window. A good example of how we tailored the amount of content shown can be
found in the team section, which consists of a photo, a short bio and fun “stats” of each member of the team. As the user reduces the size of the desktop browser, select content (icons, followed by stats) becomes dynamically hidden, changing the layout
from a 3-column to a 2- column grid. At smaller screen sizes, the menu also adapts, becoming more compact in order to free up space for content.

The countless tests our design and integration teams endured in order to make the site responsive made up a substantial portion of the production hours dedicated to the site redesign. However, we feel that in the end, itʼs the small details that deliver a unique experience that is at once seamless and enjoyable.

The future of interaction

In recent years, weʼve seen an increased call for tighter collaboration between UX designers and Designers. In our story, we doubled up on our roles by all playing the part of UX designer, some to a larger degree than others. Team collaboration in educating ourselves with UX best practices is crucial but there is something more we need to consider.

Good UX design goes beyond the here and now. It means keeping up with current issues in interaction design and looking at how industry leaders and our peers are solving design problems. It means adopting a forward-thinking approach and developing the insight to better anticipate changes within a continually evolving digital landscape.

What do you think? Where do you see UX / Interaction Design in the next few years? What are some of the challenges youʼve had with your own site?