Design Cycle: Advanced Tips (+ Use Cases)

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 a Design Cycle?

The design cycle (e.g., MYP design) is the process of researching, developing, creating, and evaluating the design from an initial idea to the launch. It's a holistic approach to developing a design that considers the needs and aspirations of the target customer.

Here it is:

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

Don't get confused with the term "MYP". It refers to the Middle Years Program that serves students from ages 11 to 16, putting focus on the importance of mindful design choices.

So, this program encourages students to develop responsible, practical, and creative problem-solving skills in both historical and modern contexts.

Therefore, the term design cycle and MYP design go hand in hand together. In other words, MYP design requires the use of the design cycle as a tool.

The main aim is to structure the inquiry and analysis of design problems, based on the phases, such as research, development, creation, and evaluation of the solution.

Using the design cycle methodology, designers can create a design product that is more likely to satisfy target users.

The amount of research required before diving into the creation designing phase may seem overwhelming.

But I'm here to clarify it for you.

You won't have to hire a professional team to handle this task, allowing you to concentrate only on creative development.

Therefore, 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.

In the following sections, I'll explain how to achieve this and provide reliable examples.

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.

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

Let's see how to approach the design thinking cycle.

How to Master MYP Design Cycle Stages?

In this section, I'll provide advanced techniques to scale things up for you.

You'll learn about all the design cycle stages to master design specifications first; then test your methods and improve your design.

1. Step: Research (Customer Research & 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.

And this is definitely a fact that differentiates the Strava app from its competitors.

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.

Say you're creating a website for a startup focusing on "cross-border payments". You might think, "Well, businesses and individuals will send and receive payments quickly and at competitive exchange rates. 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 cross-border payments.

That's how you'll get an overview of the competitive websites and how they conduct cross-border trade securely and effectively.

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

And here is an example of Cedar'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 cross-border payments.

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

And that's the moment when the first phase of the engineering design cycle is done.

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

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 and development, 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.

As this post has already discussed, the 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 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—the practice of defining your website's goals, strategically using typography, imagery, illustrations, animations, site copy, and coding language—as well as incorporating SEO in web design.

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

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 I 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.

A/B Testing User Experience Example

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

So, suppose you have a website offering Webflow development and brand design services, and you want to optimize the user experience to increase conversions (e.g., more subscriptions).

You decide to conduct a reliable A/B test on the pricing page to see if changing the layout affects user decisions.

Version A:

• The current pricing layout features pricing boxes with minimal text.
• There is no tabbed navigation that makes your services easy to understand.

Version B:

• You improve the textual content and split it out in sections to improve the readability and understanding.
• You include tabbed navigation with a focus on individual "Full Stack", "Webflow only", "Design only" tabs for easier access.

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

Separating content into different sections goes hand in hand with having a good conversation.

Now, you're ready to test it.

Over a specified period, you track user interactions through a user behavior analytics tool - Clarity, such as:

• Click-through rates on the "Get Started" buttons or "Tabbed navigation".
• The time that website visitors spend on the page.
• Bounce rates (i.e., percentage of website visitors who leave the page without taking any action).
• Conversion rates (i.e., percentage of website visitors who make a purchase).

After collecting sufficient data, you analyze the results.

When the test is done and data shows that more users clicked on the "Get Started" buttons (e.g., a significant increase in click-through rates or higher conversion rates) with version B, you conclude that version B is suitable for the wider campaign.

And retain these changes or refine your testing parameters further.

The bottom line? After conducting the test and analyzing the data, if it's evident that more users clicked on the "get started" buttons or "tabbed navigation" with version B. This indicates a significant increase in click-through rates or higher conversion rates.

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

So, designers opt to keep these changes, recognizing that version B has a greater impact.

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.

I 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 engineering design process includes identifying design problems that need solving.

And failing to do so increases the likelihood that the design cycle approach I provided here will lose its relevance.

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

‍