Mobile Self-Service Communities
I lead the design of our Mobile Self-Service Communities Product at Salesforce. Mobile Self-Service is a product that helps Salesforce's Customers quickly deploy a Customer Support Community site for their product or service. The product combines several existing Salesforce products: Q&A forums, Knowledge Articles, Support Cases, and Ideas, into a simple service community experience.
I was responsible for designing numerous key features and led the team in developing a holistic interaction and visual design system. The app had to be clean and simple for easy customization, but also elegant enough to be used out of the box without any extra styling required. After several iterations, we landed on a visual design language that was clean and minimal to help our customers easily brand the app with their own brand colors and logo. Each component we designed is fully responsive and has animations built-in, which help our customers effortlessly build a delightful and engaging support community experience.
I worked very closely with our Engineers to build a set of responsive templates that would work seamlessly across devices. Defining the proper breakpoints and establishing a system for how to handle displaying content on smaller screen sizes helps our users setup a community that works responsively without any extra work on their end. Building a responsive template framework was a critical part of our process, since our customers would have the ability to drag and drop our responsive components anywhere within our templates.
Support communities are very text-heavy by nature, so we selected Google's OpenType font Open Sans, for use across the app for it's versatility and cross browser compatibility. Open Sans allowed us to utilize several font weights throughout the app, helping us communicate a clear visual hierarchy and keeping focus on content. We determined optimal font sizes, weights, and line-heights, to help our users create beautiful content with little customization required on their end.
We designed an icon font to handle all the iconography in the application. Using an icon font helped us keep all our icons pixel-perfect and crisp when scaling up to retina displays, without needing to create additional icons at different resolutions. We choose to use an icon font over alternatives such as SVG and image sprites, for the extensive browser support and easy customization that icon fonts provide.
2013 - 2014
Product Strategy, UI/UX, Front-End Development