Get From Here to There: Product Planning in Design | premiumwd
Design / UI/UX

Get From Here to There: Product Planning in Design

by chris rodriguez on February 11, 2016

Creating a great web or mobile experience involves processes and planning before building the product. Careful organization and diligent communication help make a project great. Wireframes are useful for mapping out the overall look and user experience before coding occurs. Here is an overview of how to get from brainstorming to testing and delivery.

Developing Products for Real People

It's often recommended to develop websites and apps around content. This helps make the UI/UX in web design more tailored for the users. Consider having some content and other examples of imagery ready in the beginning phases, so that developers can see they types of assets that need to be included in a website or app.

How real people will use the app or website is also an important part of the development process. It's important to know the difference between business intent and user intent. Many developers encourage asking the question "why?". The more details and specific reasons developers and designers have for a project, the more efficient a project can become.

Photo Credit Webcredible

Wireframes and Prototypes

At the start of a project, consider discussing the overall themes and ideas related to your brand or product. Perform qualitative and quantitative research if possible. A competitive analysis may also be helpful. That way, a lot of decisions happen early in the project, and not later. The earliest stages of a project involve lots of discussion.

Topics to consider include:

  • Goals
  • Scope
  • Targeted Users
  • Deliverables

It's also helpful to discuss specific intent for the project at the beginning phases. Here is an example of how to get from ideas to the wireframe and prototype:

Research, Mood boards, Sketches, Storyboards/Sitemaps -> Quick Mock-up Options -> Wireframe -> Prototype

There are various approaches to better understanding goals for an app or website at the beginning phases of a project. While developers and designers may have their personal preferences in terms of process, there are some helpful steps to consider to narrow down ideas and choices.

Mood boards (such as collages of imagery and ideas) are helpful for gaining a better idea of how the final product should look and be used. In addition, sketches are simple ways to examine how ideas might look for a website or app without spending too much time. Furthermore, storyboards or sitemaps show connections between pages on a site, as well as the information architecture of a website. These are diagrams that can be hierarchical, linear, or both. There are also composite or freeform maps to consider. The information may be hierarchical, sequenced, or more complex.

Once various decisions are made about how to approach the app or website design project, mock-ups are useful to create before wireframes. Mock-ups are basic examples of how a website or app might look on various screens, without getting too stuck on the details.

Photo Credit Webcredible

Wireframe vs. Prototype

Like blueprints to a house, wireframes are a crucial part of the development process. These flat, 2-D diagrams are static, black and white representations of how an app or website will likely look and function. Wireframes are created with specific wireframing tools (Photoshop and Illustrator aren't suitable for wireframes).

These layouts are useful for demonstrating user flow, and the overall concrete appearance of how the site or app will look. Wireframes display information hierarchy and how users might approach the website or app. Developers, clients, and designers reference wireframes in the process of building the actual product.

In contrast, prototypes are interactive examples of an app or website that shows how the products may work before building the product in full. Prototypes may have placeholder elements, which are helpful for seeing how different parts of the design work together.

Re-Design Considerations

If developers and designers are working on a re-design, they may show edits and notes over screenshots. This is helpful for people to collaborate and discuss specific areas of improvement or change. Visuals are great for conceptualizing a project before getting too far into the coding part.

Creating the Product

Along with the planning processes of a development project, it's also worthwhile to consider agile versus iterative approaches to building and testing. Building a site often demands an investment in time and analysis to make the user experience just right.

Some businesses don't want to spend a lot of time building a website from scratch. One way to decrease the time it takes to get a website going is to buy a pre-designed, customizable theme. Various planning phases can still apply, even if you buy a pre-made site. It's important to look for high-quality themes that match your project goals and scope.

Sources:
http://www.usability.gov/how-to-and-tools/methods/wireframing.html
http://www.usability.gov/how-to-and-tools/methods/develop-plan.html
http://webmarketingtoday.com/articles/114946-9-Steps-to-Planning-Website-Content/
http://warc.calpoly.edu/planning/layout/storyboarding.html
http://warc.calpoly.edu/planning/conceptualization.html

Design tips, tricks, and freebies. Delivered weekly.

Get design tips and tricks, latest news from us and some goodies for signing up.
Email Address...
Give it a try—it only takes a click to unsubscribe

You might also like...

 Tips & Tricks / UI/UX

WooCommmerce vs Shopify vs Wix Which is Better?

In recent years eCommerce stores have become very popular making the Internet a crowded – and competitive – marketplace. eCommerce…

 Design / Tips & Tricks

Working With Styles in Css

Creating a branded identity is no easy task. It requires hard effort but it’s also one of the most rewarding…

 Design / Tips & Tricks

How to Create Pure CSS onClick Image Zoom Effect

CSS doesn’t have a pseudoclass for targeting click events, and this constitutes one of the biggest pain points of front-end…

No comments

Sorry, the comment form is closed at this time.

Subscribe to Blog

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

See why people are switching to use our products. See Features Get Started
+ +

Get awesome design content

Get design tips and tricks, latest news from us and some goodies for signing up.
Email Address...
Give it a try—it only takes a click to unsubscribe
%d bloggers like this: