WHEN:
This project was completed during my summer internship with Salesforce (between June and September 2015). Each component was a quick sprint project lasting roughly two weeks each.
WHAT:
Lightning components are custom additions to Salesforce Lightning. They are purchased through the Salesforce AppExchange and then placed within a sales representative's individual account, lead, or contact pages.
WHY (THE GOAL):
1 : For our users the goal of this project was to provide sales representatives with relevant, contextual information that can help them improve conversations and customer relationships.
2 : For Salesforce, our goal was to be able to launch Salesforce Lightning with custom, 3rd party made components already available in the AppExhcnage. This led to us designing some components in house and having 3rd party companies (like Clerisoft) develop them.
WHO:
For this project I received initial direction form my manager within design. Throughout the project I worked closely with our PM to meet the projects goals and strict timeline. Finally, after designing and redlining the components, the designs were passed to Clerisoft for development.
ORG CHART COMPONENT:
COMPONENT GOAL: Provide an org chart for sales representatives to better understand their customer's company structure and buying power.
THE SOLUTION: An org chart that provides a customers contact information, their peers and their superior in one compact view.
EARLY IDEATION:
Org charts are complex objects. This complexity is multiplied when the org chart is placed into a small square. This was exactly the case with the Lightning Component org chart. To start my ideation process I did a lot of sketching. The main challenge was defining a strong interaction model and keeping the controls simple enough to pair well with the components small size. The illustrations below are a few of my early attempts at doing just that.
The main challenge was defining a strong interaction model and keeping the controls simple enough to pair well with the components small size.
WIREFRAMING :
As I began wire framing I continued to try and refine the interaction model of the org chart. Some considerations were how the user could navigate up and down the chart, how to show the amount of levels above and below the center, and the amount of features to include (zoom, center, edit, ect). The images below show a few of the many iterations I went through during the process.
I continued to try and refine the interaction model of the org chart.
REFINEMENT THROUGH EXPERIMENTATION:
After bringing my designs to a small review I received feedback to continue to refine and experiment the chart's controls. My next step was to narrow down my designs to the strongest versions and create key flows to explore the feel of using the chart.
FINAL ITERATION:
With the final version I decided to narrow down the controls to basic navigation (sideways, up and down) and a center button to quickly bring the user back to the contact they started with. Below is the final iteration as well as a view of the component in context. Click on the images below to expand them.
REDLINES :
Before passing my designs off to Clerisoft to be developed I had to redline the org chart and call out every detail down to the pixel. Within Salesforce UX all redlines must map the the Salesforce Design System, a guide that maps out specific spacing, text sizing and color guidelines to create a unified look and feel for Salesforce. This was a very time consuming process that helped me understand the entire shipping process and how an idea becomes a hard coded reality. In addition to redlines I also had to map out all of the org chart's possible user flows, including rare edge cases.
This was a very time consuming process that helped me understand the entire shipping process and how an idea becomes a hard coded reality.
LOCALE INFORMATION COMPONENT:
COMPONENT GOAL: Provide sales representatives with information related to their customer's location helping to improve casual conversation, meeting arrangements, and negotiations.
THE SOLUTION: An informational card containing a location's date, time, weather, upcoming holidays and currency conversion information (for international customers).
EARLY IDEATION :
To start the process I began sketching out my ideas. My first thought with this project was creating a light weight version of a Google Now or Cortana for Sales Representatives. This was reflected by individual cards of contextual information provided in one small component. Pictured are my "final sketch" and first version of the component in pixels.
...a light weight version of a Google Now or Cortana for Sales Representatives.
REFINEMENT:
After putting my initial wireframes through a design review with my team I received positive feedback regarding the different types of information that the card was showing. Some areas for improvement were an overall reduction of complexity (reduce the variations of the type's weight and size and provide a less detailed weather report) as well as a reduction of the component's size. This feedback was reflected in my next iterations.
FINAL ITERATIONS:
With my final iterations I continued to reduce the card's complexity and aligned more with the overall Salesforce style. I also decided to add in upcoming holiday information for international customers as scheduling international meetings during the holiday season can be a challenge for sales reps. Below are the final iterations of the component as well as a view of the component in context.
REDLINES:
Similar to the org chart component, the locale information component also had to be redlined down to the pixel.
