B

cla$$ify

Elevate your customer management game with style

Sector

Information, Publishing Industries, Software Publishers, Applications software (NAICS)

Target audience

Businesses of all sizes that want to manage their customer relationships

Problem

Many CRM platforms lack the user-first approach, which can negatively impact usability. The problem was to develop a desktop application that delivers seamless experiences for various business owners handling large quantities of data, by providing an easy way to browse and add new customers.

My role

UX/UI Design

Project time

2 weeks (Jan 2023)

Tools

Figma, Google Meets, ChatGPT

Reading time

5-7 minutes

Overview

cla$$ify is a desktop app created for the ‘Idź Pan w UI’ design challenge by Zebza. The app aims to create a user-friendly CRM panel by utilizing industry best practices to provide a flexible yet simple design.

Challenge

Given limited information about the users and the relatively short timeframe, it was necessary to make assumptions. I decided to design the platform to cater to various business industries, which posed a challenge in terms of customization.

Goal

My primary objective was to create a prototype for a CRM panel, allowing users to add and browse clients efficiently while providing with maximum flexibility. Since businesses have unique characteristics, it was essential to ensure both usability and flexibility in the platform.

Process

I began by identifying potential users, and benchmarks for designing CRM panels. I then developed a task flow to guide the design decisions. After completing the initial design, I received feedback from a design critique session. Later, I conducted further iterations and testing with potential users.

Discover

I aimed to gain a deeper understanding of the user’s context. I conducted a desk research into the best practices for CRM platforms and identified the elements that have the most significant impact on the user experience.

*Images: Screenshots of web articles about CRM and UX*

Who is the user?

Although I did not conduct extensive user research, I leveraged desk research to build a strong understanding of the user’s context. I focused on key user’s characteristics and I centered the design process around them.

Graphics presenting key user's characteristics: user performs their task on the platform on a daily basis, user'sworkflow often involve performing repetitive operations, user frequently switches between different tasks

How do others do it?

Generally, CRM platforms are complex tools and can be challenging for novice and less tech-savvy users. In developing my solution, I aimed to incorporate best practices from leading CRM and data management platforms.

*Images: Screenshots of chosen, leading CRM and data management platforms*

I found that they share common elements such as:

Graphics presenting common elements of CRM platforms: simple and minimalistic design, tabular presentation of data, modal forms for adding new customers

I evaluated various CRM platforms to identify their pros and cons, seeking insights that could enhance the design and add value for users. I placed a strong emphasis on improving the design of forms and customizing data presentation, as these elements offered the greatest potential for improvement.

Graphics presenting pros and cons of chosen CRM and data management platforms: Hubspot, Salesforce, Notion

No pain, no gain

By gaining a better understanding of the users, I wanted to develop a product that addresses their needs. To summarize research findings and to highlight a connection between the user and the product, I used the Value Proposition Canvas.

Image: Value Proposition Canvas

How might we ...?

Once I knew what value the product should provide, I began exploring how might we deliver it. I started to consider the critical factors that would shape the user experience, resulting in a more impactful product.

Graphics presenting values the product shpould provide: easy and intuitive navigation, content and clear visual hierarchy, limited number of steps and screens, confirmation of actions

Design

I started the design phase by developing a task flow to identify the necessary steps that users need to take. From there, I proceeded to sketching, wireframing, and prototyping. Instead of focusing primarily on the visuals, I aimed to prioritize the modernist philosophy of 'form follows function'. My aim was to first incorporate the most challenging functionalities into the design, and then make adjustments after design critique.

Task flow that flows

When creating the task flow, I made sure to consider the user's wider context, and go beyond the specific task. This involved identifying other streams and actions connected to the process of adding a new client.

*Image: Task flow of adding a new customer*

From sketch to screen

I began visual design with sketches and wireframes. Following common practice for CRM systems, I positioned the main navigation bar on the side panel. I allocated most of the layout space for the customer data panel. It provided more space for the main content, making it easier to focus on the task at hand.

*Image: Sketch of Customer Panel screen*

I developed high-fidelity mockups and a prototype. To be well-prepared for design critique and future iterations, I made it my goal to ensure that the design was as adjustable as possible. I based my design on components with variants and auto layouts, which facilitated rapid changes.

Customer Panel Mockup (Iteration 1) with highlighted interface elements: CTA button, customized tab, sidebar menu, scrollbar — *Image: Customer Panel Mockup - Iteration I*

'New Customer' Modal Form (Iteration I) with highlighted interface elements: modal form, field states, fields grouping, buttons — *Image: New Customer Modal Form - Iteration I*

Success Snackbar (Iteration I) with highlighted interface elements: search & filter options, snackbar — *Image: Success Snackbar - Iteration I*

The power of feedback

During the design critique session, I received feedback on visual and usability aspects of my design. It allowed me to save time and resources, since the critique focused on universal issues that could be resolved without user engagement. The recommendations included:

Graphics presenting recommendations from design critique session: improving the use of white space, reducing the number of design elements, improving the use of colors and shadows, improving the navigation sidebar, placing the success screen pop-up in the center of the screenvisual clarity of the layout

A dash of tweaks

Thanks to the session, I was able to look at my design from a different angle. Additionally, Upfront design optimization made it easy to implement even significant changes.

Screenshot of the improved Customer Panel screen — *Image: Customer Panel Mockup - Iteration II*

Screenshots of the form design - before and after — *Images: Modal form of adding a new customer - Iteration I vs. II*

Screenshots of the sidebar navigation - before and after — *Images: Sidebar navigation - Iteration I vs. II*

Screenshots of the success pop-up - before and after — *Images: Pop-up success screen - Iteration I vs. II*

Screenshots of the pagination options - before and after — *Images: Pagination - Iteration I vs. II*

Test

I conducted user testing to gain more detailed insights. Two colleagues who use CRM software daily tested the platform, and no significant usability issues arose. However, they pointed out several areas that could be improved to enhance their performance as these were the features lacking in their current software. They recommended the addition of:

Screenshot of the improved Customer Panel screen (after user testing) — *Image: Modal form of adding a new customer - Iteration III*

Results

The final design is clean, modern, and minimalistic, It prioritizes relevant elements and minimizes distractions. Navigation is intuitive, and users don't lose track of their actions. One of the main goals of the project was to provide flexibility and customization options, which were achieved without adding complexity to the design.

Lessons learned

As I understand the importance of combining UX and UI to create effective designs, this experience helped me to improve my UI skills. I am pleased with the final outcome, and the lessons learned have reinforced my belief in the iterative process and the importance of testing in UX design.

‍

Try the prototype