SugarCRM

SugarCRM Web and Mobile Product Redesign

SugarCRM helps companies to improve business relationships with their customers. Over 6000 companies use the products designed by my UX team. Customers include Apple, The New York Times, JP Morgan Chase, and IBM.

Introduction

SugarCRM, like most startups, shipped quickly and focused on product market fit. As they went upmarket to larger enterprise customers, more functionality made its way into the product, resulting in complexity. Users felt unproductive, overwhelmed and frustrated. I drove a vision making the experience better, solving user complaints, and meeting our long-term business goals.

Understanding The Problem

Feedback from customers was centered around three issues; cluttered, complicated UX, inefficient layout and outdated user interface. A two day offsite was held to run through a heuristic evaluation of the web and mobile products. UX issues were identified as we performed key use cases and solutions were documented. Competitive analysis revealed inefficiencies in our layouts and flows, hindering our users' productivity. Visually, the design was dated, drab, and unguided. This understanding of the product and customers helped us identify which critical issues to address.

Dark gray text on a light gray background which leads to poor legibility. Heavy blacks and gray linen added to the dated feel.

Mobile and tablet shared a dark and drab visual design. Buttons for critical actions were positioned differently on crucial screens.

Setting Goals

With an understanding of the problems, we established goals, the top was:

  • Improve design for over 100 usability issues, prioritized by impact to the user's ability to get their job done.
  • Establish a clean and modern visual design language, with rules documented in a style guide.
  • Ensuring our products are accessible by all, meeting WCAG compliance.
visual design explorations Explorations of some essential elements of the new design system.

Design Iterations

We established three design principles: Clear, Consistent and Efficient. These principles guided decision making helped to resolve differences of opinions and addressed user frustrations.

  • Determined how the use of colors and font would positively affect our use cases and still reflect our brand.
  • Tested concepts on production, with real users in key flows to see how they work in practice.
design iterations Iterations we did for web and mobile.

Results

  • Released at SugarCon 2016 to over 1000 attendees where 100% of customers expressed need and desire for the new design.
  • A new visual design language, documented in a Style Guide, empowering designers and developers (internal and external) to implement designs on our product.
  • Mobile use went from 1000 daily to 3500 daily users, and our NPS doubled.
design results on web and mobile Final designs for web and mobile.