Lead · UI/UX · Systems
Lead the overall direction of Sureshot's product ecosystem experiences and created the Sureshot UI design language. Built a powerful collection of micro-interactions to be reused across the ecosystem. Lead the discovery effort for Sureshot's user personas. Defined user needs, hills, and product experience roadmaps. Interfaced with existing and future clients to continue user need definitions and provide iterative experiences via Sureshot's SAAS architecture.
Sureshot UI example components
The goal for the Sureshot design system (now called Sureshot UI) was to align all of the existing and new products visually and functionally. Sureshot provides many different products and they encourage the customer/user to switch between different products for different needs, similar to how the Google web app suite works. A key part of that business model is keeping users integrated into your products. If your products are not consistent in appearance and functionality it trains the user to be comfortable with switching product ecosystems since they have already gotten used to different visuals and workflows.
Sureshot Command - Sureshot Connect
Sureshot UI aligned the visual language of the products with well documented UX patterns. This new consistency not only improved the appearance of the applications but also helped define the Sureshot ecosystem of products. Removing the learning curve from each new application the user would visit by sharing consistent UX patterns and visuals keeps the user in the Sureshot world, not jumping between various different platforms and applications.
Consistent visual styling
Sureshot UI was built in Figma and utilized the team features of the tool to allow others to collaborate and quickly iterate with the custom modular designs and pre-built layout modules. Everything was built with the latest auto-layout components so designers could quickly iterate and prototype with ease. The library also included "layout modules" which were predefined sections of the UI that shared common elements and patterns. These modules still allowed for customization but helped create a consistent experience between the Sureshot ecosystem.
Sureshot UI Figma
As the design language grew it also become better documented so that the team can reference components for UX guides and usage instructions. This is useful for those who are wanting to make new designs or for developers who are implementing/tweaking components.
Sureshot UI Figma Documentation
Part of building a strong design system and product catalog is building applications that will scale. An often overlooked requirement is building well documented products internally with a solid onboarding experience. Sureshot UI was built on the idea that any questions surrounding the library could be solved with resources also provided by the library. Sureshot UI has solid documentation, visual examples, API/prop lists with explanations, and Storybook JS integration.
Sureshot UI Dev Documentation Example
At the end of this effort Sureshot went from struggling to keep clients from switching to competitor products to easily selling an entire ecosystem to customers. The strong pairing of product design and functionality combined with the compelling nature of staying in a familiar and linked ecosystem increased Sureshot's business revenue and customer retention rates.
