March 17, 2015
Articulating Design: effectiveui.com
If you are reading this post, then the chances are pretty good that you’ve already had an opportunity to peruse our new site. And chances are also pretty good that you’ve read David Maren’s post, “Agency Websites, Cobbler’s Shoes.” If you are interested in learning about the design thinking that underlies our new, fully responsive web experience, then read on. I originally wrote this for our employees, who then asked that I share it more broadly to illustrate how EffectiveUI approaches design challenges.
Direction and Concept
Show me, don’t tell me. The most basic concept driving the current design is the need to let our work speak for itself. Our work is powerful. We need to leverage all of our amazing project work to actively demonstrate our ability to provide value for our clients. The entire site, not just the portfolio section, is intended to be a showcase for our best work. Every aspect of this site is intended to help prospects and clients understand that we are the right team to solve their biggest challenges.
UX Architecture and Interaction Design
There are three guiding principles that have led to the structure and patterns that you see in the site today: Scalability, Modularity and Extensibility. These principles are manifest from the information architecture to the page structure to the visual design. This site is intended to be a living, breathing vehicle for showing our clients and potential clients the value that we bring. It must, systematically, be able to support the ongoing and continuous evolution required to meet the ‘ever-changing landscape’ of market conditions and client needs.
All primary, secondary and tertiary site nodes have the ability to scale to n if needed. We have mechanisms of interaction planned for the most complex scenarios if the need arises. Basically, if we need to add or subtract nodes at any level of our architecture, then we can do that. However, from a UX perspective we will avoid testing the most extreme cases to ensure that we do not overwhelm the visitors to our site.
Beyond the formal structure evident in the site today, we have the ability to support exogenous content – e.g., campaign sites/sitelets can exist outside of the current architecture without causing us problems in the existing navigation framework. If we want to create dedicated domains corresponding to secondary or tertiary nodes, then we can support that too – even for exogenous content.
From day one we determined that we must have a high degree of presentation flexibility with respect to the layout of content, media and controls. This release demonstrates only 1 of n possible layout patterns.
As it stands, the design team has identified many of these patterns for us already, providing a very large library of options for us to work with. New patterns will be created when new needs arise, and when we want to refresh the content.
All pages at all tiers are inherently modular. Swapping in new content is pretty straightforward and will likely happen quite frequently. Pages will also systematically scale to support as much content as we need in whatever form that content takes. Scaling up the content of pages will be carefully managed so that we will always maintain an optimal experience for site visitors.
Interaction Design and Navigation Model
We have a great brand that sets some pretty high expectations regarding interaction and control. Our site must live up to this promise, so early on we knew that interactions at the control level had to be as simple and as straightforward as possible. At the same time, we didn’t want to be slaves to outdated conventions that still manage to persist. We are known for our unique solutions to complex and challenging design problems. We have created a set of identifiable patterns at the UI level to support these objectives. This system is strong, but there are many aspects to it that have not been pushed out with this initial release. You will see this system continue to grow and evolve over the next few months.
Interaction with the site is intended to be very dynamic. Object behaviors will reflect this and continue to evolve as we refine the design. A good example of this dynamism is the interaction with the menu control itself, where the transition between states communicates aspects of operation and control. We will continue to identify both the areas and methods by which we can provide meaning to the user as they navigate and browse the site.
Control of the site is managed within the menu. Users have complete, non-linear access to the secondary and tertiary site nodes. We made a conscious decision to move away from universal top navigation in order to provide more emphasis on our project work. Suppressing the core UI under the menu control actually allows us to provide greater user access and control to the whole site.
The current visual design solution represents 1 of n possible solutions. Our intent from the beginning was to provide a system that can evolve based on our changing needs. The aesthetic attributes of the site are meant to be as modular as anything else. That means that at any point in time we are free to modify typography, color systems, control rendering, photo treatments, etc. This kind of flexibility is very powerful and should prove to very useful as our organization continues to grow and evolve.
The following attributes guided us to the current visual design solution.
One of the earliest design considerations that the team had discussed was the desire to create a site that reflects more of a contemporary editorial feel. In this model, we rely more on the concept of a “spread” than a traditional web page. This includes a tight correlation of type and image to support communication needs.
As stated above – show me, don’t tell me; the goal was to create a design language that was dependent on imagery as opposed to gratuitous design elements. In fact, we wanted the design language to emerge from the quality of the photo editorial feel that we set out to create. The color tonality, crop, perspective and content of each image are intended to work together to create the right feeling and capture what we represent as a brand.
The work that EffectiveUI does is about real, live human beings; it’s not about screens per se. However, the result of our efforts often does appear on screens when all is said and done. We made a conscious decision to integrate the screen shots of the products that we have designed with elements that suggest the human connection to what we do. You’ll see a lot of “humans” in the site imagery – either working with us or with the products and experiences that we have created.
This site is not about our logo, it’s about our work. Our work is the literal manifestation of our brand. As such, the site itself is just a framework for showcasing the work that exemplifies “EffectiveUI.”
Organic and Natural Context
Where we don’t show humans in context with our product examples, we show those examples in the context of organic and natural textures. This approach aligns to other contextual imagery of our office spaces – all of which feature organic materials and textures.
You may be wondering, “Given everything that you’ve described so far, why does the menu look that way?”
We wanted to create two distinct spaces, one that was focused on functional necessity and one that was focused on the consumption of content. These are two distinct modes of interaction and experience, and we thought they should reflect two different presentations. This approach makes it easy for the user to identify and understand the distinct spaces and take the appropriate action.
The rich imagery and editorial visual approach make sense for the content-rich aspects of the site, but are not well-suited for purely functional purposes. We chose a minimal, neutral approach that is more dependent on a clean typographic hierarchy and information design principles to drive the menu experience in stark contrast to rest of the site.
We are very excited that we now have a framework that will serve EffectiveUI for the foreseeable future. We hope this review provides some insight into the otherwise hidden design thinking that has gone into the creation of our new website.