Base CRM Redesign

Redesign the deal profile of the current Base mobile application.

Hero image


Efficiency and scalability

The current Deal profile in Base needs improvement. Customers want to be more productive. Based on feedback they are looking for an improved profile that addresses these three issues.

Improved organization of information


A quicker way to add objects to a Deal


Frame the problem by asking questions

After analyzing the design challenge prompt, asking questions helps me determine further research direction and discover what is the real problem. Asking question also help me aware of my own assumptions. I asked questions like:

Secondary Research

In order to design the deal profile page, it's important to understand the big picture first such as how the CRM works and what are current products? I looked through the following materials to understand how CRM works:

  • BASE website: general information, support page and eBook
  • BASE mobile APP
  • Competitor website: Salesforce, Microsoft Dynamic
  • Medium Articles of CRM design

User Research

In order to understand what are the needs of sales people? How do they work currently, I conducted user interviews to better understand users' motivation and work flow:

Provide more information at a glance

Before a meeting or a call, sales person always need to do research on their client about their background information, the company’s updates as well as their problems, so it is important for them to recap all information right before the meeting or call.

Quick interaction on mobile

Sales have to work with a lot of deals at the same time so efficient is pretty important for them especially when they are using a mobile device, which means they are probably heading to a meeting. So providing efficient and quick interaction is important.


Reorganize the information architecture

According to the user research and my understanding of how CRM works, I regroup the information of current deal profile based on the frequency users will view or add data. One participant mentioned that he will use activities and collaborator when there are new team members involved in the deal, so I put this information into the second tab.

Interface With Scalability

In order to solve the scalability issue as well as provide the possibility to customize deal profile, I sketch out several concepts. Base on sales person’s needs of viewing more information at one time and quick interaction, I organized these concepts and select one to develop further.

Quick Ways to Add Objects

I explored several ways to quickly add objects within the main page. How I decide on using which concept depends if the interaction is clear or intuitive to users and how the concept can work well with scalability.


Iterate on "Stage Change" Interaction

The concept of present different stage first comes from the “steps” and “progress” design pattern. But during wireframing, I found this concept doesn’t provide enough interaction affordance for users. So then I turn into using “slider” and start to iterate on it to make it not only clear to interact with but also can present the stage information

Iteration 1

Iteration 2

Iteration 3

Iteration 4

Final design

The categories are organized in a list view and users will be able to take a look at the latest items within them so that users will have a better understanding of where this deal is and what they need to do with a glance. In the "Contact" card, the name showed is this deals’ primary contact.

Move deals to the next stage

By providing the earlier and next stage users will have a better context of this deal's stage. There are only three stages included because it will give users enough space to swipe to avoid making mistakes.

Efficient ways to view information

When users want to see more information within each category, they can expand the list. Users can open multiple categories and they can scroll down and up to view the information as opposed to navigating through several pages.

Easy data entry

Users can add new objects into each category simply by using the add button. The animation will give users a clue of which category this object is added to.

Adding more categories

The list of category supports adding more category. To provide user enough space to view this information, basic deal information will collapse but also display the most important information of this deal. When user wants to change the stage, they can go back simply by scrolling back.

< previous

Co-signer pre-qualification

next >

Loan offer dashboard