My design process for a new project in a software company

Start with the kick-off, Conceptual Design, Finalize the design, and the next step

Working in a software company as a designer demand a high flexibility in term of working process. The things like budget, timelines, deadline, amount of stakeholders, the scope of the project influent different strategies and approaches in the execution manner.

If you are curious about the typical work as a designer in a software agency such as:

• Many projects require us to understand the industry in order to design it right. Have a well understanding of the project is half done milestone.
• There are multiple stakeholders with their own interest. We need to know their intention and align it with the user needs and translate it into a design.
• We need to adapt our design process based on the situation. I’ll talk about this in this writing.
• Unclear problem statement and goal. Many times the client doesn’t know what they want or the solution. We need to understand and show him. Instead of questioning the client, we need to invent the thing.
• Present our design to stakeholders and clients. Not only crafting the interface, but we also need to articulate the design decision in front of the stakeholder.

I’ve written the detail, do access the post below to read it👇

Behind the scenes working in a software agency as a designer

This writing will be about the design process, especially how do I kick off a new design project at Itsavirus.

The latest whole design process after we’re done several projects at Itsavirus

By the end of this writing, you will know the backstage of how I do a design project at Itsavirus, so you can do that either or feel free to adapt it in your company.

Have a good position of reading and enjoy!

Hey Iosi, we have a new project. It is a crypto wallet called Cash Tech— 🧑‍💼 Jochem, Itsavirus CEO

Hi Jochem, Great! When do we start the kickoff? —🧑‍💻 Iosi (me), Designer

In the roughly, we do design project in 3 phases

• Discovery & Define
• Conceptual design
• Finalise design

Let’s get into the first step of the project.

1st Phase: Discovery & Define

We’ll use the first few days or weeks for understanding the project comprehensively. To do that we start with the kick-off discussion.

Kick-off Discussion

We send the client several questions to uncover their thoughts about the project. Including

• About the overall company. What do they do?
• The business problem that they want to solve.
• The goal of the project.
• The current solution to solve the problem.
• Who’s the stakeholder behind the project. The people involved in the project.
• The list of constraints within the project.
• The users/customer details including their problem, behaviour, and circumstances.
• Any data or fact that the company has. It will have an impact on the design decision as well.
• Do they have style guides such as logo and brand guidelines? Do we suggest rebranding it or keep using it?
• The typical design that the client like and the reasons as well.
• The typical design that the client doesn’t like and the reason as well.

You can find out the detailed question here 👇 https://docs.google.com/document/d/1uZhLVJq9QbLIyDyJFSdSWedD2dqdNYjrfu8tyYrizBI/edit?usp=sharing

At Itsavirus, we usually kick off the project through a meeting with the client. Jochem will lead the meeting to go through the questions.

If we found there are things to discuss, we will send the question in separate docs or meeting. The goal is to clarify the unclear answer from the client to really get the idea.

It’s good to remember that better to validate our assumption to make sure we have the same understanding as to the clients.

Update

In different cases, we ask questions to clarify unclear information through a communication channel such as Telegram. So, it doesn’t have to use certain tools. We do what the client feel more comfortable with.

Visual Approach

In the kick-off question, we ask if the client have brand guidelines and design assets such as a logo, colour combination, typefaces, images, and icon. If they don’t have one, then we help them create it. But mostly they have even just a logo. That’s fine. We can use it for the project.

After that, we discuss the visual approach.

How do we want the app look and feel?

The client will mention the example of designs that they like and don’t like and also with the reason. The goal is to get the idea around design principle and styles perhaps such as whether client like gradient or illustration or something.

I like something simple like Revolut and Transfer Wise — Example of visual approach from a client

After that, as a designer, I also put a design mood board to find a collection of styles that I think will be fit for the app design.

User Stories / Job Stories

We use a combination of persona and user stories to help us figure out the user needs.

As a user, I want to … so that …

But, persona and user stories come with their fragility. They are full of self assumption of the user and lack context situation.

Alternatively, I want to use job stories for the new project to specify the user needs and features as a possible solution.

User situation/context, User desire action, expected income

I’m interested to talk about job stories in the other writing.

UX Flows

Creating user flows or UX flows for the function of the app.

• Define the priorities for what needs to be done first. Most people know this as an MVP.
• Create user flows for the features before design them. Also, define the information that needs to be there.

Setup Design Project

In the first week, I also set up the design project such as

• The folder structure on computer or cloud
• Design Files (Including the page structures)

We use Figma Sketch

Pages

• 🏔 Cover
• 🏗 UX Flow
• 🔦 Conceptual Design
• 🙌 Interface Guidelines
• 🙌 Mobile App Design
• Archive
• Moodboard

2nd Phase: Conceptual Design

Most designer skips this process and directly go to Figma to start making the design. That’s perfectly fine. The idea is to make the concept design or wireframe. That can we present to the client later.

This phase also the phase we can adjust the layout or structure by getting feedbacks from any stakeholder since the designers usually don’t commit details yet on the graphics or tiny item.

The conceptual design could take around 5 days of work or a week.

Conceptual Design or Wireframe

I usually make sketches on paper about the layout starting from the main function then continue to the rest of the page.

To help me come up with a good layout, I often make some variation for a certain page.

Example of 🔦 Conceptual Design for Cash Tech Project

Wireframing on Figma + Prototyping

Before I finalize the design throughput the colours and graphics. I present or share the conceptual design with the client first.

The goals are to align the users flow/features and get feedback around it.

This is the effective way because if there are revisions from the client or other stakeholder, we can change it easily before putting efforts into the detailed things.

3rd Phase: Finalising the design

When finalizing the design, I will do

• Finish the design for the complete job stories/features.
• Also designing for different states. Error state, no search result, no internet connection, there is new app update etc. It should cover different possibilities.
• Make the proper documentation on UI Guidelines for the colours, typography, icons, spacing, etc. It will make the engineers' life easier later when they implement the design.
• Make the assets exportable. Otherwise, Engineer will ask this later and it becomes design debt.
• And other design work details

Hi-Fi design

Interface Guidelines 🙌

Creating proper UI Guidelines will help both you and the engineers who implement the design.

The basic Interface Guidelines are Colors, Typography and Icons. That’s the most common thing needed by the engineers to be clear.

Prototyping

Prototyping is a good way to help clients get an idea of how the app will works. I’m happy because Figma is powerful enough to empower this need.

I only have to connect the layers and choose simple transitions.

That's it!

All right! That’s it guys. Finally, this writing come to an end. The design approach itself is flexible meaning it could be changed based on the situation.

But overall, things to do are the same.

Find my writing useful for you? Follow me to get the following updates. Cheers