Adaptive Insights
Atomic Design System
Goals:
Create and define a scalable design across all platforms, to unify the visual web presence.
- Scalable and modular architecture for CSS
- Mobile-first responsive front-end framework
- Well structured semantic HTML that is meaningful and easy to read
- Custom utility class library that eliminates distraction for designer, developer, and content publishers
Responsibilities:
- Audited existing UI and code base
- Defined critical user journeys (the designer, the developer, the marketer, and the customer)
- Validated user journeys through Google analytics insights
- Created custom UI kit with Sketch based on Bootstrap’s CSS framework
- Divided stylesheets into modular and reusable Sass partials
- Automated and enhanced workflows with Gulp.js
- Standardized naming conventions for common interface language
Impact:
- Enabled designers and developers within marketing to create, modify and iterate in a quick and cost efficient manner
- Created cohesive theme extending across our digital ecosystems
- Aligned on taxonomy
- Increased design and development efficiencies and operational rigor
- Well designed and performant user experiences
- Extended branding and identity to all web platforms
Jabal is a great asset to our marketing team. From a functional skill set perspective he brings deep experience in web design + a maniacal focus on the user experience. From a team perspective, Jabal is an avid “we” vs. “me” man. Extremely collaborative, he is always willing to teach, train, or simply help another teammate. He really thrives in a team-oriented environment. Last, but not least Jabal is a terrific +1 to any company wanting to build a culture of excellence. His passion for his work, for team, and for making his company successful shines bright. Adaptive Insights is lucky to have him!
- Michelle Herman, Vice President, Corporate Marketing & Communications
Brand Design System
Example of Design System Elements In Use
Events custom post type
Design & Development
Related Works
ShotSpotter
Our team created specialized solutions tailored to help ShotSpotter thrive online.
Synack
We collaborated with Synack, providing assistance with UX Design, WordPress Development, and Search Engine Optimization to help them achieve their objectives.
Cribl
Cribl's demand generation efforts were bolstered by our WordPress development and marketing design services.
