Lead experience and visual design that aided top-tier customers in cleaning up and implementing Salesforce clouds

Definition

Salesforce Premier customers pay extra for services and apps that help them solve business problems. Several Premier Apps were made to increase the user base and conversion to Premier Services.

Challenges

Needed to create a suite of Salesforce apps from scratch. UI and UX fell on my shoulders due to staffing and an unclear roadmap for Premier Services offerings.

Approach

I created pixel perfect comps with XA annotations, specs, interactions, and prototypes.

Lessons Learned

I gained a deeper understanding of creating optimal flows, wireframes, prototypes and annotations simultaneously with pixel perfect UI comps and micro interactions.

Deliverables

All annotated comps

All marketing material

Zeplin specs

Invision Prototypes

Suite of apps

These apps help Admins and business professionals fix their salesforce orgs and help them plan for future implementations of salesforce products.

 

Roadmapper

The custom roadmapper app consisted of an interface that users used to drag items onto a completely configurable roadmap. Once a roadmap was complete, the user could export the roadmap to present to the relevant party.

The UX/UI need consisted of complete annotated UI comps, interaction models, Invision prototype and Zeplin specs.

The prototype was successfully used internally to gain funding to code the entire app. 

Micro Interactions

While making a drag and drop tool from scratch, problems arise while testing beta versions. For instance, I addressed stories like "as a user who's timeline expanded beyond my current viewport, I want to get to the next section while dragging a tile." The way I solved for this story was to add a hover area to the current row that would hop the user over a section if they held their tile over the area for 1.5 seconds. Similar to Apples dragging an object into a folder, if you hold for a moment, the folder will open and you can keep opening folders or drop it. 

As interaction designers, we have to make these sort of things because users only have one point they can control, and if they want to do two things at once we need to indulge them in interesting ways.

Version One feedback

Quickly after we released version one of the Roadmapper and solicited feedback, we realized that users hacked the app and used it for other purposes than it was originally intended. Since we made the tool as flexible as possible, users often make roadmaps of anything they wanted and exported it instead of configuring in power point or google slides.

In light of this discovery, we are planning to turn this 'hack' into a feature and make it easier for users to customize each tile.

Illustrations

I've also been stepping up my illustration game and following the general lightning guidelines around when and where to surface these reinforcing metaphors. I've realized that illustrations can still play a big role in functional design because of the way all users process information fast and slow. An illustration can convey a message before a user processes a single word. These elements can make functional design just as engaging as any other design system.