3-Minute UX Tips: Wireframe in Content Blocks

Want to get more out of your wireframing?

Using content blocks before more specific layouts helps you organize your thoughts and prioritize important elements.

Even more basic than boxes and arrows, content blocks allow you designate broader screen areas for certain types of content before making more advanced layout decisions.

Content blocks work especially well for responsive design since it helps you visualize space constraints from the start.

In the free Guide to Interactive Wireframing, Professor Tom Green explains the best process for content wireframing:

  1. Create a content inventory of content items
  2. Create a visual hierarchy from those items
  3. Place the items into a content wireframe according to hierarchy.

Content inventories are a handy document in the early design process. They list what content you want/have, organized by page. You can visit Maadmob for a downloadable template.\

image03

Photo credit: Maadmob

Next, use the content inventory to build a visual hierarchy. Which content is most important? Which do you want your users to notice first?

A helpful trick is to color-code types of content in content blocks.

For example, you can assign all navigation menus and icons as red, and mark them as red content blocks in the wireframes. This is useful for responsive design: if you put the wireframes of different viewports together, you can see at a glance how consistent the views will be.

image01

Photo credit: UXPin

Just like all methods of design, content wireframing benefits from a mobile-first approach. Starting with the smallest screen and then working upwards means adding content blocks to an existing “full” experience.

image02

Photo credit: UXPin

Consider content wireframing as an early starter step. As we all know, content is king, and this method of wireframing embodies that. Anything else is building content around secondary designs.

To learn more about content-first wireframing — including step-by-step instructions and expert techniques — get the free Guide to Interactive Wireframing written by design professor Tom Green.

Product Manager vs. Project Manager: Why Great UX Demands Both

With the rise of Agile and Lean methodologies, companies are clamoring to redesign their infrastructures in a simpler and more efficient way.

Project managers and product managers are usually tasked with rallying the team behind these new workflows.

In this piece, we’ll clear up any misunderstanding around project managers and product managers. The two roles, while related, handle completely different responsibilities (which means the same person shouldn’t perform double duty).

Let’s start with a crash course. 

What is a Product Manager?

The product manager handles the big picture of the product development.

They’re like the “godfathers” of the product. Often the product itself is their brainchild, and their focus is less on the day-to-day endeavors and more on the overall strategies to make the product successful in the market.

A product manager’s skill set lies within understanding the market and the customers. They are typically the advocate of the end user in business discussions — after all, the product’s success hinges on widespread adoption. Consequently, they’re in charge of knowing what the user needs, both in the product’s overall service and in a focused feature set.

The product manager is the one who asks, “What problem does the product solve?” In this role, they deal closely with UX and user flows.

As explained in The Guide to UX Design Process, their main responsibilities include:

  • Strategic idea creation — Drawing on their knowledge of the market and customer base, they must brainstorm new product ideas to target business goals.
  • Feature creation — Likewise, they suggest the features to increase the chances of success.
  • Staying current with market trends — Basic marketing skills.
  • Direct contact with the customer — Speaking directly with target customer groups to deliver what they want with more precision.
  • Dictate KPIs — State the performance indicators on which a product’s development and success can be measured.
  • Prioritize release dates — For products, features, and updates.
  • Create “blueprint” documentations — i.e., use cases or user flows.
  • Prioritize bug lists — Determining which bugs needs to be fixed first, and which can wait.
  • Work with engineering — To make sure their ideas are feasible.

The success of a product manager is the success of the product itself. Success is triangulated through sales volume, user feedback, and technical performance.

What is a Project Manager?

Project managers deal with the logistics: financial concerns, team resourcing, and meeting deadlines and scope. While they keep their distance from the actual design details, project managers look after the project as a whole and keep it on track.

Product managers create the roadmap communicating product strategy. Project managers create the timeline to execute each necessary step.  

A project manager’s most important skill set lies within understanding and organizing the team. Good project managers are masters of logistics. Great project managers are masters of relationships.

Main responsibilities include:

  • Setting schedules and deadlines — With their understanding of their team’s abilities and limitations, they set realistic project milestones.
  • Monitoring the budget — They keep the teams within financial constraints.
  • Cross-team organization — They act as liaison between all departments, both as manager and messenger.
  • Resource management — Determining where resources are needed and allocating them.
  • Problem resolution — Smoothing over any personal or process issues.
  • Status updates — Keeping stakeholders, as well as other departments, informed on the the product’s status.
  • Risk management — Foreseeing and avoiding potential risks or setbacks.
  • Scope management — Making the tough calls to balance time, cost, and quality.

Their duty is less about the product itself, and more about the procedure. Even if the product is a flop, a project manager is technically successful if the team came through on time, under budget, and met their KPIs.

The product manager, however, will have failed.

Why You Need Both

Of course, the responsibilities overlap between the two positions.

Both require excellent management and organization skills. Both require communication skills, to properly convey their ideas to multiple departments. And both require creating and meeting deadlines, though in different ways: Product managers consider market sensibilities for the timing of releases; project managers consider day-to-day deadlines to keep the entire project on schedule.

Despite the similarities, though, you still should have two different people fill each position.

Why? The short answer is that you can’t set aside enough hours in a day for a single person to fulfill the product strategy and product development process.   

Both jobs require different types of thinking as well:  

  • Product managers lean towards the abstract and creative. Their duties involve coming up with new, never-before-seen ideas (although grounded in the realities of the market and user needs). This generally involves a looser, more open mindset.
  • Project managers, on the other hand, seem to be the exact opposite. They think in concrete and logical terms, taking the abstract ideas handed to them and turning them into realities. While the product managers are asking, “What if…” project managers are asking, “How should…” They act as a reality check on the product manager, internal stakeholders, and the designers themselves.

The two roles complement each other. They examine the project from two different perspectives: one from the view of external success, the other from internal success.

Great product design is the equal result of tension and collaboration. The same person working for both sides may create a conflict of interest that’s hard to detect until revealed in the product . 

Product managers and UX teams should push the the boundaries of what an organization can deliver to meet market demand. Project managers, on the other hand, need to then push back on that vision to ensure the team doesn’t burn out. 

In the middle of that viability vs. feasibility debate is where true product innovation starts to take shape. 

For more UX and product management advice, check out the free Agile UX Survival Guide. The book is written by Germaine Satia, a product manager with nearly a decade of experience. 

Screen Shot 2016-02-09 at 4.43.03 PM

Download the e-book now. 

Two Quick Exercises for Creating a Winning Product Strategy

 

The best place to begin is the beginning, right? Not always…

Before you begin to define the features and details of your product, imagine what users would say about the final version. What do you want them to say? How can you develop the product to create that feeling? The clearer your idea of the destination, the easier it is to get there.

This method avoids the all-too-common fault in product design: getting lost in the details without validating the overall strategy.

Don’t know where to start imagining the end? Try these two exercises the next time you’re creating your product strategy:

  • Write a tweet from the perspective of future user. Our advisor Hiten Shah (co-founder of KISSMetrics) first suggested this exercise to us back in 2013 when UXPin’s digital app was still in its infancy. In this exercise, you’re trying to capture the core essence of the product. What will users like or dislike about the product? How enthusiastic are they, and what can you modify to increase their enthusiasm? This activity forces you to focus on the single differentiator that define every memorable product. 

For more advice on product design and the design process in general, check out the new 109-page e-book The Essential Elements of Successful UX Design. Best practices are explained based on analyzing 24 examples from companies like Slack, Apple, and others.

fb-promo

5 Tips from 5 Designers to Improve Your UX Sketches

It’s the beginning of a new project.

You’ve got all these ideas bouncing around your head, but they’re too incomplete to express clearly. What do you do?

Same thing you did in school — grab something to write with and some paper (or a whiteboard, or a cocktail napkin) and sketch out what you’re thinking.

In the early stages of design, sketching helps take our abstract and undefined details and turns them into something real. UX sketches are the earliest foundations we build upon, the bridge between nothing and something.

… but they can always be better, can’t they?

We’ve collected the advice of 5 different UX designers for 5 different techniques guaranteed to improve your UX sketching.

1. First Write Down the User Problem

UX Consultant David Mannheim’s process of structuring sketches starts by writing out the user problem. He then draws on his experience with other interfaces to determine how to solve the problem.

Knowing this, the lo-fi structure starts to fall into place.

Mannheim, a sketching enthusiast in general, likens digital design structure to classic cartooning. You first outline the navigation menu and the main content, the basic outlines of the cartoon’s head and body. Only later comes the secondary content and details, the arms, legs, and facial features.

He also recommends using the age-old golden ratio, 1:1.6, a “gold standard” of aesthetics for over 4,000 years. Try sketching out the golden ratio first, and then drawing your ideas on top of it for guidance.

Following the golden ratio, the main content area might have 640px and the sidebar 400px.

2. Sketch in Layers with Increasingly Darker Pens

Sketches don’t need to be perfect, but they shouldn’t be sloppy either.

Senior UX Specialist at Universal Mind, Peiter Buick recommends sketching in layers using a darker instrument for each successive layer. This is an efficient approach to sketching:

  • Multiple drafts build on each other instead of starting from scratch
  • You can outline the structure of your sketch before considering the details
  • Early mistakes aren’t as noticeable

image01

Photo credit: “The Messy Art of UX Sketching.” Peiter Buick. Smashing Magazine.

Buick suggests starting with a light-gray marker, 20-30% gray. Depending on how many layers you intend to create, incrementally increase the hue of the instrument.

When you’re ready for the final details, use a 60% gray marker or comparable instrument.

3. Start with the Smallest Screen and Work Up

This advice isn’t just for sketches, but for all aspects of the design process. The mobile-first approach explained in UX Design Trends 2016 starts with the smallest screen and works upwards, typically something like mobile => tablet => desktop.

image00

Adam Fairhead explains why this approach just makes sense:

  • You have no choice but to prioritize content right from the start. Whatever you choose to fit into the mobile screen becomes the core content of bigger screens. This makes mobile-first a content-first approach.
  • Making additions, not subtractions. As you scale up, you add content, which is a lot easier than the alternative. Starting with desktop means taking pieces away as you advance, and could lead to complications and backtracking.
  • Constraints encourage creativity. Working within the limitations of small screens means coming up with solutions you wouldn’t have thought of.

The goal is for your site to look good on all devices, but designing first in a larger screen tends to make mobile versions seems like a “lesser” version of the “original.”