Salesforce

UX/UI Design | Design System | Sketch

Using the right visual cues allows the brain to quickly understand what is being communicated.

Overview

Salesforce provides SaaS CRM systems for major corporations around the world. 

Problem

Recent data protection legislation placed additional legal requirements on organisations in the EU. Salesforce required a way to track data deletion requests in order to comply with the legal requirements of the legislation.

Solution

I designed the UX/UI of a data dashboard to track data requests, view system status, and manage processes. Collaborated with product owners and users to meet usability and legal requirements. Used regulatory and compliance standards for user interface designs. Contributed components to the Salesforce React Lightning Design System. Using Storybook for development. Implemented the design using React.js.

Process

Research
Creating user stories
Sketching using pen and paper
High-fidelity mockups
Stakeholder and user feedback
Revisions
Developing design system components

Tools

  • Sketch
  • Pen & Paper
  • VS Code
  • Github

Team

  • UX Designer
  • Product Owner
  • Backend developers
  • Team leader
  • Design System team

My Role

  • Leading UX/UI design
  • UX Research
  • Design System
  • Coding

Discover – Research

Interviews

I started off the project by meeting with the product owner to get an overview of the project. I interviewed stakeholders and users to understand their needs and what data and functionalities they required from the application.

Legal research

As there were legal requirements, I did research on the new data legislation to understand how its requirements could affect the functionality of the application.

Technical requirements

The application needed to interface with a number of systems. I researched technical documentation to understand how these systems handled data.

Define

User stories

From the research stage, I could define user stories that matched the legal, technical and user requirements. I then met with the product owner to prioritise these user stories and decide what functionality to focus on.

Ideation

Pen & Paper Wireframing

I used pen and paper to develop concepts and ideas on how the user could interact with the UI.

Hi-Fi Mockups & Prototyping

Design thinking

The home dashboard was designed to show a quick overview of the processes. It highlighted potential problems that needed attention using progress rings and icons.

Each of these processes had sub tasks. The main process and sub-tasks both contained statuses, with the main process status being determined by the sub-tasks. Based on a status hierarchy, the sub-task with the lowest status in the hierarchy was assigned to the main process.

A hover panel allowed a quick view of the progress of the sub-tasks.

Clicking on a process revealed a detail view where the user could view history and also perform functions on the sub-tasks.

User testing and feedback

Collaborative review

I used Quip to create a collaborative space for stakeholders and users to provide feedback on the designs, understand functionality, and come up with ideas to enhance the UI.

Revisions

I then integrated the feedback from reviews into future revisions of the UI. I again made these revisions available for stakeholders and users to comment on.

Implementation

Design System

The design system for React was missing implementation of some of the needed components for the application. I collaborated with the Design System team to create components for the open-source project, making them accessible to Salesforce developers.

I used StoryBook as a way to explore the UI and show various states that the components could hold. I wrote reference documentation for developers on how to interact with the component, its various properties and states.

Testimonial

“Kevin was a valued member of my team for a year. Passionate for his work, tenacious, paying attention to details and agile. Kevin led the front end development of 3 projects while also leading the UX/UI design for one of them. He was instrumental in introducing best practices for our build pipelines and our React applications. He helped mentoring junior developers and contributed back to our company’s open source library for React components for our design system. Highly appreciated at professional and interpersonal level by the other team members. Kevin would be a great addition to any team.”

Lefteris
Manager, Salesforce