Why Start With Design: Shouldn't Development Come First?

Why spend time on design when you could dive straight into development? Here's the answer.

May 22, 2024

Meghan Neville, Content Marketing Coordinator

interview

8 minutes

In the fast-paced world of software development, reaching the finish line quickly is often a top priority. However, a critical question frequently arises: Why spend time on design when you could dive straight into development?

At Softjourn, we advocate for a design-first approach, and here’s why incorporating a thorough design process can save time and money, avoid frustration, and create a better user experience (UX).

the design process

Key Benefits of the Design Process

Softjourn's Solution Architect, Lyubomyr Nykyforuk, shares why design-first makes sense for most projects:

"Involving designers and developers early on is crucial when developing something new. This collaboration reduces the likelihood of needing to redevelop or redo aspects of the project, as everyone has a clearer understanding of the final product. It's particularly valuable to involve a designer when you want to enhance elements such as accessibility and user interface, ensuring the best possible outcome."

The design process delivers three key benefits that contribute to a better result for our clients and create greater client satisfaction, specifically:

Saves time and money. The design process typically saves our clients time and money because we’re able to clarify and test their expectations before moving into the more time-consuming and costly development stage.
Avoids frustration. Our designers are experts at translating clients’ expectations into the information and tools developers need to work quickly and smoothly to deliver finished projects—minimizing the frustrating back and forth in the development stage.
Creates a better UX. Our designers are focused on delivering the best UX possible for our clients’ sites or apps, so they not only deliver the features and functionality our clients need but also a polished, user-friendly experience for customers.

Softjourn's Front-end developer, Olena K. said: “Starting without a design can be quite challenging. There’s a lot of ambiguity, which means more time is spent on discussions and revisions. It’s easy to end up with a disjointed final product because everyone might have a slightly different vision. Plus, you often have to backtrack and make changes when the stakeholders finally see the initial version and realize it’s not what they wanted.”

When to Involve Designers: The Earlier, The Better

One of the key considerations in using design is timing. Design and designers should be involved as early as possible in the development process. This early involvement helps in making crucial decisions about strategy, resourcing, and the overall direction of the project.

"Having a design first makes my estimates much more accurate," mentioned Olena K. front-end developer. "When I know exactly what needs to be built, I can give a more precise estimate of how long it will take. It reduces the risk of surprises and changes down the line, which means my timelines are more predictable and reliable.”

“Recently, I worked on an e-commerce site where the design team gave us detailed mockups," She continued. "Because of this, I could dive straight into coding with confidence. I didn’t have to stop and guess what the buttons or layout should look like – it was all right there. This saved a ton of time and made the whole process much smoother.”

Understanding UI/UX

UI (User Interface) and UX (User Experience) design are crucial components of the software development process. Both involve working closely with users to create interfaces that are effective and easy to use.

User Interface Design (UI)

User interface design focuses on the visual aspects of a web application. It involves decisions about:

Color Scheme
Typography
Layout

An essential part of UI design is accessibility design, which ensures that applications are usable by individuals with disabilities.

User Experience Design (UX)

User experience design, on the other hand, is about the functionality and flow of a web application. Key considerations include:

User Needs and Goals
Navigation
Overall Functionality and Process Flow

The Importance of a UI/UX Strategy

A UI/UX strategy is a systematic approach to designing and improving the user experience of a product or service. It involves documenting user needs and aligning the design with business goals.

Benefits of a UI/UX Strategy include:

Effective User Experience: Ensures the product meets user needs.
Alignment with Business Goals: Aligns the user experience with organizational objectives.
Efficient Design Process: Creates a more agile and efficient design process.

Softjourn's Front-end Developer, Yevhen U. stated, “During development, it's crucial to have a unified vision of how the product will work, what aspects require more attention, and which require less. Without a design-first approach, the time spent on communication and coordination increases compared to using this approach.
Sometimes, this leads to having to fundamentally change a part of the functionality after it has been implemented because unforeseen conditions arise that could have been anticipated using the design-first approach.”

The Design-First Approach

At Softjourn, we advocate for a design-first approach. This method involves:

Product Discovery

Mapping out the app’s flows and features is the first and most crucial step. We hold meetings with stakeholders to discuss requirements, user types, and main features.

Design Process

Using either visual branding guides or creating something from scratch, we design the entire app, covering all user flows. These designs follow key development rules to ensure codability.

Advantages of Design-First Development

Starting with design means thoroughly understanding the app users and creating the best user flows. By having a comprehensive design phase, we ensure that every aspect of the app is well thought out, which ultimately saves time and resources during the development phase.

“A design-first approach helps you see not only your own part of the work but also the bigger picture," said Softjourn's front-end developer, Yevhen U. "This is primarily beneficial because it allows you to identify potential issues before they arise and develop possible solutions. It is also advantageous when the process involves not just developers but also designers, as user flows can sometimes conflict with the capabilities of the API and the frontend of the project.”

Before development begins, stakeholders have the opportunity to see the app’s design in detail. This visual representation allows for brainstorming sessions, testing the app concept with potential users, and making necessary adjustments before any code is written. With this proactive approach, you can be assured that the final product aligns closely with your vision and user needs.

“Design-first greatly improves communication and collaboration," stated Olena K., front-end developer. "Everyone has a visual reference to discuss, which makes conversations much clearer. It helps ensure that everyone – from developers to clients – is on the same page. Feedback is more constructive because it’s based on something concrete, and it fosters better teamwork between developers, designers, and other team members.”

While front-end developers are essential for bringing designs to life, designers play a critical role in creating user-centered, visually compelling, and cohesive experiences. Collaboration between designers and front-end developers is key to building successful digital products, and involving designers from the beginning can lead to more efficient and cost-effective outcomes.

Why Design? Why Can't My Front-end Developer Do It?

Clients often question the necessity of investing time and resources in the design phase, especially for parts of the project that are not consumer-focused, such as admin panels, reports, and templates.

They may be tempted to skip this crucial step and dive straight into development to save time and money. However, neglecting the design phase can lead to various issues that ultimately hinder the project's success and can even result in higher costs in the long run.

Lyubomyr Nykyforuk, Softjourn's experienced Solution Architect encourages clients to consider design first development:

"Design first helps developers work more efficiently by providing them with fully fleshed-out ideas that are easier to translate into work. It's much simpler to show developers what they are building rather than giving them a verbal idea. Investing in design work often leads to significant savings in developer implementation time."

While front-end developers are skilled in implementing designs and building user interfaces, there are several compelling reasons why having a dedicated designer is essential, even for the seemingly less visible aspects of the project:

1. Specialization: Designers are trained to create visually appealing, user-friendly, and effective designs. They have a deep understanding of design principles, color theory, typography, and user experience (UX) best practices. Front-end developers, on the other hand, specialize in translating designs into functional code.

2. User-Centered Approach: Designers prioritize the user's needs and preferences. They conduct user research, create user personas, and develop user flows to ensure the design aligns with the target audience's expectations and behaviors. This user-centered approach is essential for creating intuitive and engaging experiences.

3. Cost-effectiveness: It is generally more cost-effective to make changes and iterations during the design phase rather than after the design has been implemented in code. Making design changes in the development phase can be time-consuming and require additional development efforts, leading to increased costs and potential delays.

Olena K., front-end developer adds: "Without a design, I end up spending way more time on development. I often have to stop and clarify what the end result should be, which slows everything down. It’s a bit like trying to bake a cake without a recipe – you can do it, but you’ll probably have to redo parts of it multiple times until it’s right.”

4. Branding and Visual Identity: Designers play a vital role in establishing and maintaining a consistent brand identity across all touchpoints. They ensure that the visual elements, such as logos, color palettes, and typography, are cohesive and effectively communicate the brand's message and values.

5. Prototyping and Iteration: Designers create wireframes, mockups, and prototypes to visualize and test design concepts before the development phase. This iterative process allows for early feedback, usability testing, and refinements, saving time and resources in the long run.

6. Collaboration and Communication: Designers act as a bridge between stakeholders, such as clients, product managers, and developers. They communicate design decisions, gather requirements, and facilitate discussions to ensure that the final product aligns with the project's goals and user needs.

"When you have a mind map, swagger documentation, and a list of tasks to be completed, it is much easier to interact with both the client and other team members - you always have a reference point to rely on during discussions," said Yevhen O., front-end developer.

7. Keeping Up with Design Trends: Designers stay updated with the latest design trends, best practices, and emerging technologies. They bring fresh perspectives and innovative ideas to keep the product visually appealing and competitive in the market.

Are There Some Scenarios to Not Use the Design First Approach?

We consulted our Solution Architect, Lyubomyr Nykyforuk, to determine if a design-first approach is always necessary, depending on the scenario. Here's what we found:

Small Changes

"While we typically consider a design-first approach for most projects, there are exceptions for small changes, such as swapping a button, which can be handled solely by developers."

Admin Panels and Internal Use Platforms

"For internal use, such as admin panels and B2B platforms, involving designers is still important due to the complexity of their functionality. Proper design can greatly enhance usability, making the system more effective.

For example, we had a client with a rough and hard-to-navigate internal system. Our design-first approach helped implement best practices in usability, making the system more user-friendly. As a result, it now functions well, reduces onboarding time, and increases overall efficiency."

New Projects

"Involving both designers and developers is crucial when developing something entirely new. This collaboration reduces the likelihood of redevelopment or redoing work because there is a clear vision of the final product.

What I often observe is that front-end developers need to see a design to provide accurate estimates. When a client has an idea and we need to estimate it, developers find it challenging to visualize what the client wants. The design acts as a sort of contract, aligning the client's vision with our understanding and setting clear expectations for the development process."

Quicket design

Case Study: Quicket – Embracing the Design-First Approach

Softjourn collaborated with Quicket, a leading event ticketing and management platform based in South Africa, to address challenges with their Access Control and POS applications. These applications needed cohesive UI/UX design improvements and better user flow.

Our design team worked closely with Quicket from the beginning to understand their needs, developing detailed prototypes and suggesting enhancements that aligned with Quicket's branding and functionality requirements.

By leveraging our expertise in ticketing systems, we created user-friendly, visually appealing designs that significantly improved the overall user experience.

This design-first approach ensured that both applications were intuitive and efficient, enhancing user satisfaction and aligning with Quicket's commitment to superior customer experiences.

design-first approach

Get Started With the Design-First Approach

Ready to transform your software development process? Embrace the design-first approach with Softjourn and see how our focus on detailed design and user experience can lead to superior products.

Whether you’re developing customer-facing applications or internal tools, our expert designers and developers will work with you to create intuitive, efficient, and visually appealing solutions that meet your needs and exceed your expectations.

Don’t settle for less—invest in a design-first approach and achieve better results. Contact Softjourn today to get started on your next project and experience the benefits of a well-designed, user-centric software development process.

FAQs

Why Not Develop First?

Jumping straight into code without designs can lead to several issues. Developers might struggle with design elements, resulting in an app that doesn’t look good or work as intended. Without the guidance of a well-thought-out design, the user interface and experience can suffer, leading to an unsatisfactory product.

Additionally, without detailed designs, the first iteration of the app is often flawed. This can result in increased costs and extended timelines for fixes and improvements.

The lack of a solid design foundation means developers are left to figure out flows and specifics on their own, which can be time-consuming and costly in the long run.

Ultimately, a development-first approach can lead to a product that requires significant rework, delaying the release and inflating the budget.

What if My App Isn’t Client-Facing?

A design-first approach isn’t just beneficial for projects you’re developing for users or clients, but also for internal applications. Even if customer experience and aesthetics are not your primary concerns, good user flow and design significantly impact the satisfaction and efficiency of employee use.

Well-designed internal applications can enhance productivity, reduce frustration, and improve overall engagement within the organization, leading to a more efficient and motivated workforce.

What is User Interface Design?

User interface design is all about the visual and interactive elements of a web application. It aims to ensure that the interface is not only visually appealing but also easy to use. Key considerations for a UI designer include color schemes, typography, and layout. An important subset of UI design is accessibility design, which ensures that web applications are usable by individuals with disabilities.

What is User Experience Design?

User experience design focuses on the overall functionality and usability of a web application. It aims to create a smooth and intuitive user experience by considering factors such as user needs and goals, navigation, and the overall process flow. A skilled UX designer works to ensure that the web application meets user expectations and provides a seamless experience.

What’s the Difference Between UX vs. UI Design?

What’s the difference between UX and UI design? Simply put, UI design focuses on the visual aspects of a web application, while UX design is concerned with its functionality and user experience. Both disciplines are crucial in the design process and involve close collaboration with users to create an interface that is both effective and user-friendly.

What is Accessibility Design?

Accessibility design is a crucial aspect of UX design that ensures web applications are usable by individuals with disabilities. This includes making the application accessible to those who cannot see or hear. Accessibility design is essential for creating inclusive web applications and is often mandated by organizations such as the federal government.

What are Some Common UI Design Mistakes?

UI designers can sometimes make common mistakes, such as:

Ignoring User Needs: The interface must be designed with the user in mind. If it’s not user-friendly or doesn’t meet user needs, it will fail.
Overcomplicating the Interface: A user interface should be simple and easy to navigate. Avoid cluttering it with unnecessary features or elements.
Skipping Testing: Testing the user interface before launch is critical to catch errors and design flaws. Early user involvement in the design process is key.
Ignoring Feedback: Post-launch, it’s important to listen to user feedback. This helps in refining the design and improving the interface’s effectiveness over time.

What’s the Key to Designing a Great Website or App?

Communication, communication, communication! We don't mean to brag, but the Softjourn designers are experts at understanding exactly what clients want their sites or apps to accomplish, as well as uncovering their style and preferences.

With years of technical design experience and a commitment to continually honing our skills, we help clients find their voice and refine their ideas. This ensures that their sites or apps work flawlessly, look great, promote their brand, and offer an amazing user experience.

Interview With Softjourn's Lead Designer

Our lead designer, Lidiya Boychuk, shared her thoughts about the value of the design process and her tips for clients to achieve great outcomes for all their website and mobile app development projects.

Softjourn: Lidiya, what’s the key to designing a great website or app?

Lidiya Boychuk: It's definitely communication with clients. Because we’ve all had years of technical design experience and work continually to hone our skills, we can even help clients find their voice and refine their ideas so their sites or apps work flawlessly, look great, promote their brand and offer an amazing UX.

SJ: You started as a developer. Why did you transition to design and how does your developer background influence your design work?

LB: I did start as a developer and I also have a foundation in art. I found myself drawn to the more graphically creative side of the business. But, having been a developer, I know what will and won’t work in terms of creating design solutions that developers can execute. So, I design with the creativity of an artist and the sensibility of a developer. This means our team doesn't hand over designs that are impractical from a development perspective. This saves our clients time and money, and—importantly—avoids the frustration of developers not being able to deliver a design because it’s technically infeasible.

SJ: Does thinking like a developer limit your creativity?

LB: I don’t think of it that way. Any medium you work in as an artist has some practical limitations. In a commercial environment where time is money, understanding the practical limitations of your craft is a plus. On one hand, it creates a boundary, so you don’t design what can’t be created. On the other hand, if you know where the boundary is, you don’t have to hold back. You can create right up to border of that limit, knowing that the developers can go where you’re taking them. So, thinking like a developer is actually enabling. And, most importantly, it means our clients have a seamless design-to-development process.

SJ: Can you walk us through the design process Softjourn employs?

LB: The process is straightforward and consistent with industry best practices. And, at every stage, we’re communicating with the client. Keeping communication flowing in both directions is the glue that supports the entire process.

We start by working with the client to define what their looking for. It may sound odd, but sometimes clients have only a general idea of what they want. It’s our job to probe, ask the right questions and offer direction to help clients clarify their project for themselves and for us. We encapsulate this definition in a design brief document that clients and Softjourn agree to, and that document becomes our touchstone throughout the process.

Then, we go into the information collection phase. This can cover a lot of territory. For example, if the client has an existing brand identity and an established look and feel, we want to collect information about design requirements and parameters. Or, maybe, we’re collecting images and ideas that will inspire us or help us get to know clients' businesses on a deeper level.

That leads to the brainstorming phases, when we take everything we’ve learned about the client and all the information we’ve gathered and begin to analyze how all of these ideas can come together in a cohesive design concept.

We then create several small-scale preliminary design solutions. This has a dual purpose: On one hand, we have concrete designs to show clients to generate feedback, and, on the other hand, it starts setting the style we’ll carry through to additional pages or screens as we complete the project.

The really exciting part is receiving feedback from the client regarding which design—or, often, combination of designs—best captures their vision. Of course, we love it when the client says we nailed it on the first try. But we also love how our design solutions inspire clients to come up with additional ideas that enhance our creativity. While heavy two-way communication is ongoing throughout the process, this is the point that is most interactive and requires not just good but great communication with the client.

After some tweaking and fine-tuning, the client signs off on the design and we extend the approved design to all of the pages or screens the client needs. This, of course, creates another approval round, which is that last step before we hand over the design to the developers. Even after the official handoff, we stay engaged—making sure the developers have everything they need, answering questions and verifying that the developers are executing on the client’s vision, including delivering an impeccable UX.

SJ: You mentioned earlier that you give developers everything they need. What do you mean by that?

LB: Our goal is to enable the developers to focus exclusively on development. We don’t want them hunting for items such as icons or fonts, or graphics or branding elements. We have everything ready for their use to minimize the time they spend on non-development issues. This is an efficiency move that also reduces the time and cost of development, which tends to be more expensive than design, and keeps the developers from improvising because they don’t have an element they need, which also eliminates the frustration of clients seeing something unexpected in a website or app.

SJ: How do you implement UX?

LB: Attention to UX is baked into every step of the design process, because we are true believers that you can’t have a great website or app without superior UX. Consumers and business customers are too sophisticated and too busy to put up with a poorly designed user journey that require more than the minimum time and effort investment. We aim for simplicity and clear and clean design, and back that up with attention to detail and rigorous testing.

Seriously, hitting one bump in the user journey can cause users to walk away—that is, abandon the website or app or go to another provider. We don’t want just visitors to our clients’ sites and apps; we want to help our clients build loyal customer bases. And, we believe great UX is a major factor in achieving that.

Once we turn the design solution over to the developers, we’re watching them closely to ensure they protect the UX also.

SJ: How does having a design team benefit a client?

LB: Each project we undertake is assigned a dedicated designer, so the client has a point person who is responsible for the project and is the primary communicator during the design phase. But, the dedicated designer can call on the resources and strengths of his or her Softjourn colleagues.

As designers, we all have strengths and unique experiences, so if—for example—a client’s project would be enhanced by a type of original illustration in which a colleague is particularly gifted, we’d bring that person into the project to create those illustrations.

The great part is we have this depth of talent in-house, so we can access the talent quickly and without third-party markups. And, for us, as designers, it’s inspiring to work in a collegial environment, which contributes to delivering a better experience and end product for our clients.

SJ: How can a client know if a design team is a good fit?

LB: The best way to judge what we’re able to do for a client is by examining what we’ve accomplished for others. We have a substantial portfolio of sites and apps that we can share, along with the parameters the clients gave us to work within. In addition, we appreciate seeing designs that clients really like or dislike, as a jumping off point to discuss our capabilities. Finally, we encourage potential clients to ask us their toughest questions. We want to know their aspirations and their doubts.

We’ll answer openly and I'm a strong believer that the best relationships are based on great communication.