Sureshot UI Development & Design

Role

Fullstack Developer / Designer

Client

Sureshot

Agency

Sureshot

Date

Jan 2019 - Ongoing

Brief

Fullstack development and design across several different platforms. These platforms are built on React and written in Typescript with custom backend functionality running on dotNET core and C#. Lead the Sureshot design effort and design language creation from both a development and design perspective. This design language was created to bring visual and UX consistency between existing and new products. Sureshot UI was designed in Figma to allow other members to easily create mockups using it's team library functionality. All of the designs were made as components to allow faster iteration and better development handoff. The design language was created as a Typescript/React private NPM repo. It features flexible components while still maintaining an opinionated API structure. Every component is documented and shown in an interactive way using Storybook JS. Sureshot UI will continue to grow and adapt to support Sureshot's products.

Case Study

I joined Sureshot as a fullstack developer, however once realizing there was no designer on the team and seeing the visual and functional inconsistencies between products I began to implement a design system that could align all of the products. I designed the system to be modular to simplify our development workflows with a heavy focus in data management/dashboard components.

Sureshot UI example components

Simplify, simplify, simplify

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 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.

Sureshot Activate - Sureshot Segmentation

Collaboration

Sureshot UI was built in a design tool called Figma utilizing the team features of the tool to allow others to collaborate and quickly iterate on designs. Everything was built as components so if a change was made it would propagate through all the designs, which saved countless hours due to the large artboard counts and sizes many of our mocks had.

Sureshot UI Figma

Future-proofing

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, Storybook JS integration, as well as being written in Typescript with custom types (along with our other products as well).

Sureshot UI Documentation Example