Kibo, a Unified Inbox App

Kibo.chat is a unified inbox for live chat, emails, messages, comments, mentions, and reviews. This was one of those big projects with a compelling vision that allowed me to develop my skills in the design of web applications. You can read about the challenges I encountered and how I resolved them by scrolling down.

Cover Image, UI Design, UX Design

Researching

The process of designing Kibo began with an understanding of the project's scope. In the scope of the project, we examined the effects that Kibo has on people. The next step was to gain an understanding of the failures and successes of my competitors. Following the completion of the research phase, I gathered insights regarding the benefits that customers derive from using Kibo.

UX Research, Brand Research, Usability Improvement, Market Research

Scope of Project

There were two questions I answered that helped me gain a deeper understanding of Kibo's impact on people: What are the ways in which people are using message apps? In what ways are people frustrated by the use of multiple message channels simultaneously?

UX Research, Brand Research, Usability Improvement, Market Research

Competitors

The information gleaned from the scope of the project part enabled me to investigate competitors. As part of my efforts to improve Kibo, I recorded competitors' mistakes so as to avoid repeating them on Kibo, as well as competitors' successes so as to solve frustrations.

UX Research, Brand Research, Usability Improvement, Market Research

Customer Gain

In order to gain a better understanding of the frustrations of people, I conducted interviews at the end of the research. To define the customers' gains from Kibo, I used a combination of qualitative and quantitative data. This data proved useful during the design process.

Wireframes

During wireframe design, the main challenge was to construct layouts that allow for adding features without making drastic changes. Kibo's pages were designed as blocks to facilitate the development of the application in components.

There were also a number of other priorities, including the typography scale, the accessibility of pages, and micro-interactions. In order to scale the typography, I selected an index number that would create a distinction between the title and the body of the content, enough to make it comfortable to read.

As part of the design process, I created a user flow that outlined how users would access the pages. Based on the data from the research, I simplified the app navigation. As a result of the final user testing, I was able to clarify some areas that I had been unsure about.

Low Fidelity Design, Wireframe Design, Userflow, Information Architecture

Final Mock Up Prototypes

Finally, I designed mockup pages and a style guide. The design of the style guide alone posed a challenge since Kibo did not have a brand at the time. The color scheme was determined by prioritizing comfort for long hours of use. For push notifications, I selected sky blue and dark gray as the primary colors, and I avoided the use of high accent colors. In the end, I was able to create a product with a minimal interface, but one that is simple to use and produces a beautiful user experience for those who will use it.

Click here to see the Figma prototype
UX Design, UI Design, Illustration Design, Visual DesignUX Design, UI Design, Illustration Design, Visual DesignUX Design, UI Design, Illustration Design, Visual DesignUX Design, UI Design, Illustration Design, Visual DesignUX Design, UI Design, Illustration Design, Visual DesignUX Design, UI Design, Illustration Design, Visual Design