Cubyts
Cubyts
×

      How to get started with design concepts?

      May 10, 2023

      Design concept involves converting understanding of the problem and research data into a design solution in simple steps.

      Duration

      anywhere between 1 and 3 weeks

      Complexity

      Beginner

      Contributors

      UX designer, UI designer

       

      Getting Started

      A design concept is an idea that drives the design of a product, which is explained by sketches, images, written statements, etc. This helps designers to create a product with value and helps developers to stay on track. Basically, a design concept briefly explains your product idea and why you believe the product is worth creating. 


      Why?

      • The design concept serves as a base on which the product is built.

      • It gives a clear understanding of the problem, the target users, etc.

      • It gives a direction to proceed with designing a product.

      • It decreases the risk of running into dead ends during the process. 


      Seven Principles of Design

      While defining or creating a design concept, keep these seven principles of design in mind:

      1. Balance

      2. Contrast

      3. Emphasis

      4. Movement and Rhythm

      5. Pattern

      6. Scale

      7. Unity


      How to?

      1. Define the problem

      To create a design concept, it’s important to know the problem. The concept should be able to explain what solution the design is offering to the users and why it will add value to their lives. Basically, try to answer the question - What will the product design do? What kind of solution will it give?

      2. Identify target users

      Once you get a good understanding of the problem, you should know for whom you’re solving this problem. You should be clear about whom your product is going to help and how you can tailor the user experience to serve those people. 

      3. Ideation & Sketching

      Ideation is a very important activity that brings key members of the design together to solve the problem. Ideation is important because:

      • It’s quick and easy.

      • We can do as many solutions as possible.

      • Multiple iterations could be done.

      • Our focus is on logically solving the problem first, not creating a refined visual.


      Few methods for ideation:

      Once you’ve ideas to solve the problem, pick the best idea and start sketching the solution. Sketches give a better understanding of the idea and how the idea will solve the problem.


      4. Guerilla Test

      • Once the ideas are generated in the form of UI sketches, they need to be validated with users for directional guidance. This is done with methods like guerilla testing of sketches or low-fi prototypes.

      • At this stage, the solution should illustrate:

      1. Logical flow for 1-2 critical user stories 

      2. A rough layout of key UIs

      3. Information groups and structure on each UI of the flow

      • You can validate multiple solution options at this stage if required. After the validation, the solution is optimized based on the user feedback. The only probable flipside is that the interactivity of a design solution can not be tested with it. 


      5. Create User Flows

      • User flows are detailed for all user stories after the solution approach is validated. 

      • User flows are logical flow diagrams that describe how users complete any activity in a step-by-step manner. 


      6. Define Navigation Schema

      • A navigation schema defines how information is structured and how users can go through the product to reach whatever part of the product they need to. 

      • It is done with 2 elements:

      1. Information Architecture

      2. Navigation paradigm

      • To arrive at an intuitive Information Architecture for a product, the following research methods are useful:

      1. Card sorting is used, if the product is being created afresh

      2. Tree testing is used if the older version of the product or design already exists

      Read this to know How to define the Navigation Schema of a product?


      7. Create Low Fidelity Prototyping

      • After confirming that the design is working as expected or is closer to it, the design definition starts. Different aspects of design are defined from this point. 

      • Layouts and information design for each screen are illustrated on UI design in the form of low-fidelity or lo-fi prototypes. These could be done as pen & paper sketches or done digitally. 

      • With this form of prototyping, the solution needs to be thought out in more detail, and information architecture needs to be focused on. 

      • So, it is best to do lo-fi prototypes with black, white, and gray box diagrams. These lo-fi versions of the design are also called wireframes. This version is meant for quick iteration. 

      • Once this prototype is validated/agreed upon, designers can start working on refining the design. 

      • The definition of the design system can be triggered at this point, since the required UI patterns, target user personas, user preferences, etc. all are clear by now.

      To know more about wireframing, read How to do wireframing?


      Do’s & Don'ts 

       

      Do’s

      Don’ts

      1. Sketch out solutions before getting on to any digital prototyping.

      2. Create multiple ideas and validate them with users.

      3. Create logical solutions in sketches before starting with digital ones.

      4. Do quick and easy iterations.

      5. Use the initial draft of content rather than lorem ipsum for a better understanding of the concept and flow.

      6. Use gray boxes for images on the UI.

      7. Do multiple quick iterations as required.

      1. Don’t start thinking about tools.

      2. Don't get fixated on a solution, with your own preferences.

      3. Don’t get caught up in creating the pretty-looking UI version.

      4. Don’t try to learn new tools for wireframing.

      5. Don’t add lorem ipsum in the wireframes as it’s not a good practice.


      Templates


      Suggested Tools 

      Brainstorming & Sketching 

      • Jamboard

      • Mockflow

      • Miro

      Paper prototyping

      • Marvel App

      • JustInMind

      • Balsamiq

      Wireframing & Digital Prototyping

      • Figma

      • Adobe XD

      • UXPin

      User flow 

      • Lucidchart

      • Wireflow

      • Mural 

      • Whimsical

      References 

       

      Other Related Best Practices

      • Prototyping Basics

      • Wireframing