Design Thinking for Web Developers

Design Thinking for Web Development teams

Every now and then new technology buzz words pop up. But, Designing Thinking is not just another buzz word. More importantly, Design Thinking is not just for designers or graphic artists. Design Thinking is Solution-focused thinking for everyone who develops something new as a product. It could be a tangible product or a digital product such as a web application. 

If you are a web developer who are into Custom Web Application development, or if you are a designer who is involved in designing UI and UX for web products, for an example a SaaS App, you need to know Design Thinking.

Design thinking is a process that can be integrated with your existing web development process by doing it, web developers can understand the needs of their clients much better. Web developers should be able to address those aesthetic and functionality needs accordingly and deliver a solution. User eXperience (UX) and the User Interface (UI) of a web (or even a mobile) application are crucial aspects of web development design thinking.

The Definition of Design Thinking for Custom Web Product Development
Design thinking is a user-centric, user-specific process. It has principles that can help you structure your web design tactics.

These are the main principles of design thinking for web developers:

  1. Client empathy, which involves viewing your web app from the perspective of a client
  2. Problem definition, which is interpreting your client’s needs and developing a strategy to fulfill them
  3. Ideation, which is thinking about possible solutions for the implementation
  4. Prototype creation, which involves making wireframe sketches and visuals for each screen of the web app.
  5. Testing, which is studying your design, coding, and getting client feedback and revising your mistakes
  6. Implementation, which is the creation of the dynamic or data side of your web product from the prototypes


These steps are not consecutive since design thinking is a cyclic process. Additionally, Design thinking is a collaborative process with input from other web developers. This is so that you can get a broad range of perspectives.

The Process of Design Thinking for Web Developers
Web Development Design thinking has five phases that are repetitive and non-linear. These are the main guidelines for each. 

1. Client Empathy
When you work with your users, you need to understand what their needs are so that you can effectively deliver them without any complaints. Complaints can be about unclear or jumbled website design or frustrations with navigation. To understand what your clients need, you need to pretend to be a client.

As the first phase of Design thinking, you should be concentrating on being empathetic with your client. You can use empathy mapping, which is a process where you study these traits of your clients:

  • Habits
  • Actions (Eg. Clicks, scrolls etc)
  • Needs
  • Frustrations (Eg Error messages)


According to the Nielsen Norman Group, you can use empathy mapping for any product. For each one, you address your client’s requests, actions, feelings and thoughts. From the web design perspective, you can study the functionalities of each screen by benchmarking them. This means that you test their loading speeds, clickable actions, interactive elements and functionality.

2. Problem Definition
In this phase of Design thinking for a custom web product development (assume a SaaS), you use your research to think about what problems your users have. You can do this through a process called user journey mapping, which is where you gather data about your user’s experience. For example which screen shows next, and will that be expected by your user.

According to Harry Brignull who is a specialist in user research, you research the actions that your users take. You can then use your research to predict how they will act when you design a new product. The main purpose of the research is to find new opportunities or to fix bugs. Some examples of opportunities include virtual assistants, SEO and a new layout. Some instances of bugs are broken links, slow-loading pages and unresponsive design.

3. Ideation
Ideation is the phase where you collaborate with a team of diverse sets of skills to brainstorm innovative ideas for your application. You can even add your sales team members.  Constructive criticism, a timed session and visuals from them are important for this process.

Ideation can help you with some of the following:

  • Finding new feature opportunities with your website
  • Expanding your mindset to cover future client requests
  • Creating effective solutions

4. Prototype Creation
The next phase in the web development design thinking process is a create a visual representation of your web pages. You should be able to determine which one of your potential solutions will become your true solution based on UI and UX needs. You can do this by putting each potential solution on trial and seeing which one best satisfies the requests of your users.

You can create a wireframe as a prototype for your web pages to identify potential drawbacks. Each wireframe should correspond to a web page and provide the structure for where every page element will go. The page elements include the page’s graphic design, input fields and sources of user interaction.

You should get feedback on your wireframe prototypes so that you can fully develop them for the implementation phase. Additionally, you can create a beta web application that is visible to a limited audience for more feedback.

5. Testing
After making a prototype, you need to get feedback from your users. You must determine whether your proposed solution satisfies their needs. You must also get insight on whether their user experience with your website has improved.

This is a repetitive step that occurs with each potential solution. It can help you to develop one ideal solution for your users. After each iteration, you should be one step closer to improving the layout of your website and satisfying the needs of your users.

6. Implementation
After you have done all your testing with a few users, you can build the website according to the solution that your users found most useful. This is part of the web development life cycle. You transform your wireframe sketches into website code for desktop and mobile devices. As the last step of design thinking, you implement a full web application. This includes dynamic web page creation, functionality, navigation, graphic design and user interactivity.

Wrap-Up
Design thinking is an iterative process that focuses on your users and their needs. You identify the struggles that they have with your website. The process can then lead to a set of working prototypes. These act as potential solutions for your website. With collaboration from many web designers, you can use design thinking to build an effective website.