Revolutionizing the Workplace Through a Product Experience Designed to Develop Better Habits

SmartHabit helps leaders and their teams pursue business-critical goals one small step at a time. Coming from the world of highly-customized corporate consulting, SmartHabit’s founders seek to revolutionize how work gets done by helping workers develop simple, intentional actions that can be performed consistently for a surprisingly big impact.

SmartHabit differs from traditional corporate consulting in that it embraces technology to automate the process and builds a community for participants. The founders have ambitious goals on how their concepts could be applied across web and native mobile experiences to create transformative change in the workplace. They began working with us to bring the vision to life.

SmartHabit participants receive a small daily set of challenges to help them build productive habits. They “check in” to these challenges through their dashboard.

Early Stage Prototype

We began the process by building out a low-fidelity prototype to validate their concept with little investment. To accomplish this, we needed a notification system to provide users with daily reminders to check in that they had performed their daily action. We utilized MailChimp to perform this task. The second component was that we needed to collect feedback from the participants so that we could assess the level of participation and results. For this component, we utilized Typeform with some conditional outcomes.

The prototype was extremely successful and taught us a lot about how users were interacting with the product. It also revealed opportunities for improvement. Now that the proof of concept was validated, we moved forward with designing and developing the application.

Questions are presented and answered in a public setting to encourage participants to accomplish big challenges as a community.

The SmartHabit Experience

SmartHabit’s product aims to provide the benefits of a custom consulting engagement through an interactive experience that can operate at scale. SmartHabit participants can be grouped by organizations and groups within the organization. The SmartHabit team builds courses customized to organization or group’s needs.

The courses are centered on daily challenges assigned to the user through a morning email message. Users interact with SmartHabit through a personal dashboard that features a new background image each day. The background image is chosen to represent their corporate environment and the goals of the experience.

Users &ldquocheck in&rdquo that they’ve completed their daily actions through their dashboard. As they go through the SmartHabit program, they are provided with insights in the form of data visualizations that reveal their performance compared to others in their group.

SmartHabit is about building community within the participating organization. To accomplish this, users are provided scheduled questions throughout the 45–90 day program, which they answer publicly. These questions are often centered around how to improve outcomes and solve complex problems. The public forum allows other users to respond to posts as the group collaborates through the application to achieve workplace goals.

Participants also receive rewards in the form of badges as they demonstrate proficiency through participation. Although the SmartHabit program is tailored to the participating organization, the experience is designed to reveal personal growth to the individual as they develop better workplace habits. At the end of the course, the user is provided with a report documenting the progress that they made.

Threaded conversations provide an opportunity for group members to work together to meet goals.

Web Application

With a plentitude of ideas and possibilities, we have worked with SmartHabit’s founders to ruthlessly prioritize features and view the product as a continual work in progress. Long-term goals include building a SmartHabit experience across multiple platforms. We’ve chosen to focus on the web application to provide an initial platform for formalizing and testing the product.

The front-end application runs on Node.js and utilizes React to deliver the user experience. Amazon Web Services are handling all of the back-end data storage needs and in order to quickly scale up the product, and we implemented Craft CMS to provide the admin interface.

Data visualizations provide users with insights on where they are at in the program, how they are performing and how their team is performing.

The Process

We needed to establish a framework for how to approach new features as they enter into the roadmap. Since the team is distributed, we are not regularly working together at the same location. This framework allows us to continually take deliberate steps in the right direction.

We split potential features or updates into small manageable components. For a feature to enter into the product roadmap, it must go through the following process:

  1. Identify: Before we get too far along discussing any feature, we need to identify the problem that the feature is trying to solve. Identifying what we are trying to solve provides two great advantages.

    First, it sets the beginning stages of a benchmark for testing. The performance of every feature will be judged first on whether or not it solved the problem that it was responsible for. After that, we can apply metrics and examine to what extent the feature is successfully solving the problem. This offers an opportunity to continually iterate and improve upon what we are building.

  2. Define: Before we begin designing or developing anything, we work with SmartHabit’s founders to define the solution. For example, if the user is receiving a badge to award them for something, we define: What circumstances or metrics trigger that reward, how does the user discover these metrics and how does the user become aware that they received the award. Much like the first stage, this involves asking a lot of challenging questions and proposing a lot of ideas so that we can define the right solution for the given problem at the current stage of the product life cycle.

  3. Design: The product is moving fast and we are constantly rolling out new updates to the application. Our strategy is to have design out in front of development as much as possible. Thus, we have a prototype route established that provides a venue for designing the views. This way, the styles and JSX markup can easily be transitioned into the functional application.

    The design system was created to easily be customized with a daily background image fitting of the organization or group participating in the program. The modular system also allows for new features to be deployed as the product continues to grow. Vibrant colors and a friendly typographic system are utilized to provide a fun and upbeat component to the workplace.

  4. Develop: After a feature has made it through the design phase and gets client approval, the feature is developed, tested in staging and eventually deployed to the final product.

  5. Research & Iterate: SmartHabit is an innovative company with exciting new ideas. We want to continually test our assumptions against user engagement. By examining this use, we can continue to improve upon and prioritize features.

Badges are awarded to mark accomplishments in proficiency. The badge system is designed to expand as the product grows.


As we continue to build SmartHabit, we have uncovered and documented the core values that arise. We continually reference these values as we grow the product to ensure that the experience remains on target. We expect this value set to continue to grow along with this exciting product.

These values include:

  • Proficiency-based Rewards: Rewards represent proficiency rather than just activity alone.

  • Community over Competition: Metrics should foster community through awareness instead of positioning coworkers against one another.

  • A Perfect Complement to Work: Although helping to improve the workplace, SmartHabit shouldn’t feel like work, nor should it get in the way of it.

Always Evolving

SmartHabit is just getting started and we are thrilled to be their design and development partner as they grow their product. We will continue to update the case study, and you can find out more at the SmartHabit website.

Designed for multiple screens

Select a device below to view & interact with a live preview of the website.

SmartHabit - Mobile Device Preview SmartHabit Tablet - Device Preview SmartHabit Desktop - Device Preview

Need help launching your product idea?

Start a Project