Kandan Redesign Project Kickoff – A Web Application Design Case Study

Today I am officially kicking off the Kandan Redesign Project to redesign Kandan which is an open source web chat client aimed at helping companies to streamline the communications between its teams.

I will be re-designing Kandan right here in front of you step by step over the next couple of weeks. This first article in the Kandan Redesign Project is to talk about the scope of the entire project.

NOTE: Kandan is currently under active development. But as of now I am in no way associated to that development team. This project is my own idea of how Kandan or for that matter any web chat application can be designed.

Here is how it all started.

Last week I read Sacha Greif’s Step by Step UI Design book in which he designed the core chat window of Kandan. In the book he walks through every step of the design process giving reasons for each and every design decision that he makes.

I thought that was a great way of showing how to implement the design concepts that we read everyday everywhere. And since Sacha only designed the core chat window, there was scope of extending the design to other features of the web chat client.

Subsequently, I got in touch with Sacha to get his permission to extend his design. And he was not only kind enough to allow me to do so but he also gave me the permission to share parts of his book as and when needed. Thank You Sacha 🙂

Here is an image of the final core chat window that Sacha designed for Kandan.

So, how am I going to extend his work?

I will designing the other features of the chat client like the User’s Dashboard, receiving and sending Private Messages, Settings, Admin Control panel etc.

We will discuss this in more detail shortly.

A Quick Note on the Design Process

My aim with this project is to show how one can design an entire web application right from defining the scope to designing the features.

The emphasis will not be on how to graphically design the user interface, choose color schemes etc. But rather, the emphasis will be on how each feature will work and how all features will integrate together.

So, most of the images you will see in subsequent articles may just be black and white wireframes of the various interfaces.

With that said, let us start with the actual design process.

Making Assumptions

Ideally, we should never make assumptions before starting to design anything.

But in this case, I had to make some assumptions because I don’t have a rock solid Strategy team telling me how Kandan will be eventually used by the users.

For example, will Kandan be only used as a web chat client application? Or do we need to have a desktop client version too?

So for the sake of this project I am going to assume that Kandan will only be available as a web chat client and there will be no desktop application version of it.

This brings us to the second assumption. How will Kandan be installed?

For example, Kandan can be made available as a standalone installation package which any company or person can download and deploy it on its own server or it can be made available as a centrally hosted website to which companies can subscribe to. Similar to how WordPress does it.

What I have read on Kandan’s official site tells me that Kandan is currently available for download and can be deployed on a self or shared hosting.

So I am going to go ahead with the assumption that Kandan will always be deployed by companies on their own servers and there will be no centrally hosted website to subscribe to.

This means that the companies can deploy Kandan within their firewall or outside it. I will not delve on this too much right but there are some design decisions which will eventually depend on this. We may discuss this sometime in the coming weeks.

With those set of assumptions made, let us now list down all the features that we would like Kandan to have.

Features Kandan can Have

I tried to check the existing features of Kandan but the demo server is down as of writing this article. So instead, I sat down and listed all the features that I would like Kandan to have.

Ideally we should go out and talk to potential customers and try to find the pain points in their current communication channel. Then we should be creating a list of potential features/solutions that could address their pain points.

This should be followed up by competitive analysis of existing or upcoming competitors.

For the sake of proceeding faster with this project, I decided to create the list of features on my own by doing some competitive analysis.

For this I took a good look at some of Kandan’s competitors. There were some features I liked and some I didn’t.

Given below is the list of features I came up with. I will eventually trim down some of these features when I get to defining the scope of this project.

1. Administrators should be able to:
   1. Create users (either by invitation or by bulk import).
   2. Manage roles, for example Admin, Owner etc. – Do we really need this? Don’t know but thought it will be useful to list it.
   3. Suspend and delete users or make other users administrators.
   4. Suspend, archive and delete chat rooms.
   5. Maintain logs of all chats taking place.
   6. Perform administrative tasks like enabling logging of chats or defining which users can act as moderators etc. I will not bother detailing these set of features right now.
2. Chat Rooms (a.k.a. Conversations)
   1. I think it’s a good idea to call Chat Rooms as Conversations. Chat Rooms look a bit structured while conversations have a real life feel to it. I know as of today Kandan calls these Channels. But I really didn’t like that term and so decided to change it.
   2. Conversations can be Public or Private.
   3. Public Conversations should:
      1. Be visible to every user.
      2. Allow any user to chat, upload file etc.
   4. Private Conversations should:
      1. Be visible to only invited users.
      2. Allow only the invited users to chat, upload file etc.
   5. Inside Conversations users should be able to:
      1. View all users currently involved in the Public Conversation.
      2. View all of the invited users and their current status inside the Private Conversation.
      3. Invite internal users (users of the company).
      4. Invite external users like suppliers, freelancers etc. This needs to be designed carefully because companies are very strict when it comes to the security of their data. Also, this will depend upon how Kandan is deployed by companies. Remember inside and outside firewall deployment that we discussed about earlier?
      5. Send Private Messages to each other. How about sending the same private message to a group of users?
      6. Turn off logging for the Conversations. Something similar to going Incognito in Chrome browser.
      7. Play audio files for self or for everyone in the conversation.
      8. Drag and drop a file into the chat window and delete it if needed before uploading it to the conversation.
      9. Delete an already uploaded file.
      10. View a message for new user entering the room.
3. Users
   1. Users should be able to create/delete/rename Conversations.
   2. They can participate in multiple conversations at the same time.
   3. Should be able to send 1-1 Private Messages to each other without creating a Conversation. This can also be viewed as direct 1-1 Chat.
   4. They should be able to change privacy of Conversations from Private to Public or vice-versa.
   5. Should be able to call out other users in a chat by using @mention. Similar to Twitter.
   6. Should be able to create personal notes and To Do Tasks lists mentioning who is responsible for which task (thanks to Joe Swann for suggesting this idea).
   7. One more idea which Joe suggested was to integrate a calendar like Google Calendar to save dates mentioned in chat.
   8. Should receive notifications:
      1. From Public and Private Conversations they are involved in currently,
      2. When someone uses their @mention in other Conversations,
      3. When they get a Private Message.
   9. Should be able to set their Status, for example: Available, Busy and Away.
   10. Users should be able to search other users, uploaded files, Conversations and content within chat messages.
   11. Users should be able to do the following things in Settings:
       1. Change name, password, @mention, email, title and timezone,
       2. Upload profile photo,
       3. Set whether to receive notifications by sound or popup,
       4. Set whether to show joining and leaving messages inside chat window,
       5. Set whether to warn before exiting the web chat window,
       6. Set email notification settings like whether to receive emails when @mention is used, when Private Message is received, invitation to a Conversation is received etc.
4. Users Dashboard (a.k.a Hall)
   1. I found that most of the competitors call the user’s dashboard as Lobby. But a Hall of Conversations appealed to me more than a Lobby of Conversations.
   2. Hall should:
      1. Display List of all Public and Private Conversations,
      2. Display number of users involved in each Conversation,
      3. Display list of all users of the company and their statuses. I am still debating on the usefulness of this feature. I know most of Kandan’s competitors have this. But if Kandan is going to be deployed and maintained by companies itself, there can be many employees using Kandan. That means this list can be really very long. I will take a call on this when I design the Hall interface.

Phew! That is some list of features!

Now let us define the scope for this project.

Scoped-In Features

For defining the scope of the project I decided to adopt the concept of Minimum Viable Product.

So instead of choosing features randomly, I decided to scope in the minimum set of features which would make Kandan operational for the purposes of this project.

Here is the list I have come up with.

1. Administrators should be able to:
   1. Create users by invitation.
   2. Delete users.
   3. Delete Conversations.
2. Conversations
   1. Conversations can be Public or Private.
   2. Public Conversations should:
      1. Be visible to every user,
      2. Allow any user to chat, upload file etc.
   3. Private Conversations should:
      1. Be visible to only invited users,
      2. Allow only the invited users to chat, upload file etc.
   4. Inside Conversations users should be able to:
      1. View all users currently involved in the Public Conversation,
      2. View all of the invited users and their current status inside the Private Conversation,
      3. Invite internal users (users of the company),
      4. Send Private Messages to each other,
      5. Play audio files for everyone in the Conversation,
      6. Drag and drop a file into the chat window and delete it if needed before uploading it to the conversation,
      7. View a message for new user entering the room.
3. Users
   1. Users should be able to create/delete/rename Conversations.
   2. They can participate in multiple conversations at the same time.
   3. Should be able to send 1-1 Private Messages to each other without creating a Conversation. This can also be viewed as direct 1-1 Chat.
   4. Should be able to call out other users in a chat by using @mention. Similar to Twitter.
   5. Should receive notifications:
      1. From Public and Private Conversations they are involved in currently,
      2. When someone uses their @mention in other Conversations,
      3. When they get a Private Message.
   6. Should be able to set their Status, for example: Available, Busy and Away.
   7. Users should be able to search other users, uploaded files, Conversations and content within chat messages.
4. Hall
   1. Hall should:
      1. Display List of all Public and Private Conversations,
      2. Display number of users involved in each Conversation,
      3. Display list of all users of the company and their statuses. I am still debating on the usefulness of this feature.

De-scoped Features

For quick reference, here is the list of features I de-scoped.

1. Administrators should be able to:
   1. Create users by bulk import.
   2. Manage roles, for example Admin, Owner etc. – Do we really need this?
   3. Suspend users or make other users administrators.
   4. Suspend, archive Conversations.
   5. Maintain logs of all chats taking place.
   6. Perform administrative tasks like enabling logging of chats or defining which users can act as moderators etc.
2. Conversations
   1. Inside Conversations users should be able to:
      1. Invite external users like suppliers, freelancers etc.,
      2. Send the same private message to a group of users,
      3. Turn off logging for the Conversations. Something similar to going Incognito in Chrome browser,
      4. Play audio files for self in the Conversation,
      5. Delete an already uploaded file.
3. Users
   1. They should be able to change privacy of Conversations from Private to Public or vice-versa.
   2. Should be able to create personal notes and To Do Tasks lists mentioning who is responsible for which task.
   3. Should be able to save dates mentioned in chat to an integrated calendar like Google Calendar.
   4. Users should be able to do the following things in Settings:
      1. Change name, password, @mention, email, title and timezone,
      2. Upload profile photo,
      3. Set whether to receive notifications by sound or popup,
      4. Set whether to show joining and leaving messages inside chat window,
      5. Set whether to warn before exiting the web chat window,
      6. Set email notification settings like whether to receive emails when @mention is used, when Private Message is received, invitation to a Conversation is received etc.

So what do you think about the scope of this project? Did I miss anything or is there anything you would like me consider? Let me know in the comments.

In the next article I will go through the steps I took for designing the interface of the Hall along with why I took some design decisions.

I thank you for taking time to read this. If you think this might be of interest to anyone that you know, please share this project with them. I will really appreciate that.