NETPULSE-POWERED APPS

Netpulse enables health clubs and fitness centers to create custom-branded apps that owners can use to engage, sell and connect with their members. Members can download their club's app from the Google Play Store and the iTunes App Store to find classes, track their workouts, connect to their wearable devices, and more.

PROJECT
AppCrusher / Dash 2.0
COMPANY
Netpulse
DATE
2017

COLOR LINKING

The color linking system in AppCrusher was originally created to increase the speed of the app building process. Certain buttons, elements, and pieces of text were linked together throughout the app in an effort to limit the number of colors the designer needed to input. With new in-app products being enabled, the color linking system quickly became confusing and outdated, making it difficult to implement new features and apply client customization.

Both Dashboard 1.0 and the color linking scheme limited many of the custom-branded features that the Netpulse platform offered, caused delays in Implementation and Design, and increased support tickets. When it came time for the Product team to develop their roadmap for 2017, developing a new Dashboard design and upgrading AppCrusher became top priority.

MAKING UPGRADES

In early 2017, the Netpulse Product team delivered new design concepts and updated functionality for the app’s dashboard. These design concepts (Dashboard 2.0) featured new interface elements that would require changes to the AppCrusher software and the Color Palette page.

As the Interface Designer, it was my responsibility to work with the Engineering team to determine the best solution for AppCrusher. Our goal was to upgrade AppCrusher to support new Dashboard 2.0 designs as well as evaluate the impact of updates made to the Color Palette page.

ENGINEERING

The Engineering Team manages AppCrusher and is responsible for building, maintaining and updating the software when new features are released.

IMPLEMENTATION

The Implementation Team is responsible for working with each fitness club once they’ve signed on to be a Netpulse client. They determine and manage timelines, schedule app releases and work with the Interface Designer to provide client branding for initial design concepts.

SUPPORT

The Support Team handles all client calls and provides support for any issues with the live app. They speak directly with club managers as well as club members who have questions or problems using their Netpulse-powered app.

INTERFACE DESIGN

As the Interface Designer, my role relied heavily on the use of AppCrusher. I was responsible for creating, building, and testing all Netpulse-powered apps built in AppCrusher. I was also responsible for reporting bugs and mitigating any changes or updates that needed to be made to the software.

CONSTRAINTS

LACK OF DASH 1.0 DOCUMENTATION

When AppCrusher was first created, the team linked certain colors together on the Color Palette page. They wanted to increase the speed of the build process for Dashboard 1.0 by limiting the number of input colors and creative assets. Unfortunately, the original mapping of this linking had not been documented.  As a result, I needed to go back and document each and every item inside the app that was linked in order to accurately create new mapping for the Dashboard 2.0 design.

TIME ZONES

The Engineering team is based in Kiev, Ukraine, which is 10 hours ahead of San Francisco time. We are often working on projects a day apart, and may only have 3 hours with the team before they end their work day. While this was a normal part of our workflow, this specific project scope and deadline were extremely important to the Netpulse product and Management arranged for our Android and iOS Engineers to fly to San Francisco. This way they could work directly with myself and the Product team for 2 weeks in order to complete vital parts of the project.

Attempted mapping of Dashboard 1.0 color linking

SCOPING THE PROJECT

We needed to pay close attention to the scope of the project as we were working on a product that impacted so many internal teams on an extremely tight timeline. I worked directly with the Engineering team to determine what outcomes were feasible. We kicked off our discussion by asking ourselves questions such as:

Should AppCrusher support both Dash 1.0 and Dash 2.0 designs?
How can we change color linking to possibly support Dash 1.0 and Dash 2.0 designs?
Do we have the capacity to make these changes given the Engineering team’s backlog?
Will these changes slow down the Implementation team’s progress and delay future apps?
Will these changes causes additional support tickets?

After assessing the entire Netpulse team’s workflow, we decided to create an entirely new version of AppCrusher. This version would support both Dashboard 1.0 and 2.0 designs with new functionality and adjusted color linking. This would require less time and effort to implement without disrupting the Implementation team’s workflow or causing more support tickets.

COLOR MAPPING

While the Engineering team began building a new version of AppCrusher, I mapped out the current color linking system for Dashboard 1.0, as an original document had never been created. This document would be vital to making any color linking changes in AppCrusher and would provide support when creating new color mapping for Dashboard 2.0.

CHECKING FEASIBILITY

Once the color mapping documents for Dashboard 1.0 and 2.0 were complete, I sat down with the Engineers to determine feasibility. We checked the document against the AppCrusher code, piece by piece, to make sure every element was accounted for. Changes were made to the document, solutions for Dash 2.0 support were paired down for the initial project scope, and Human Readable Names were updated. 

APPCRUSHER DEVELOPMENT

The initial version of Dash 2.0 was built in a staging environment to allow us to test new builds without affecting any live apps. The Engineering team applied the new color naming and mapping system to the staging environment and I began testing the new dashboard functionality. Each time an app was built, I would record functionality and design elements to share with our Sr. Product Designer who additionally checked them for accuracy.

We ran into a couple of issues during testing, such as accurate Dashboard 2.0 design mapping between Android and iOS platforms. This issue affected how some of the design elements translated between both platforms. The Engineering team was quick to make changes to AppCrusher’s code to address these problems.

Mid-stage testing of Dash 2.0. Dashboard tiles were supposed to be rendered as squares.

THE RESULT

This project was considered a success once we were able to successfully build apps that reflected correct color linking and functionality of Dashboard 2.0 while still fully supporting apps with Dashboard 1.0. When this was accomplished (only a week after our proposed delivery date), we were able to present our first client with an improved mobile product featuring the Dashboard 2.0 design.

The Dashboard 1.0 and 2.0 designs and functionality were created by the Netpulse Product team and our Senior Product Designer.

The final, updated Color Palette page with adjusted color linking for Dashboard 1.0 and 2.0.

RETROSPECTIVE

Configuring AppCrusher to support new Dash 2.0 designs was an interesting and meaningful internal project that left a lasting impression on the company. The project ultimately helped the team come together and understand that big and little improvements drive business forward. I’m thankful I had the chance to work with the Product Team and Engineering Team, as it allowed me to learn more about product and software development, engineering terms, and deliverables.