Design cycle (explained + real project examples)

In this highly informational article about the design cycle, you'll learn how to expand the depth and breadth of your research and clarify design decisions to ensure a successful design outcome.‍

What is the design cycle?

The design cycle (e.g., MYP design) is the highly organized process that demands a combination of steps such as research, development, creation, and evaluation of the design from an initial idea to the launch.

It requires a human-centered, iterative design approach to developing a design that considers the needs and aspirations of the target customer.

What are the 4 steps of the design cycle?

Using the design cycle methodology, designers can create a design product that is more likely to satisfy target users. But the amount of research required before diving into the steps of the design process may seem overwhelming.

But we're here to clarify it for you.

Here are the steps:

1. Research
2. Development
3. Creation
4. Evaluation of the solution

And here are all the steps within each phase:

So, here is an overview:

1. Step: Research

• Understand the reason behind the idea
• Explore the target market
• Analyze competitor’s products
• Develop a design brief

2. Step: Develop

• Develop design strategy
• Clarify design specifications
• Develop design ideas
• Present your chosen design idea

3. Step: Create

• Define the solution
• Use your technical skills
• Follow plan accordingly
• Refine the final concepts

4. Step: Evaluate

• Use testing methods (A/B)
• Highlight the strengths and weaknesses
• Consider improvement of weak areas
• Evaluate the performance and explain the impact

The design cycle is a crucial part of any design strategy and a helpful methodology to rely on whenever you're trying to solve users' pain points or any design problems of your project.

For example, if you're designing a UX-based solution, you'll logically focus on users, determining if they understand how the product works.

Ask yourself:

• Can users find the exact features they are looking for?
• Does some feature take too long for a user to find it?
• Is the product's functionality clear to users?

You'll be more likely to find answers to these questions if you master all the design cycle steps.

Here is a design example:

Imagine we’re developing an art history app designed to help users explore and learn about different art movements (e.g., expressionism, art nouveau), and European artists. Our main goal is to make art accessible for individuals who want to easily search for or discover art of all kinds. To achieve this, we’re focusing on building an intuitive UI, valuable features, and a robust eLearning platform.

By researching the market, we can identify what other art-related apps (e.g., Art Explora app) or some art history podcasts like ArtCurious offer and pinpoint opportunities to stand out.

We analyze the pros and cons, as well as popular features. For example, if there are no lesson plans provided, and artists aren't well-represented on the app, we can invest our effort in these areas and exceed competitors.

This planning stage allows us to build an app that will be useful.

In the following sections, I'll explain all the design cycle stages in detail.

Why is Design Thinking Approach Important?

The design thinking approach is important because it reveals what your users are looking for and helps you craft a solution-based approach to solving their problems.

Think of it as a mindset, focusing on creating new design solutions with actual steps built to increase the design purpose and functionality.

This means that when you know how to apply the stages of design thinking, you'll be able to solve all the main challenges in the design process.

Design thinking methodology involves steps—from five to seven—based on the preferences and individual designer's needs.

The seven steps include:

1. Defining the problem clearly
2. Conducting extensive research
3. Generating diverse ideas
4. Prioritizing potential solutions
5. Developing prototypes
6. Testing prototypes
7. Iterating the design solutions

This is associated with seven steps of the system design life cycle (i.e., planning, feasibility study, system design stage, implementation, testing, deployment, maintenance, and support).

Is there some difference between the design process and thinking?

Let’s be honest, as long as there are different sources across the web, there will be a higher number of list of confusing terms.

So, design thinking is roughly a mindset, while the design process is more practical and contains different steps to launching a branded product, graphic, or architectural design. On the other hand, design thinking is non-linear.

However, if you are thinking about 5 stages of the design thinking process, here is what you need to know.

The five stages of the design thought process should not be rashly divided from the design cycle. It's important that we're not mixing these terms. That being said, the five steps that make up the design thinking process include so-called Empathize, Define, Ideate, Prototype, and Test phase.

The five steps constituting the design thinking process mirror the stages of the design cycle, with the addition of the Empathize phase.

However, it's crucial to note that the Empathize phase, logically, emphasizes gaining a profound understanding of the target audience for whom designers are creating products. This aligns closely with the Research phase within the Design cycle.

Here is the design thinking process diagram:

• Empathize: Focus on user-centric research.
• Define: Analyze your findings from the first step to define the core problems.
• Ideate: Generate ideas and ideate innovative solutions.
• Prototype: Create prototypes and test them.
• Test: Test the entire product using the best solutions from the Prototype stage.

No matter how many steps you take (5-7 or even more), the design methodology is mainly successful if it involves feedback from potential customers at the pre-launch and post-launch stages.

How to master MYP design cycle stages?

In this section, you'll learn about all the design cycle stages to master design specifications first, then test your methods and improve your design.

After that, we'll provide advanced techniques to scale things up for you.

1. Step: Research (customer research and visual inquiry)

This step is crucial since you need to outline the specific features expected in the final outcome.

From this phase, you need to state and prioritize the main points of your research needed to develop a valuable solution to address the potential problem (e.g., users who might leave the app because of poor experience).

So, take for example, the Strava app.

These product designers excel at the personalization of activities to encourage users to train more. And use the app more.

With app's real-time tracking features, they are targeting active fitness enthusiasts to help them understand how their activities make them stand out.

Here is how.

Imagine you have your favorite route for running, and you just can't get enough. You get out four to five times a week and just run, expanding the distance each time.

What happens next?

You become a local legend.

You instantly feel rewarded for your hard work, and you plan another round of running.

But what if you suddenly feel tired and take a week off?

Well, you lose your title. And even acquire the name of the person who took it off.

This initial planning phase helped the Strava team lay a strong foundation for a product design cycle that not only meets users' expectations but also encourages them to continue doing their activities, adopt a competitive spirit—exceeding their limits—and use the Strava app more.

The bottom line is that defining product objectives requires a problem-solving strategy and product target characteristics.

Now, I'll explain how to identify the best opportunities when it comes to web design.

As a branding agency for startups, we were creating a website focusing on "AI chatbots." You might think, "Since this startup focuses on providing businesses and individuals with hyper-personalized interactions, that's something I should pay attention to when creating a website and defining its core message.”

However, you should also consider top-ranked companies for keyword search, such as AI customer support.

That's how you'll get an overview of the competitive websites and how they deliver AI customer service securely and effectively.

So, scroll down, read the text, and check some companies based on your preferences.

And here is an example of Dante AI's startup website we developed in Webflow (following a thorough competitive analysis).

This will give you a clear understanding of the visual commonalities across the market sector and the visual language related to AI experiences.

Once you've done with the research phase, develop a design brief which presents the comprehensive analysis of your research.

Here is one of the design cycle examples.

Project overview (design brief for Dante AI website redesign)

The primary objective of the redesign is to highlight Dante AI's technology, intuitive features, and customer success stories, with a focus on scalability and ease of use.

1. Project objectives

• Redesign the Dante AI website to better reflect the company’s AI-driven solutions and appeal to a broad audience of professionals, enterprises, and tech-savvy individuals.
• Enhance user engagement and conversions by optimizing the site’s layout, navigation, and content flow.
• Simplify communication around complex AI technologies through quality content and visuals.
• Establish Dante AI as a thought leader in the AI industry, emphasizing its innovative approach and eagerness to improve AI support.

2. Design challenges

• Communicating complex AI technology: Making the technical aspects of Dante AI's solutions understandable to a wider audience, including non-technical users (e.g. creating simplified Feature page)
• Improving user engagement: Redesigning the site to encourage more visitors to sign up for demos or trials and learn about the product’s key features (e.g., creating new landing pages)
• Differentiation from competitors: The Webflow website must stand out in a competitive AI-driven solutions market by clearly showcasing Dante AI’s unique features and benefits (e.g., unique website structure, colors and tone of voice).

3. Strategies to tackle design challenges

• Simplifying AI concepts: Use clean and clear copy supported by visuals like infographics and interactive demos to break down Dante AI’s complex technology into digestible parts.
• User-centric design: Focus on a streamlined, intuitive user interface that guides visitors through the Webflow site, with strategically placed CTAs to increase conversions.

4. User needs:

• Clarity: Users need clear explanations of how Dante AI’s solutions work and how they can directly benefit their businesses.
• Trust: Demonstrating reliability and effectiveness through case studies, reviews, and measurable outcomes is critical to building trust.
• Efficiency: The website must provide straightforward information and fast access to product demos, sign-ups, and key feature explanations.

5. Project specifications

• Fully responsive brand identity design optimized for all devices.
• Technical SEO and sales funnel optimization to drive organic traffic and improve website performance.
• Integration with Webflow’s CMS for easy updates and blog ideation and management.
• Customer-focused sections featuring testimonials, proven metrics, and clear CTAs.
• Content strategy: Develop clear, concise content that explains Dante AI’s services in an engaging, digestible format.
• SEO and analytics: Implement SEO best practices and integrate Google Analytics for tracking visitor behavior and site performance.
• Webflow CMS: Allow Dante’s team to easily manage and update blog posts, case studies, and other content.

6. Timeline

Phase 1 – Discovery week (2 weeks):

• Detailed assessment of Dante AI's business’s target and user research to reach new market segments.

Phase 2 – Prototyping process (1 week):

• Develop wireframes to establish site layout and structure.

Phase 3 – Design and development (2 weeks):

• Building the site using Webflow, ensuring smooth navigation, content organization, and responsiveness across all devices.

Phase 4 – Testing and launch (1 week):

• Thorough testing for usability, performance, and SEO. Post-launch support and adjustments.

Total Time: 6 weeks

Now, let's see what the development phase requires in more detail.

2. Step: Develop (concept development)

The most common way to start your development phase is to have your brief and design specifications ready.

This includes clear objectives of a design project, as well as:

• A clear understanding of the target audience
• A clear understanding of the competition
• A clear understanding of the market sector

You can create various concepts and draw your inspiration from competitors. And present the chosen design and outline the main reasons for its selection.

Constructing a logical development plan requires the efficient use of time and resources.

For example, let's say you're developing a Webflow site for a startup.

Be ready to spend a considerable amount of time on meetings and speaking with startup owners and their teams to uncover the essence of "startup".

This will help you drive a single website identity proposal.

Your design specifications must outline the startup's purpose, mission, vision, and target audience. You also know the startup needs specific pages like solutions, discovery, a Contact Us form, and more.

With these specifications in hand, you start generating design ideas that bring the Webflow website to life.

You can sketch different user interface layouts and visual mock-ups, explore color schemes, and consider interactive features.

To embed the identity into every aspect of website design, you must pay attention to the visual components developed—from illustration to color to typography.

Now, you want to present your idea to your design team or stakeholders.

You can do this through:

• Storyboards: A series of visual panels or frames arranged sequentially to depict the flow of a narrative. They are commonly used in design to outline user experiences chronologically.
• Labeled diagrams: Symbolic representations that use labels, annotations, or callouts to explain break down complex systems into simple design components.
• Blueprints: Detailed technical drawings or plans that provide an overview of engineering design. They include precise measurements and specifications for implementation purposes — executing a design idea.
• Sketches: Rough, freehand drawings used to explore and communicate early-stage design ideas. Sketches are quick and informal, allowing designers to communicate visual concepts with minimal effort.

In conclusion, you will more likely develop high-level ideas by using these methodologies that directly or indirectly meet the hunger of the client's audience or prospects.

3. Step: Create (Design Development)

Before the creation phase can take place, the design team needs to gather a range of research findings that will guide the creation process.

These may include competitor analysis, the current market situation, consumer demands, brand messages, trends etc.

Also, task flow and user flow can be helpful in this phase.

As this post has already discussed, the human centered design process is not highly linear. It involves different steps, so it has a dynamic nature.

Those steps can sometimes be arranged almost like stepping stones, which means that the design thinking process is highly personal.

Let me clarify.

An effective representation of this process is a simple four-step cyclical model. It illuminates the evolution of the creative design thinking process from uncertainty to certainty as the project progresses through stages of questioning and answering.

Here it is:

And Damien Newman has come up with an alternative way of representing the process.

Here is his Design Squiggle chart that represents the creative process as it moves from the abstract form through the concept phase to emerge as the final design solution.

At this stage, it is vital that the final idea is build on authentic pulse. And this phase also requires designers to think about design systems, and developers to think about technical things, such as coding that's easy to maintain.

So, designers conduct ideation sessions with developers, explaining why they designed something and how UI concepts will work.

Developers start to criticize designers' ideas, asking questions, suggesting new ones, and saying that something might be hard to implement.

The bottom line is that creating web design is all about bringing an executive approach. In other words, define your website's goals, use typography, imagery, illustrations, animations, site copy, and coding language strategically—and incorporate SEO in web design.

This helps business website increase their visibility so that potential customers can find them online.

For example, the team then conducts usability tests with a small group of target users to gather feedback on the design and functionality.

During testing, users mention that while the website looks sleek, the product information on the homepage is too brief. In response, the team revises the content by incorporating short testimonials from early adopters and clearer product descriptions

4. Step: Evaluate (Design Implementation & Testing)

Designers should collaborate with developers during the concept sketching phase and review the design prototype together.

Take time to reflect on why you have chosen the specific design solution. This approach will lead to creative insights.

Then, comes the usability testing.

At this stage, you're seeking user feedback on two key aspects: the overall website aesthetics and user experience. You can collect and organize feedback through a dedicated feedback management system FeedBear.

This is particularly important in order to avoid costly mistakes, such as building complicated features that users find overwhelming.

Here are two methods of usability testing that we advocate for:

A/B Testing

A/B testing (split testing) is a research method used to improve data-backed decisions in marketing, web design, and user experience. It compares two versions (e.g., older and newer) of a webpage or app to ascertain which one delivers superior performance to improve data-backed decisions.

It's a comprehensive method marketers, designers, and developers use in marketing, web development, and user experience (UX).

You can run A/B tests on entire web pages or individual elements, like image choices and layouts.

Here is an example we'll explain in more detail further down the line.

We run an A/B test on the hero section to compare the impact of two different visuals. One version features a human figure, while the other focuses on a more contextual image (like a product, setting, or abstract concept).

The goal is to see how each visual influences user engagement, comparing how the human figure affects perception versus the contextual image in relation to key metrics such as clicks, time on page, or conversions.

A/B Testing User Experience Example

Version A:

• The current layout features a human figure with minimal text.

Version B:

• The current layout features a contextual image (i.e. graphics).

In this B variant, we experimented with a well-structured navigation and UI style where crucial information is organized in graphics.

The bottom line: after conducting the test and analyzing the data, it's evident that the bounce rates (i.e., percentage of website visitors who leave the page without taking any action) were lower with version A.

This indicated  a significant increase in click-through rates and higher conversion rates.

That's how you successfully ran your first A/B test.

Therefore, this example illustrated how A/B testing can help improve specific areas you focus on by systematically comparing different design variations and identifying the most effective based on user behavior metrics.

Flowout Optibase

Optibase offers a native way to set up A/B tests and split tests in the Webflow Designer within minutes without impacting your website loading performance.

We truly recommend Optibase's A/B and split testing app for Webflow.

You can test everything for your website's performance—from copy to design or even entire pages and screen size restrictions—to improve your conversions.

You can also easily track click events and form submissions.

Conclusion

Research is fundamental to gaining a clear appreciation of design issues. And a clear design brief (i.e., essential point of the reference) helps to facilitate understanding between the client and designer.

If you follow each design phase accordingly, you'll be ready to explain the impact of the solution on the client/target audience.

Remember that the design cycle engineering process includes identifying design problems that need solving. And failing to do so increases the likelihood that the design cycle approach we provided here will lose its relevance.

We hope this article helped you understand the design cycle better so you can define, ideate, and take your iterative thinking to a new level.

Feel free to contact our Premium Webflow agency if you need help with your design project