Kwala

Meetings management tool

About project

Kwala is a SaaS web application that helps to plan, manage and organize everyday meetings easily and with less effort, manage the tasks assigned during the meeting, and better plan the daily working schedule.

meetings manager

tasks manager

business planner

web app

UX/UI redesign

The context

The client came to us with the goals for the project to improve the user flow, aesthetics and add some features to an MVP. During the discussion and reviewing, we defined that better to remake the product design from scratch as the old design had a lot of lousy usability points and not modern visual style.

How we did it

We gathered the necessary data to understand what the business needs. We defined the main groups of users and conducted CJM for each. Based on each, was created the list of use cases. That all showed us the whole picture of Kwala interface. And finally, we had detailed UI screen flows that represented each project feature.

What client said

Review on Clutch

“The knowledge of UX principles, research methods, branding, marketing and attention to detail and work ethic is seriously impressive. What we received surpassed my expectations and I am really very glad we went with UXIS.”

Tulha Patel,
Founder, Kwala, UK

Design plan

UX part

Below presented some screenshots from our working file of how we do and visualize UX approaches to create in a better way the future interface structure and understand the users better.

In this step, we collect essential data, understand the problems and goals, collect early feedback, analyze it, and generate initial ideas for future interface.

We used Affinity walls to define the rough app structure and feature list based on gathered information. By this method, the data shows us what is important and how to structure it.

This approach was created based on data from the previous AW step. It needed to extend ideas and agreed with the vision of the future interface and app as a whole.

We defined 3 main groups of users and conducted detailed personas for each with predefined own goals and frustrations. This helps us understand the users more and extend empathy. For each persona, we created the journey maps to understand how each user interacts with the interface and what flows from the start to the achievement of the final goals.

As the final step of UX methods, we created the list of use cases that grouped by interface modules. In other words, each module and feature has its own list of use cases. P.S.: each single use case in the future will be the screen or screen flow that represents the behavior of a specific use case.

These types of wireframes we use firstly to get agreed on the rough app structure. Here we use grayscale blocks without text in the interface but with an external description of what each screen means.

Based on low-fi wireframes, use cases and data from previous steps, we created high-fi wireframes. They reflect the future interface of the app but without pixel-perfect and colors.

UI part

Below you can find a few UI screens just to present the quality of our work. In reality, this app has a lot of screens with different states and scenarios (some screenshots from the working file has attached below also).

As a result of the work, we provided UI screens that are logically grouped by modules, features, and predefined use cases. Each screen was aligned, named, and added a description of what is going on on a specific screen according to each scenario.

For developers, we created a full-detailed UI kit that included all needed design elements and states to it. Grid, colors, typo, icons, buttons, drops, selectors, inputs, etc. P.S.: During developing, we communicated with the dev team to support in minor design tasks that were needed during development.