Capabilities /

The UX Roadmap

By Tony Morelli | August 13, 2014

The road to designing a great product is often paved with revisionary red ink.

Over the years, we’ve found that the UX/UI design process can be streamlined by breaking down the silo between UX and UI and striving to get things the right way the first time. By blending the techniques of information architecture, user experience design, user interface design, and user interaction design, it’s possible to create comprehensive deliverables each step of the way.

Before you even begin the design process, though, you’ll need to put in some legwork towards defining the product first. For example:

  1. You have an idea for a product, or a problem you are looking to solve.
  2. You’ve defined the target audience for the product, which may be client-facing, an internal segment of users, or even a combination of the two.
  3. You’ve validated the need for your product through user and market research and identified some personas or use-cases that you would like to market the product to.

Once you’ve completed these steps, the next thing needed is a briefing meeting (sometimes called a kick-off in those trendy flip-flops and cut-off jean shorts environments). At this stage, the goal is to review the findings and officially move the project into design.

Assimilate with the project

This is typically the time when less experienced designers want to start slamming together finished visual mockups and spend time rapid prototyping. Stop! Don’t open Photoshop or Illustrator. Put your Wacom tablets away. I have one word of advice for you: assimilate.

as·sim·i·late: əˈsiməˌlāt/ (verb)  1. Take in (information, ideas, or culture) and understand fully.

Seriously. This step takes time. Gather all of your materials, notes, user personas, everything you can get your hands on, and start reading. In order to design a great product, you need to have a complete understanding of both the proposed product and the audience that is going to use it. If you’re not designing for a very specific someone to accomplish a very specific something, you’re just moving pixels around aimlessly.

User Workflows to get the ball rolling

Typically, the first UX design deliverable is a user workflow. Basically, these are a collection of flowcharts that outline how the user interacts with specific features and functionality of the product. It makes sense to think of functionality requirements (for example: user registration pages will need specific input fields). The more detail that is put into each workflow, the better and more complete sense of proposed elements and example content will be available for the wireframing process.

User Workflows v2

UX Wireframes that can stand on their own

UX wireframes are a labor of love. You must interpolate the client’s research and the agreed-upon workflows to begin to visualize a product. This is achieved by building hierarchy and spatial relationships for each of the proposed elements and pieces of information.

Every designer has a different approach and style for wireframes. Some prefer minimalistic wireframes, boxes for content sections, or imagery, with a focus on things such as formatting and layout. We believe that wireframes can be so much more.

Knowing that this stage is the first point where the client will be able to get a sense of the structure of the product, it is incredibly important to make the product look damn good. To do so, we style all of the wireframes in a “blueprints” color palette. Next, we impart usable design elements into each view. We add a layer of UI design into the wireframes to get buy-in to the concepts for how the finalized product may look.

It is important to find a happy medium with how much UI design you actually add here. Too much and the client will think it’s the finished project. Too little, and you won’t get any feedback regarding the actual interface. This can necessitate even more time on the UI design end, which will likely pull you through numerous revisions.

Nav interaction

Conclusion

Every company and every design team has a different ideal that works for them. At Janeiro Digital, our design team is brought into projects as soon as possible. This way, the experts have a chance to establish a proactive approach on design-related decisions, rather than being reactive. This helps to avoid having to fight against the corporate current when they need to change some minds.

From day one through to release day, design is an active participant in product development, and by taking a unified rather than a silo approach, our design team is able to be both agile and comprehensive.

→ Need help bringing your new product initiative to life? Get in touch.

RELATED CONTENT

New Year, New You: A Guided Meditation on UX Optimization

A great user experience is the product of skillfully balancing the utility of intuitive user interactions with a polished interface.…

Read more

How To Win As You Build Your IoT Process

Whether you’re in the midst of your IoT journey or just figuring out how to begin, you must be able…

Read more

The quest for predictable exploration

These days, CIOs and CTOs have their feet carefully balanced on opposite banks of an ever-widening chasm. Under one foot…

Read more