GUI

Follow the marks below and if you have any queries, don’t hesitate to contact us.

1.Research

2.User Flow

3.Wireframe

4.Design

5.Clickdummy

6.GUI

Research

First, we have to ask our selves:
Why we need this app?
Is there any similar app on the market and, if there is, what can we do to make our app more interesting and more functional for the users. Search for lacks in other apps gives us a better image of what we should make. We need to know the goal and what we want to achieve after releasing a new product. An important part of this phase is to define the target audience and the platform (Android, Windows, iOS) for which customer wants to create an app.

Main goals of this step:

Define target audience

Define platform for new project

Create project phases

Define Minimum viable product
(minimum features that product should have at first version)

User Flow

Creating app steps from the user’s point of view. Starting from Launch screen, the schematics (app architecture) grows from one screen to another. Every step that user make should be covered, so users never get lost in our app. There is always a good question: “What if…?” When we cover all “What if” questions, we can deem app architecture as done.

Main goals of this step:

Define app structure

Cover all screens from start to end

Create scheme which has the best UX

Wireframe

Using Balsamiq, Adobe Xd or just paper and pen, we create the first draft for the app. In this phase, we define the hierarchy of items on a screen and create app structure the way it‘s „easy to use“. This step is important because you can change everything that you find as not a logical move for the users. Clients can now get the (rough) idea of how their final product would look like.

Main goals of this step:

Define elements on screens

show rough sketches to clients

correct every illogical movement for users

Design

When customer confirms workflow we can define an interface style according to company‘s style guide and corporate identity. The style could be minimalist, material design, skeuomorphism, metro interface or any other…But we pay attention to our target audience and optimize interface in order to give them full experience as they’re used to.

Main goals of this step:

Button style

Define main colors

User interface design for each screen

Clickdummy

When the design is done, we can start with prototyping. This part of work could save us a lot of time in future. We can set A/B (split) testing and let users decide what they want on their app and which variation performs better for a given conversion goal. If we realize mistakes in this step, we can go back to previous steps and correct them.
For prototypes, we use the InVision app and Adobe Xd.

Main goals of this step:

Choose better version according to split test

check usability on the prototype

correct newly founded lacks (if there are any)

GUI

Contains all the visual elements with MVVM effects. Model–view–viewmodel (MVVM) is frontend version of an app with all button effects and screen transitions. In this stage, we made the final corrections and when the customer is satisfied, our job is complete.

Main goals of this step:

Choose better version according to split test

check usability on the prototype

correct newly founded lacks (if there are any)

1.Research

1.Research

Research

First, we have to ask our selves:
Why we need this app?
Is there any similar app on the market and, if there is, what can we do to make our app more interesting and more functional for the users. Search for lacks in other apps gives us a better image of what we should make. We need to know the goal and what we want to achieve after releasing a new product. An important part of this phase is to define the target audience and the platform (Android, Windows, iOS) for which customer wants to create an app.

Main goals of this step:

Define target audience

Define platform for new project

Create project phases

Define Minimum viable product
(minimum features that product should have at first version)

2.User Flow

2.User Flow

User Flow

Creating app steps from the user’s point of view. Starting from Launch screen, the schematics (app architecture) grows from one screen to another. Every step that user make should be covered, so users never get lost in our app. There is always a good question: “What if…?” When we cover all “What if” questions, we can deem app architecture as done.

Main goals of this step:

Define app structure

Cover all screens from start to end

Create scheme which has the best UX

3.Wireframe

3.Wireframe

Wireframe

Using Balsamiq, Adobe Xd or just paper and pen, we create the first draft for the app. In this phase, we define the hierarchy of items on a screen and create app structure the way it‘s „easy to use“. This step is important because you can change everything that you find as not a logical move for the users. Clients can now get the (rough) idea of how their final product would look like.

Main goals of this step:

Define elements on screens

show rough sketches to clients

correct every illogical movement for users

4.Design

4.Design

Design

When customer confirms workflow we can define an interface style according to company‘s style guide and corporate identity. The style could be minimalist, material design, skeuomorphism, metro interface or any other…But we pay attention to our target audience and optimize interface in order to give them full experience as they’re used to.

Main goals of this step:

Button style

Define main colors

User interface design for each screen

5.Clickdummy

5.Clickdummy

Clickdummy

When the design is done, we can start with prototyping. This part of work could save us a lot of time in future. We can set A/B (split) testing and let users decide what they want on their app and which variation performs better for a given conversion goal. If we realize mistakes in this step, we can go back to previous steps and correct them.
For prototypes, we use the InVision app and Adobe Xd.

Main goals of this step:

Choose better version according to split test

check usability on the prototype

correct newly founded lacks (if there are any)

6.GUI

6.GUI

GUI

Contains all the visual elements with MVVM effects. Model–view–viewmodel (MVVM) is frontend version of an app with all button effects and screen transitions. In this stage, we made the final corrections and when the customer is satisfied, our job is complete.

Main goals of this step:

Choose better version according to split test

check usability on the prototype

correct newly founded lacks (if there are any)

During work process, customers can go back a few steps
if they think that something is not right.
Working in this way could save a lot of time and money.

It‘s better to fix everything in progress, than after the project is done.