In late 2021 Taplytics branched out and decided to create a new company called DevCycle, with the goal of becoming the perfect feature management tool for modern development teams. DevCycle was designed to help development teams safely and easily manage new feature releases and increase deployment speed while measuring performance of feature rollouts across different environments. In addition to creating the branding and public-facing marketing site for the company, I also worked alongside our engineering team to create and launch the fully responsive platform. Being the sole designer at the company and given my other design commitments and time restraints, we opted to use the Tailwind UI kit as our starting point and used their base component library to build out our own custom components and the various parts of the platform.
When it came time to start building out the component library and designs for the app, style had already largely been established over the course of my work on the company branding and marketing website. I took what I'd already set up and applied it to my work on the platform, customizing simpler existing components like buttons and form fields and building out new, more complex components as was needed. Below you'll find a few parts of the comprehensive component library that I set up using the Tailwind UI kit as my starting point. It includes everything from simple base components like buttons, tooltips, and form fields to more complex components like modals, list views, and CTA panels.
Design Spotlight I
Getting Started
We wanted the initial experience for users of the platform to be all about getting started so we highlighted all the major things a user would be interested in doing right off the bat with a series of CTAs for creating a new feature flag and setting up teams, projects, and environments.
Design Spotlight II
Feature Management
In the feature management section of the platform users can see all of the feature flags that they and their team have created from the main list view which includes valuable information like who created the feature and when, the status of the feature, and whether the feature is turned on or not in different environments. They can also filter their list of features by status, creator, type, and keyword and they can of course create new feature flags from here as well and choose from 4 main types (Release, Experiment, Permission, and Ops) when setting things up. Users can also switch display modes and view their features in separate tables based on status.
For individual feature set up, we give users the ability to add and create custom variables and variations, set up complex user targeting rules to specify which of their users will receive specific variations of the feature on different environments, and the ability to really easily toggle those environments on or off so they control feature access at the click of a button. Within the Users & Targeting section, users can schedule releases for specific dates and times, set up random distributions so their users receive variations according to custom percentages, and create gradual rollouts so that a feature is sent to users over a custom period of time rather than all at once. We also included lots of useful information in the form of insights that show how many users are receiving a feature in different environments and across different variations and date ranges and give users the ability to view code usage examples and audit logs.
Design Spotlight III
Variable Details
On the variable details page of the platform, users can find tons of useful information about the variables they've created and the statuses of those variables across different features and platforms. It includes helpful information like:
General info like variable name, type, and description
All the values a variable has ever been set to, with a total count of the number of times that value has been received
A breakdown of the different platforms the variable has been seen on and the total number of evaluations for each platform
A comprehensive collection of all the features the variable is associated with
Code references that highlight the specific areas in the code where the variables can be found
Design Spotlight IV
Settings
In settings a user can set up teams, create new projects, add and remove custom environments, and configure platform integrations. They can also view and update their current plan and billing information.
Here’s a closer look at some of the different sections within settings:
Design: Trevor Davson Strategy: Trevor Davson, Taplytics Product & Engineering Teams Product Management: Taplytics Product Team Development: Taplytics Engineering Team
All work completed for and owned by Taplytics Inc. / DevCycle.com
