Design Frameworks

Many organizations and startups adopt one or more UX design frameworks to deliver successful projects. Design teams use these frameworks to guide decision-making and solve problems.

Design frameworks can help with project delivery, like Lean UX or Double Diamond, or achieve outcomes for a specific feature by applying the Fogg Behavior Model or Hooked Model.

Solve design challenges throughout the product development process with UXPin–the world’s most advanced code-based design and prototyping tool. Sign up for a free trial to explore all of UXPin’s features.

What is a Design Framework?

A design framework is a set of tools, workflows, protocols, and processes for design projects. Design frameworks provide teams with a systematic approach to solving problems and delivering projects.

Design frameworks help with onboarding new hires or handing over responsibilities. By following a familiar, structured process, new team members know where they are in the design process and how to carry the project to completion.

lo fi pencilIn large organizations, with multiple cross-functional teams working on the same product, a design framework ensures teams communicate and collaborate to maintain the highest quality and consistency in workflow and delivery.

Design frameworks guide teams rather than force everyone into a specific way of thinking and working. Instead of telling team members what to do, the framework provides a systematic path to finding a solution.

Why do we Need Design Frameworks?

 Some of the core benefits of design frameworks include:

Teams deliver projects methodically and consistentlyUX designers, product teams, and engineers communicate and collaborate throughout the product development processFewer errors and design driftReduce bottlenecks and maximize efficiencyProvide teams with approved tools and techniques to solve design and development challenges8 UX Design Frameworks

UX design frameworks provide structure to the design process and product development. There are several frameworks design teams use, depending on the outcome they want to achieve.

 These are the eight UX design frameworks we cover in this article:

Design thinking processDouble diamondHooked modelLean UXAgile UXBASIC FrameworkThe UX HoneycombThe Fogg Behavior Model1. Design Thinking Process

process brainstorm ideasThe design thinking process is the basis for most UX frameworks and workflows. It’s the framework every UX designer learns when studying UX design worldwide.

The design thinking process is an iterative user-centered framework with five stages:

Empathize: Discover what your users needDefine: Determine the problem you want to solveIdeate: Develop possible solutions to users’ problemsPrototype: Create prototypesTest: Test your prototypes with users & stakeholdersRead more about those five stages of the design thinking process.

2. Double Diamond

The double diamond is an outcomes-based framework favored for design innovation. The framework encourages collaboration and creative thinking where team members develop and iterate on ideas.

There are two stages (diamonds) and four steps to the double diamond framework:

Stage One – Preparation:

Discover: UX teams conduct UX research to understand user needs and problems. Researchers must engage with end-users through interviews and usability studies to empathize and find issues.Define: Teams use insights from discovery to define and prioritize the problems their project must solve.Stage Two – Prototyping & Testing:

Develop: UX teams use various ideation and prototyping methods to develop ideas and solutions to users’ problems.Deliver: Teams must test their solutions with end-users and stakeholders. They reject solutions that don’t work and iterate to improve those that do.3. Hooked Model

Nir Eyal developed the Hooked Model as a framework to “build habit-forming products.” The framework encourages designers to approach these projects ethically while delivering value to customers.

The Hooked Model is a four-stage process, including:

Trigger: Understand what external or internal triggers users to take a specific actionsAction: Define the action you want users to takeVariable reward: An unexpected, positive reward users get for completing an actionInvestment: Provide users with an incentive to invest more time in the product, thus repeating the cycle Further reading: 

4. Lean UX

Lean UX is a collaborative design framework that prioritizes outcomes over deliverables. Designers must use data rather than assumptions to drive decisions. This methodology delivers leaner, problem-solving products because it eliminates features where there is no need.

There are three stages to the Lean UX framework:

Think: Outcomes, assumptions, user research, ideate, mental models, sketches, storyboardsMake: Wireframes, UI design, mockups, prototypes (minimum viable products), value propositions, hypothesesCheck: Analyze data & analytics, usability testing, stakeholder and user feedbackFurther reading: 

5. Agile UX

Agile UX is a framework designed to align with agile software development. Like agile software development, agile UX has 12 guiding principles.

Customer experience (CX)Harnessing technological and social changeDevelopment timelines that make good use of resourcesAdaptive collaborationBuilding projects around motivated individualsEffective communication across team channelsWorking applications and high-quality UX as success benchmarksSustainable developmentTechnical excellence is relativeSimplicityCross-functional teamsAdaptable, flexible teamsFurther reading:

6. BASIC Framework

team collaboration talk communicationBASIC UX is “a framework for usable products.” The relatively new framework provides interaction design guidelines for modern product development.

The BASIC acronym follows five principles:

B = BeautyA = AccessibilityS = SimplicityI = IntuitivenessC = ConsistencyWithin each principle are a series of questions designers must ask themselves to achieve a successful outcome. 

Beauty:

Is the visual design aesthetically pleasing?Does it follow the style guide?Are high-quality visuals used?Is it properly aligned?Accessibility:

Can ‘everyone’ use it?Does it comply with standards?Is it cross-platform compatible?Simplicity:

Does it reduce the user’s workload?Is it free of clutter and repetitive text?Is its functionality necessary?Intuitiveness:

Is the functionality clear?Can the user achieve their goal with little or no initial instructions?Can the user easily repeat the task without further instruction?Can the user predict the outcome/output?Consistency:

Does the product reuse existing UI patterns?Are the design language, images, and branding consistent with the design system?Does it appear in the right place at the right time?Does the product perform consistently every time?Organizations can adapt these questions or add their own to ensure they’re relevant to the product and its users.

Further reading: BASIC UX – A Framework for Usable Products.

7. The UX Honeycomb

Peter Morville’s UX Honeycomb is a holistic design framework listing seven principles. These seven principles guide each design decision to deliver high-quality products and user experiences.

The UX Honeycomb’s seven principles include:

Useful: Products must serve users and solve their problemsUsable: Designs must be intuitive and easy to useDesirable: The user interface design must be aesthetically pleasing and deliver a positive user experienceFindable: Search, and navigation must be clear and obviousAccessible: Designs must be accessible to all users, including those with disabilitiesCredible: Users must be able to trust the product and its contentValuable: The final product must deliver value to users and the business8. The Fogg Behavior Model

The Fogg Behavior Model, developed by B J Fogg from Standford University, suggests behavior or action is the result of three elements converging:

Like the Hooked Model, the Fogg Behavior Model helps designers build products that increase usage and engagement over time. Fogg emphasizes that “baby steps” are the best way to develop long-term behaviors.

A fantastic example many of us have experienced is any digital game. The first level is easy, giving players a sense of accomplishment, thus triggering further engagement. The game gets incrementally more challenging as players spend more time engaging with the product.

Further reading: 

End-to-End Product Design With UXPin

collaboration team prototypingUXPin is an end-to-end design solution with the tools and features to deliver high-quality products. UX designers can leverage UXPin’s code-based design tool to create high-fidelity prototypes that look and function like the final product.

Prototyping and testing are crucial components of any design framework. UXPin’s built-in design libraries enable design teams to build high-fidelity prototypes to test ideas throughout the design process.

Meaningful Testing Feedback

Code-based prototypes look and function like the final product, producing meaningful, actionable results from usability testing and stakeholders. UX designers can make quick changes and iterate on ideas to find a solution that meets both user needs and business goals.

Streamlined Design Handoffs

With higher fidelity and functionality, UXPin’s code-based prototypes play a crucial role in streamlining the design handoff process so that engineers can deliver the final product with greater accuracy and efficiency.

Enhance your end-to-end design process with UXPin’s code-based design tool. Sign up for a free trial to explore all of UXPin’s advanced features and start creating better user experiences for your customers.