It goes without saying, that websites are evolving faster than we could ever imagine. Not quite sure what we mean? Here’s a snapshot of Netflix in 2011 vs. current one:

Websites are no longer slow to load, uninteresting and just there to prove an online presence. They are now interactive, immersive experiences. A lot goes on behind-the-scenes to make the websites of yesterday, web apps of today. In this article, we at Team Codesign take you through our process of designing web apps.

Step 1: Discovery

As the name suggests, the first step in designing a web app is to discover everything you can about it. This involves answering questions such as the purpose of the app, the stakeholders involved, the intended target audience, their geolocations, demographics, etc.

The process of discovery is extremely crucial to the success of the project. It helps all stakeholders understand the product better. It also aligns everyone onto the same page. And importantly it helps our designers avoid any roadblocks of the past. To get the most out of the discovery phase, we at Team Codesign actually analyse the best way to gather our information. Sometimes that involves individual interviews with key people; while at other times we hold multiple brainstorming workshops with all the stakeholders involved.

Step 2: Planning

With the basic research in place, we now move to the planning stage. Here we put down on paper, outlines of how the app will work and how the end-user will eventually interact with it.
To structure & organize the information gained in the discovery phase we create what is called an Information Architecture (IA). Through IA, we categorize the content and find ways to help the user navigate through it all.

Our planning stage also involves creating user flows. User Flows are visuals that give a step-by-step account of the users’ journey through the app. These are not created on assumptions. They are created on the basis of data & analysis. Keeping the objective of the app in mind, designers use user flows to guide users towards this objective in the simplest & most effective manner possible.

Step 3: Sketching

For some, the sketching phase may appear simplistic but there’s more to it than what meets the eye. Roughly sketching the basics of an app either on paper or on-screen helps designers communicate their ideas both quickly and clearly. Sketching gives everybody involved a starting point for a brainstorming session. Sketches also allow designers to simultaneously explore multiple ideas. Sketches may look rough but they help a great deal in refining ideas.

Step 4: Stylescapes

As we understand the brand better, we begin creating what is called a stylescape. For this, we expect to have a pre-existing set of brand guidelines, either provided by the client or created by us (if requested beforehand as part of the branding process).

A stylescape is a design tool that helps define the visual direction of a project. It uses images, colours, typography, etc. that have been edited to suit the brand. Surely, you must be wondering how a stylescape differs from a mood board or brand guidelines. We won’t get into all the details here, but we will say this; they are all worlds apart. A stylescape is extremely in-depth. It includes elements you will use in your apps such as buttons and cards. It also shows you various possibilities of what you could do with your brand.

Step 5: High Fidelity Wireframing or Prototyping

A wireframe is a two-dimensional representation of the app. Fidelity refers to the amount of detail. In most cases, our high-fidelity wireframe or prototype will represent the information architecture, user flow, visual style, navigation systems, and even the actual content and images we intend on using in the final app. Here’s an example of what high fidelity wireframe looks like:

At Team Codesign we prefer to use tools such as Adobe XD or Figma to create these prototypes. The moment a client approves our prototypes; the backend developers can begin working on the logic and API side of things.

Step 6: Visual Design

Here is where the UI designer gets completely involved. UI is not just about making things look good (though that is part of the process as well). The UI designer organises elements in a way that guides the user’s eye towards an elements’ functionality. One method our UI designers use to do this is by adjusting font sizes, colours, and spacing to create a visual hierarchy.

Though the flow and logic of the end product do not change here, our visual designers make suggestions and edits to the screen structure before sharing their ideas with our frontend developers. Sharing ideas is actually a very technical process at Team Codesign.

Our UI designers create a Design Specifications document that explains in detail the reasoning and requirements from every UI element within the app. We usually create this document using Adobe XD, but sometimes we also use other online tools like Figma or Zeplin. This document is shared with both the frontend developer and the client.

Step 7: Frontend Development

Frontend development is the technical implementation of the visual design.  Whatever a user sees when interacting with an app, is put together by a front-end developer. Using three main coding languages (i.e. - HTML, CSS & JavaScript) front-end developers ensure that users have a consistent experience with the app, across platforms. The frontend process begins only once the Visual Design is complete. Here too the developer uses the Design Specifications document.

Step 8: Testing

Throughout our design process, we are constantly testing our prototype manually. The final app pages are tested using a cloud-based cross-browser tool called Lambda Test. This is done only when the development team has worked their magic. Once convinced, we handover the final product to the client. And with that, our design process at Team Codesign is complete.

For us, it is an exciting process. We bounce ideas back and forth off each other (to be honest, our processes usually overlap), we communicate with each other, and we push each other to do better each time. Our stakeholders too are part of this process at every step. (Read more about this here.) You could also read a case study of a project we did in the past.

As with all good processes, it’s more about the journey than the destination. Do you like the way we do things? Drop us a line, we’d be happy to work together. Or feel free to suggest better ways we can work. After all, the design is the most fun when it’s collaborative.

‍