The Bluespark Design Process - PART 1

So you’ve got a great idea. Spent months thinking about it. Sold the idea to internally key stakeholders. Grabbed the attention of the right people, organized a team and managed to get funding. You’ve selected your agency and have gone through a discovery process and are ready to design out the idea. Now what?

Well, you start by sketching of course. Yup I said it, we start by drawing pretty pictures (well not so pretty really).

The power of sketching. There’s no need for commitment here.

You may think you don’t need to sketch because you already know how you want the interface to look. But often times when you actually start sketching, you’ll realize that the path that you were so set on, might not work the best.

Sketching sets the tone for the rest of the design process. It ensures you’re creating a user experience that meets both user and stakeholder goals and objectives. Removing this step from the process puts you at a disadvantage as you’re more likely to get locked into a design because it’s more difficult to make quick iterations using software built for wireframing and design comps. Sketching allows you to visualize what an interface could become without committing to anything.

Sketching clutter is a means to an end

Initial sketches will likely uncover that your trying to cram too much onto the user’s screen, but that’s OK. We’re trying to uncover all possibilities so we can iterate quickly.

Having a UX team take an outside-in approach can really help define what you’re trying to achieve without overwhelming the user.

We’ve found that sketching the pages/concepts can be beneficial in a number of ways:

1. Speeds up the discovery phase by allowing all members of the team to get their thoughts on paper and get buy-in from key stakeholders

2. Allows the team to iterate quickly on the structure of the site/application without focusing on design elements such as colors, fonts, imagery, etc.

3. Offers a quick frame of reference to have early implementation discussions with developers on the project

4. Offers the ability to highlight key areas for measurement to ensure we’re meeting business and project objectives

5. Offers the ability to test real users with paper prototypes without writing a single line of code

Sketching enables you to work faster & iterate quickly

Start with drawing the high level elements on the page such as the main navigation, secondary navigation, footer elements and high level links. But also try to think about the positioning of elements on the page. Most users read left to right and top to bottom. Keeping that in mind we can guide the user’s eyes to elements on the page by highlighting elements with design characteristics such as color, graphics, etc..

Moving some navigational aids into the secondary nav or the footer doesn’t mean they’re less important, but it does allow us to simplify the interface and add clarity for users to achieve their online goal.

Sketching helps you brainstorm ideas

One of the biggest advantages of sketching is that everyone can do it. From designers to the director of human resources at your company (you don’t have to be an artist). So don’t be afraid to sketch out your ideas.

Sketching is an efficient way to get the ideas out of your head and out in the open for discussion. It keeps you from getting caught up in the technology, and instead focuses you on the best possible solution, freeing you to take risks that you might not otherwise take.

Getting everyone involved in this stage can be incredibly valuable for a couple of reasons. You can quickly get a good grasp of what you’re envisioning while gaining an understanding of the development process and interaction requirements, as you’re guided through the process.

What gets designed on the front end has a back end component that most clients don’t understand. Working with a UX team gives you the opportunity to gain that understanding while contributing with feedback that moves the project forward.

Sketching a UI develops multi-dimensional thinking

Designing a user interface is a process. Translating an idea to meet user requirements requires multi-dimensional thinking. Sketching a user interface is primarily a 2 dimensional process, but as UX professionals we need to consider a number of factors:

1. What is the user trying to accomplish?

2. How is the user interacting with the site/application (desktop, mobile, kiosk, device specific, etc.)?

3. How does the UI react as the user interacts with it?

4. What appears on each of the pages as content and navigational aids?

5. What if a user encounters an error? Are there tools to help them recover?

Sketching allows you to visualize the screen-to-screen interaction so that your idea is something that’s visible and clear in user interface form. Ultimately helping you move the project to the next level.

Take your sketches up a notch with interactivity

Lastly, using an online prototyping tool offers the ability to upload the sketches and add hotspots over the navigation and linking aids. This allows you to click through on rough sketches as if it were a real functioning website (a really ugly website). I can’t tell you the number of times I’ve worked on a series of sketches and didn’t realize that I was missing a major element or interaction until i added hotspots and tried to use it.

The design phase beginning with the initial sketches is a way to envision an interface that meets measurable goals. The ultimate goal is to align key business objectives with user goals. When those two things align you’ve got a website or product that’s bound to succeed.

--

Did you like this article?

You may also like PART 2: How Wireframing Helps Align User Goals with Stakeholder Objectives.

Tags: Drupal PlanetUXUIDesignwireframesrapid iterative