Kibo Unified Inbox

Kibo.chat is a unified inbox for live chat, emails, messages, comments, mentions, and reviews. Kibo was one of those big projects with a great vision that allowed me to mature in the design process of web applications. Scroll down to read about the challenges I faced here and how I solved them.

Researching

I began the process of designing Kibo by understanding the scope of the project. The project scope was about the impact it has on people. Then, I moved on to understanding the fails and successes of competitors. I finished the research phase by gathering insights about gains the customers will have using Kibo.

Scope of project

I did two questions that helped me understand the impact that Kibo will have on people. First question: How are people using message apps? Second question: What frustrations do people deal with when using different messages channels simultaneously?

competitors

I used the insights I gained from the scope of the project part to investigate competitors. I recorded mistakes that competitors where doing to avoid at Kibo and successes of competitors in solving customers’ frustrations to improve them at Kibo.

customer gains

At the end of the research, I interviewed people to further my knowledge about their frustrations, to which I was introduced earlier in the research phase. I used the cumulated data to define the customers’ gains from Kibo that helped me later in the design process.

Wireframe

The main challenge during wireframes designing was building layouts that allow new features without making drastic changes. I designed the pages of Kibo into blocks to make it easier to develop the app in components.

Other priorities were the typography scale, the access of pages, and micro-interactions. For the scaling typography, I chose an index number that created a small distinguish between titles and the body of content, enough to make it comfortable for the eyes.

I built a user flow for designing how to access pages. I used the data from the research to simplify the flow of accessing the pages. The final user testing cleared up areas where I had doubts.

UI Wireframes

Final Mock Up Prototypes

In the final step, I designed the mockup pages and a style guide. The design of the style guide was a challenge alone because we didn’t have a brand for Kibo yet. I decided on the color scheme by prioritizing the comfort of using the app on long hours. I chose sky blue and dark gray as primary colors and avoided high accent colors on push notifications. In the end, I got a product with minimal interfaces and has practical usability that builds a beautiful experience for the people who are going to use it.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google