ERP i CRM SaaS application IQ-CRM

Redesigning and rebuilding ERP/CRM system for mid-sized companies from desktop app to web based SaaS application.

  • Tags: Saas,
  • crm/erp, end-to-end development
  • , project management

read more


1. Overview

IQ PLATFORM is the system that manages the value and profitability in a company.

The system contains Value Based Management, Pricing, CRM and Business Intelligence sub-systems that facilitates multidivisional work platform in any company type or size, even with multiple locations by improving internal communication and data management.

Our job was to rebuild and redesign desktop based system into SaaS application to expand client base, improve system deployment for new clients and decrease costs of system update implementations.

2. Scope

UI/UX design, conducting research & usability testing, product design, project management, gathering business and user requirements, end-to-end web development

3. Team

Briefmonkey - UI/UX design, front-end development, product design, project management

Intensis Software - Tomasz Augustyniak and Lukasz SobieszczaƄski as a front and back-end developers

BSS - business systems solutions - the client, back-end development

4. Workflow

Design and code front-end. Quick implementation of user interface (dashboards, tables, charts) and integration with client database.

The project was done completely remotely with usage of Trello application.

5. Toolkit

HTML5, CSS3, SASS, JS , AngularJS, Photoshop, InVision, UxPin, Git, Bitbucket, Trello.

6. Description

1.First things first

After few phone-calls and skype talks with the client, when we talked about project in general, we received access to the current version of the application. During one of the calls we discovered the app with the client via remote desktop. This started nearly 3-month long research phase.

2. Research

We didn't have any project documentation. We had to learn about the app by ourselves and create the document from scratch.

Research phase was about discovering what the app is all about, what are the typical tasks, what are the current constraints of the system (either in front and back-end side).

Business requirements

Encapsulating the general business requirements was easy. They were all about making the app to the today's standard. The User Interface has to be decluttered, main functionalities have to be easier to find and use. As we later found out, the devil was in the details.

User requirements

The user requirements was hard to grasp. The system was extremely complex collection of data, tables, charts, functions, filters and sections. It was hard to get our head around it. Interface of the app wasn't helping in understanding either.

One platform - two subsystems requirements

While figuring user requirements out it became clear that the system is divided into two subsystems that don't have many crossovers, yet they aren't treated this way.

We decided that it needs to be addressed immediately because goals and needs of user of each subsystem don't overlap at all.

We called these subsystems the "admin subsystem" and the "user subsystem".

Admin subsystem

This part of the system was about configure access, policies, users and groups. It wasn't particularly complex - 4 sections with table and modal settings in them.

Select section screen in admin panel

Select section screen in admin panel

Medium fidelity prototype from user section in admin panel

Medium fidelity prototype from user section in admin panel

During one of the walkthrough with the stakeholder we received the information that users of this subsystem were trained professionals who know exactly what to do. At first it didn't look important, but this information change the course of the project.

User subsystem

This is the place the main work is done. Most of the screen we analyzed in desktop version of the app, were part of this subsystem. Lot of data, tables and charts.

Default view from user panel (v.0.5)

Default view from user panel (v.0.5)

Advanced query in data table

Advanced query in data table

Filtering data in other tables based on selection in table

Filtering data in other tables based on selection in table

While getting to know the system we discovered more and more connections between the different sections. It turned out that the front-end (User interface, screens) of the user panel wasn't the biggest problem. We roughly estimated that 80% of functionalities were dependent on others that wasn't necessary in the same section. It was too hard to grasp on the back-end side.

Research has to stop, time to act

After few weeks of testing and discovering the app, we came to the conclusion that the because the complexity of the system we have to either spend another months on researching or start implementing a little part of it to gain a better understanding of the entire platform.Few months without any results isn't the best option for the client. The admin subsystem is about 10-15% of the entire platform. We decided that even though they dont' have many things in common, the system UI have to be similar to the "user subsystem".

We called the client to figure out what to do next. After the talk we all decided that the best course would be to implement Admin subsystem first.

The admin subsystem is about 10-15% of the entire platform. We decided that even though they dont' have many things in common, the system UI have to be similar to the "user subsystem".

3.Implementation and validation

Sketching and wireframing

We conduct few interviews with admin panel users in order to create task models, user journeys and personas. After that, we did expert evaluation in order to speed up the process of designing new UI.

Later we designed basic sketches of the new UI and test it with the admin user who were helping us with back-end integration. We quickly move to wireframing, because it was easier to develop and test them.

wireframe with "analyze mode" screen

wireframe with "analyze mode" screen

Default view of user panel (v.0.3)

Default view of user panel (v.0.3)

In the admin subsystem the information archtecture was pretty straight-forward and there was no need to improve it.

Benchmarking and prototyping

Benchmarking the competition and discussing theirs functionalities with the admin user helped us to decide what kind of functionalities can be helpful in everyday usage.

After few back and forth iteration with wireframes we created low fidelity wireframes and tested it in InVision. We used primary task models to find out is the usability of the user interface improved.

Invision prototyping

Invision prototyping

Designing and coding

Designing the UI that is simple and easy to use when there are dozens of elements displaying on screen at once was challenging.

Technical constraints must be considered while designing. It wasn't a simple process because we have to check many of the functionalities with the the user subsystem that wasn't explored in details by that time.

The code and design elements must be reusable within user subsystem, so there was a lot of strategic thinking and carefully designed and coded components.

Admin panel with additional data displayed

Admin panel with additional data displayed

Tooltip describing what is underneath menu option

Tooltip describing what is underneath menu option

Project management

The project was complex. There was a lot of information that needs to be storage and be easily accesible. We used agile methodology within JIRA and Confluence.

Briefmonkey set up the JIRA workflow and took care about project management. We started with sprints, but many delays due to discussing functionalities and possibilities made us switch to kanban boards.

Clear and easy to understand kanban board and Confluence documentation facilitate cooperation between team and the client.

JIRA custom workflow

JIRA custom workflow

7. Related content

It's very simple. You just have to...


Lorem ipsum news


Do you have your own project in mind? Let's talk about it