Project Description

Website link: https://crisp.chat/en/

Crisp.chat: Cross-channel customer support experiences using modern messaging website.

We were responsible for providing Full stack website designing and development solution for this website.

A) Website Content Development:
1. Identifying business unique value proposition
2. Identifying number of Pages
3. Research on Industry specific keywords
4. Competitor’s Analysis
5. Conducted a website content audit
6. Targeted each of their buyers personas
7. Mapping content to the client life-cycle
8. Including the essential content (section by section)
9. Writing a compelling web copy
10. Using the right language

B) Wire-framing:
Step 1: Getting Inspiration
Step 2: Designing the Process
Step 3: Using Illustrator tool for designing the mock-up
Step 4: Setting a Grid
Step 5: Determining the Layout With Boxes
Step 6: Defining Information Hierarchy With Typography
Step 7: Fine-tuning With Grayscale
Step 8: Hi-definition Wireframe
Step 9: Translating the Wireframe into a Visual

C) Designing:
Step 1: Creating colorful pages layout
Step 2:Reviewing the layouts
Step 3: Getting the clients feedback on the layout
Step 4: Changing the layout when required

D) Client-side (Front end):
There are three main technologies we have used in the front end:
1) HTML — the markup language
2) CSS — the stylesheet
3) Javascript — browser scripting language

The two main front end JavaScript frameworks we have used are AngularJS by Google and ReactJS by Facebook. We used the following technologies because they let us create highly intuitive user-interfaces.

We have used Twitter’s Bootstrap since it’s the most favored framework for CSS ever since its launched, the main reason using this frame-work was, it has interactive components built on JQuery. It allowed us to give more control and easier hardware access.

E) Server-side (Backend):
The back end of this site consists of a server, an application (OS, Web server, Programming language, Web framework), and a database.

We have used Python backend stacks for the development of this website.

We have preferred to use Python-Django framework because it provided us with the vetted implementations of common features like data access, user authentication etc.

F) Middleware:
We have used Middleware for standard communication and management of data between the front end and back end of tech stack; hence called the “software glue”.

With Middleware we performed the following tasks — parsing, authentication, providing a standard way to communicate data between systems.

The technologies we have used in Middleware include TIBCO, CICS, Virtia and MQ.

With Middleware we also distributed processing with real time actions.

Here’s a collated list of some of the tools and frameworks we used in a tech stack.

1) Frontend:
Bootstrap
jQuery
Socket.IO
Backbone.js
CoffeeScript
Less CSS
HTML
CSS
JavaScript

2) Middleware:
Ruby on Rails
Node.js
JVM language (Java, Scala or Clojure or mix)

3) Backend:
Postgresql
MongoDB (if Postgresql is not used)
Redis
Some message bus (RabbitMQ, ZeroMQ, or Redis)
Solr (if search is needed)