Aditi Sharma - Product Designer
Klaviyo Design Challenge.jpg

Designing a CRM

How can design increase effectiveness of a business


Designing a CRM

Designing a customer relationship management tool to increase effectiveness of business

Mock Up.jpg

Overview 🧐

I was given a prompt to design a CRM dashboard with defined user goals for a small business. I proceeded to establish the KPIs β€” and figure out what metric can I design that would be meaningful for the user.

I wanted to provide relevant information to the user in about 5 - 7 seconds

After doing some research how UX affects a CRM thereby also affecting the business, I decide to use building blocks with consistent structure as a design system β€” defining grid, working on multiple widgets that will hold the information.
Apart from this, I also worked on some micro interactions in the system.

Time and Duration
6 hours

Tools and Resources
Sketch, Principle and InVision

For resources, I referred to UX guides for Microsoft’s Dynamic CRM


1. User research β€” building a user story, persona
2. Experience design β€” information architecture, building a task flow, low fidelity wireframes
3. Final Design β€” visual design, micro interactions
and prototyping

Who am I designing for and what is their story? πŸ‘₯ 

Jeff Nobel is an account manager with small custom apparel company Clothes-For-All (selling t-shirts, jackets, etc. that companies or groups can brand with their logo) in Ann Arbour, Michigan.

Persona and User goals

Persona and User goals

Jeff has to get in touch with customers to check if the need to renew orders, starting every school year. They use Stampd (CRM software) everyday and is very proficient with it. They report to the business owner via the CRM. Some business challenges they face is Navigating Client Relationships & Communications and Resources

They find the platform very intuitive, easy to onboard for new users and relays on the information on the CRM tool

User Goals 🌟

Their daily goals and tasks include β€”

  1. Check in with customers when they need to renew orders (yearly, quarterly etc depending on the customers)

  2. Use the CRM as a database that stores information of customers and vendors β€” and be able to access it while talking to a customer over phone and email

  3. Measure performance by reviewing how many emails and phone calls they were able to respond to at the end of each month.

  4. Keep track and update customer order status . And manage a to do list

Product Architecture βš’

Since this product was built to resolve very particular use case, I ensured it would be scalable. Below is the final information architecture I went ahead with.

Product Architecture

Product Architecture

User Task Flows πŸ“™

First time user flow

Wireframes πŸ—’

I came up with these wireframes, after trying out a few different options, keeping in mind that the app has to be intuitive and easy to navigate

Experience Mapping πŸ”—

Due to the time constraint I was only able to map the user’s journey for a single task only

Task β€” To update and track orders


Visual Design πŸ–

I designed a simple system of colors and typefaces, inspired by google’s material design system.


Bringing it together β€” Interface design πŸ–₯

Combining the visual designs, the information architecture and wireframes. I wanted the design to look, approachable but intuitive at the same time. It should be easy to use and productive as well. Since a lot of work that affects the business is done on the CRM, the design should be very precise

Micro interactions ✨

I also added an example of a small micro interaction within the app.

UI - KLAVIYO-1.gif

Feedback and Iterations ✌️

I requested feedback from several designers and mentors. Something that was common was β€”
β€” Repeated Navigation
β€” Action Buttons are not prominent
Apart from this, I added details like a search bar, scroll bar, pagination and a collapsable menus.

Next Steps πŸ™Œ

Since this project served as a design challenge, I had time limitations.
IF I had more time I would, build more experience maps, invest more time in polishing the finer details, and build the systems using Brad’s Frost atomic design. Given further leeway, I would also conduct more user research and keep on iterating the app based about the insights I get from the users to validate the design.